Highlighted

Customise Bootstrap Carousel

New Here ,
Feb 15, 2018

Copy link to clipboard

Copied

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;

}

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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">

Views

1.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Customise Bootstrap Carousel

New Here ,
Feb 15, 2018

Copy link to clipboard

Copied

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;

}

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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">

Views

1.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 15, 2018 0
Adobe Community Professional ,
Feb 15, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 15, 2018 0
New Here ,
Feb 15, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 15, 2018 0
Adobe Community Professional ,
Feb 15, 2018

Copy link to clipboard

Copied

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">

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 15, 2018 0
New Here ,
Feb 15, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 15, 2018 0