Bootstrap 3 carousel, extra space in the left and right -
here index page
<body id="home"> <section class="container"> <header class="row"> <?php include "components/php/header.php" ?> </header> <div class=" row"> <div class="col col-lg-12"> <?php include "components/php/main_carousel.php" ?> </div> </div> </section> <!-- container --> <!-- scripts --> <script src="js/jquery-v1.10.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="components/javascript/custom.js"></script> </body>
here carousel
<div id="main_carousel" class="carousel-slide" data-ride="carousel"> <!-- indicators --> <ol class="carousel-indicators"> <li data-target="#main_carousel" data-slide-to="0" class="active"></li> <li data-target="#main_carousel" data-slide-to="1"></li> <li data-target="#main_carousel" data-slide-to="2"></li> </ol> <!-- wrapper slides --> <div class="carousel-inner"> <div class="item active"> <img src="images/carousel_main/1.jpg" alt="..." style="min-height:350px; max-height:350px;min-width:100%;max-width:100%;"> <div class="carousel-caption"></div> </div> <div class="item "> <img src="images/carousel_main/2.jpg" alt="..." style="min-height:350px; max-height:350px;min-width:100%;max-width:100%;"> <div class="carousel-caption"></div> </div> <div class="item "> <img src="images/carousel_main/3.jpg" alt="..." style="min-height:350px; max-height:350px;min-width:100%;max-width:100%;"> <div class="carousel-caption"></div> </div> </div> <!-- controls --> <a class="left carousel-control" href="#main_carousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#main_carousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
demo http://www.bootply.com/119365
here looks like
..please me rid of space marked in yellow........................................................................................................................................
add .row
in `id="main_carousel"
<div id="main_carousel" class="carousel-slide row" data-ride="carousel">
Comments
Post a Comment