Bootstrap 4 Carousel Responsive (Image and Text)

    <style>      .rel-img{        position: relative;      }      .overlay-txt{        position: absolute;        bottom:0;        left:12%;        color:#fff;       }    </style>    <div class="row">
      <div class="col-sm-3">        <div class="student carousel slide" id="carousel-student-151" data-interval="false" data-ride="carousel">
          <!-- Wrapper for slides -->          <div class="carousel-inner" role="listbox">
            <div class="item active" data-studentid="9">              <a href="/Profile/Public/9" target="_blank">                <img class="img-responsive rel-img" src="data:image/jpg;base64,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"><span class="overlay-txt"> My Name Here </span>              </a>            </div>



          </div>
          <!-- Controls -->          <a class="left carousel-control" role="button" style="visibility: hidden;" href="#carousel-student-151" data-slide="prev">            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>            <span class="sr-only">Previous</span>          </a>          <a class="right carousel-control" role="button" style="visibility: hidden;" href="#carousel-student-151" data-slide="next">            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>            <span class="sr-only">Next</span>          </a>        </div>      </div>    </div>

How to customize the Bootstrap carousel to have some text static and some chang with each background picture

To achieve it you can do the following :

• Position your company name element inside the carousel-inner div but not into a .carousel-item div. It will prevent to slide like the carousel-item divs
• Into every slide, insert an element for the service company, and an image for the background.

So the code could be :

<div id="carousel-ID" class="carousel slide" data-ride="carousel">
  <h2>Company name</h2>
  <div class="carousel-inner">
    <div class="carousel-item active">
        <h3>Company service 1</h3>
        <img src="..." alt="...">
    </div>
    <div class="carousel-item">
        <h3>Company service 2</h3>
        <img src="..." alt="...">
    </div>
    <div class="carousel-item">
        <h3>Company service 3</h3>
        <img src="..." alt="...">
    </div>
    <div class="carousel-item">
        <h3>Company service 4</h3>
        <img src="..." alt="...">
    </div>
    <div class="carousel-item">
        <h3>Company service 5</h3>
        <img src="..." alt="...">
    </div>
  </div>
</div>

Then, use CSS to adjust the positioning of the <h2>, each <h3>, and the background image, like so :

 .carousel h2 {
    position: absolute;
    z-index: 3; // To appear above the slides
    margin-top: 3rem;
    margin-left: 3rem;
  }
  .carousel-item {
    // position: relative; // Just for info, already set in Bootstrap.
  }
  .carousel-item h3 {
    position: absolute;
    margin-top: 10rem; // Adjust here the space from top
    margin-left: 3rem;  // Adjust here the space from left
    z-index: 2; // To appear above the image
  }
  .carousel-item img {
    position: absolute;
    z-index: 1; // To appear below the h3
  }

The code may be adjusted to match Bootstrap styles.

Bootstrap 4 Carousel with solid color in background and Image on right and text on left

Remove d-none class from carousel-caption and try this way :

.carousel-item {  height: 100vh;  min-height: 350px;  background: no-repeat center center scroll;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}.text_part{ display: none;}@media (max-width: 575px){ .text_part{ display: block;}.left_part{ display: none;}}

  <section class="text_part">    <div class="text">     <h2 >your text</h2>   </div> </section>
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators">    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>  </ol>  <div class="carousel-inner" role="listbox">    <!-- Slide One - Set the background image for this slide in the line below -->    <div class="carousel-item active" style="background-color: gray">      <div class="carousel-caption  d-md-block">        <div class="row">          <div class="col-md-6 left_part">            your text          </div>          <div class="col-md-6 col-sm-12">           img          </div>        </div>      </div>    </div>    <!-- Slide Two - Set the background image for this slide in the line below -->    <div class="carousel-item" style="background-color: pink">      <div class="carousel-caption  d-md-block">        <div class="row">          <div class="col-md-6 left_part">            your text          </div>          <div class="col-md-6 col-sm-12">           img          </div>        </div>      </div>    </div>    <!-- Slide Three - Set the background image for this slide in the line below -->    <div class="carousel-item" style="background-color: green">     <div class="carousel-caption  d-md-block">        <div class="row">          <div class="col-md-6 left_part">            your text          </div>          <div class="col-md-6 col-sm-12">           img          </div>        </div>      </div>    </div>  </div>  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">    <span class="carousel-control-prev-icon" aria-hidden="true"></span>    <span class="sr-only">Previous</span>  </a>  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">    <span class="carousel-control-next-icon" aria-hidden="true"></span>    <span class="sr-only">Next</span>  </a></div>

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}