CODEWITHSUNDEEP
twitter-bootstrap-3carousel
Ren Mathew
Ren Mathew

Reputation: 77

Bootstrap 3 carousel, extra space in the left and right

Here is my 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 is my 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 for 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 is what it looks like

why is there an extra space

..please help me to get rid of this extra space marked in yellow........................................................................................................................................

Upvotes: 2

Views: 2668

Answers (1)

Mo.
Mo.

Reputation: 27445

add .row in to `id="main_carousel"

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

http://www.bootply.com/119371

Upvotes: 1

Related Questions