Customise Bootstrap Carousel
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;
}
AdChoices