bootstrap carousel within a column

Question

I have created a row with 3 columns (3-6-3) with a carousel in the middle column.

Everything seems to be working fine, however, I have unwanted space on either side of the middle column. See below:

https://i.sstatic.net/3gGK4.jpg

I would like the left/right (columns containing the button groups) to be flush up against the carousel, if possible.

My code is below. And by the way, I am using the default (ie, unchanged/uneditted bootstrap.css)

<div class="container" style="margin-bottom: 20px">
<div class="row">
    <div class="col-md-3">
        <div class="btn-group-vertical btn-block">
        <button type="button" class="btn btn-primary">Online Payments</button>
        <button type="button" class="btn btn-primary">Helpful Links</button>
        <button type="button" class="btn btn-primary">Meetings</button>
        </div>
    </div>
    <div class="col-md-6">

    <!--beginning of carousel-->

          <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="http://placehold.it/800x200" alt="Chania">
            </div>

            <div class="item">
              <img src="http://placehold.it/800x200" alt="Chania">
            </div>

            <div class="item">
              <img src="http://placehold.it/800x200" alt="Flower">
            </div>

            <div class="item">
              <img src="http://placehold.it/800x200" alt="Flower">
            </div>
          </div>

          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

<!--end of carousel-->  

    </div>
    <div class="col-md-3">
        <div class="btn-group-vertical btn-block">
        <button type="button" class="btn btn-primary">Legal Notices</button>
        <button type="button" class="btn btn-primary">Phone Book</button>
        <button type="button" class="btn btn-primary">Contact</button>
        </div>
    </div>
 </div>

Thanks for any help you may be able to provide.

Answer 1

Bootstrap columns have a default 15px padding on either side so just add a class or id for the container wrapping the three columns and remove the padding like this:

HTML:

    <div class="container" id="carousel-contain" style="margin-bottom: 20px">
        <div class="row">
            <div class="col-md-3 left-col">
        <div class="btn-group-vertical btn-block">
        <button type="button" class="btn btn-primary">Online Payments</button>
        <button type="button" class="btn btn-primary">Helpful Links</button>
        <button type="button" class="btn btn-primary">Meetings</button>
        </div>
    </div>
    <div class="col-md-6">

    <!--beginning of carousel-->

          <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="http://placehold.it/800x200" alt="Chania">
            </div>

            <div class="item">
              <img src="http://placehold.it/800x200" alt="Chania">
            </div>

            <div class="item">
              <img src="http://placehold.it/800x200" alt="Flower">
            </div>

            <div class="item">
              <img src="http://placehold.it/800x200" alt="Flower">
            </div>
          </div>

          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

<!--end of carousel-->  

    </div>
    <div class="col-md-3 right-col">
        <div class="btn-group-vertical btn-block">
        <button type="button" class="btn btn-primary">Legal Notices</button>
        <button type="button" class="btn btn-primary">Phone Book</button>
        <button type="button" class="btn btn-primary">Contact</button>
        </div>
    </div>
 </div>

CSS:

#carousel-contain.col-md-3.left-col {
    padding-right:0px;
}
#carousel-contain.col-md-6 {
    padding:0px;
}
#carousel-contain.col-md-3.right-col {
    padding-left:0px;
}