Hero banner design using twitter bootstrap

bootstrap hero banner

HTML Code


<div class="bd-example">
  <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active"> <img src="slider-one.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption">
          <p>Founded by expert Attorneys</p>
          <h5>A Team of Effective & <br>
            Experienced Attorneys</h5>
          <a href="#" class="btn btn-dark mt-5 dd6"> Contact Us</a> </div>
      </div>
      <div class="carousel-item"> <img src="slider-two.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption">
          <p>Founded by expert Attorneys</p>
          <h5>A Team of Effective & <br>
            Experienced Attorneys</h5>
          <a href="#" class="btn btn-dark mt-5 dd6"> Contact Us</a> </div>
      </div>
      <div class="carousel-item"> <img src="slider-three.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption">
          <p>Founded by expert Attorneys</p>
          <h5>A Team of Effective & <br>
            Experienced Attorneys</h5>
          <a href="#" class="btn btn-dark mt-5 dd6"> Contact Us</a> </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
</div>

CSS Code


.carousel-caption {
    top: 20%;
    text-align: left;
}
p {
    line-height: 28px;
}
.carousel-caption h5 {
    font-size: 55px;
}
.carousel-caption h5 {
    font-size: 55px;
    font-family: 'EB Garamond', serif;
}
.btn-dark {
    background-color: #b9753f;
    border-color: #b9753f;
}
.btn {
    border-radius: 0;
    padding: 8px 22px;
    font-family: 'EB Garamond', serif;
}

View live example

Download this banner bootstrap code (179 downloads)
Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top