کافی است کد زیر را استفاده کنید

<style media="screen">
/* Make the image fully responsive bootstrap 4 carousel  */
.carousel-inner img {
	width: 100%;
	height: 100%;
}

</style>

a{
     -o-transition:color .2s ease-out, background 2s ease-in;
     -ms-transition:color .2s ease-out, background 2s ease-in;
     -moz-transition:color .2s ease-out, background 2s ease-in;
     -webkit-transition:color .2s ease-out, background 2s ease-in;
     transition:color .2s ease-out, background 2s ease-in;
}

کد فوق باید در a باشد

گاهی اوقات لازم است که اندازه استاندارد col-lg-3 را کمی کاهش دهیم اما ستون کناری که col-lg-9 است مقداری فضای خالی در سمت راست اضافه میشود

bootstrap 4 از سیستم flex-box استفاده میکند و ما بدون نیاز به دست کاری متغییر ها و استاندارهای آن از ۲ کلاس کمی استفاده کنیم مثلا

<style media="screen">

.col-side-right{
  flex: 0 0 20% !important;
  max-width: 20%;
}

.col-side-left{
  flex: 0 0 80%;
  max-width: 80%;
}

</style>

<div class="row">
  <div class="col-lg-3 col-side-right">
    
  </div>
  <div class="col-lg-9 col-side-left">
    
  </div>
</div>

دو کلاس col-side-left و col-side-right با تغییر درصد های پیش فرض col-lg-3 از ۲۵٪ به ۲۰٪ باعث کوچکتر شدن عرض col-lg-3 میشود

سلام برای خود من سوال بود که چطوری میتونم کاری بکنم که بعد از عنوانی که برای یک منو انتخاب میکنم بتونم یک طرح گرافیکی را قرار بدم یک راه حل کاربردی را برای شما دوستان معرفی میکنم.

.title_with_bg
{
font-size:14px;
font-weight:20px;
}
.title_with_bg:after {

background: url("../img/title-bg.jpg") no-repeat;
display: block;
position: relative;
width: 20%;

padding-bottom: 1%;
background-size: 100%;

content: "";

display: inline-block;

}