Customise Bootstrap Carousel

[davidb88389594]

Hi All,

I am trying to modify the bootstrap carousel so that I can remove the grey side panels on either side of the image and then expand the image into that area.

Here is an example of the website: http://www.mml-tanzania/dev

Thank you in advance!

Here is the html:

<div class="container">

    <div class="row">

      <div class="col-lg-12">

        <div class="container-fluid">

          <div id="carousel1" class="carousel slide" data-ride="carousel">

            <ol class="carousel-indicators">

              <li data-target="#carousel1" data-slide-to="0" class="active"></li>

              <li data-target="#carousel1" data-slide-to="1"></li>

              <li data-target="#carousel1" data-slide-to="2"></li>

              <li data-target="#carousel1" data-slide-to="3"></li>

              <li data-target="#carousel1" data-slide-to="4"></li>

            </ol>

            <div class="carousel-inner" role="listbox">

              <div class="item active"><img src="images/photo1.jpg" alt="First slide image" class="center-block">

                <div class="carousel-caption">

                <h3>"The utmost efficiency and professionalism"</h3>

             <p>Ndovu Resources Limited </p>

                </div>

              </div>

              <div class="item"><img src="images/photo2.jpg" alt="Second slide image" class="center-block">

                <div class="carousel-caption">

                   <h3>"Ability to compete on an international standard.”</h3>

             <p>Caroil</p>

                </div>

              </div>

              <div class="item"><img src="images/photo3.jpg" alt="Third slide image" class="center-block">

                <div class="carousel-caption">

                 <h3>"First class catering services without the headaches and fuss."</h3>

             <p>Ausenco International Limited</p>

                </div>

              </div>

              <div class="item"><img src="images/photo4.jpg" alt="Third slide image" class="center-block">

                <div class="carousel-caption">

                 <h3>“I would not hesitate to recommend MML"</h3>

               <p>Resolute (Tanzania) Limited </p>

                </div>

              </div>

              <div class="item"><img src="images/photo5.jpg" alt="Third slide image" class="center-block">

                <div class="carousel-caption">

  <h3>"Efficient and trouble free.”</h3>

              <p>Kilombero Sugar Company Limited </p>

                </div>

              </div>

            </div>

            <a class="left carousel-control" href="#carousel1" role="button" 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" href="#carousel1" role="button" data-slide="next">

   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

   <span class="sr-only">Next</span>

  </a>

  </div>

        </div>

      </div>

    </div>

  </div>

CSS:

@charset "UTF-8";

body {

  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

}

/* Change NavBart colors */

.navbar {

  background-color: #FFFFFF;

  border-color: #FFFFFF;

  padding-left: 15px;

  padding-right: 0px;

}

.navbar .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {

  background-color: #BFBFBF;

}

/* Change Navbar Height */

.navbar {

  min-height: 80px;

}

.navbar-brand {

  height: 80px;

  line-height: 80px;

  padding-top: 10px;

  padding-left: 0px;

  padding-right: 0px;

}

.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}

.mb-paragraph {

  text-align: justify;

  padding-left: 15px;

  padding-right: 15px;

}

@media (min-width: 768px) {

  .navbar-nav > li > a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}

/* Text */

h1 {

  text-align: center;

  font-size: 20px;

  font-weight: bold;

}

[Nancy OShea]

That URL doesn't work.  How wide are your images?

[davidb88389594]

Hi Nancy,

http://www.mml-tanzania.com/dev/

1000 x 521

[Nancy OShea · Accepted solution]

Below is a working example of Bootstrap's default carousel inside a centered div.

Bootstrap 3.3.7 Default Carousel Slider

My images are 1180px wide.  If your images are smaller,  use a smaller parent div.

<div class="col-sm-8 center-block">

[davidb88389594]

I increased the image size to 1180 and it worked perfectly - thank you Nancy!