Adding responsive borders to Bootstrap carousel

Question

I'm having a hard time in implementing responsive borders on a carousel made with bootstrap.

My situation is simple. I don't want a full-width carousel; my images are 940px wide and that must be the maximum size of the width. Of course, the carousel must be aligned horizontally to the center.

This is the reason why I wrapped everything in a #carousel-container with the following CSS:

#carousel-container {
    margin: 25px auto 0px auto;
    max-width: 940px;
}

This is my current HTML code (the bluebg class just adds a blue background to the row). Pretty much like the standard code given by Bootstrap documentation:

<div class="row bluebg">
    <div id="carousel-container">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active">
              <img src="img/carousel-test.jpg" alt="Carousel Test">
            </div>
            <div class="item">
              <img src="img/carousel-test.jpg" alt="Carousel Test 2">
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
    </div>
</div>

Everything seems to be working fine but the thing is... I need to add borders on the top, on the left and on the right. 10px white borders. I have tried everything but everytime, when I resize the browser window, the right and left borders get cut and aren't included in the responsive view.

At the moment, this is where I added my CSS borders:

.carousel-inner {
    border-top: 10px;
    border-left: 10px;
    border-right: 10px;
    border-bottom: 00px;
    border-color: #fff;
    border-style: solid;
}

I tried the same even for the .carousel class, but with no luck.

This is what I get from my desktop browser:

And this is what I get from my mobile view or resizing the browser window to the minimum:

I want those borders to be always displayed!

How can I achieve this? Thanks in advance guys.

Answer 1

Thanks to whoever answered and all your efforts. In the end, after many tries, I have fixed the problem by myself by using this CSS:

.row {
    margin-right: inherit;
    margin-left: inherit;
}

The default .row in the bootstrap CSS was set to:

.row {
    margin-right: -15px;
    margin-left: -15px;
}

I don't know the meaning of this decision but that was the reason why my carousel borders were actually acting as expected:

I hope this answer will be useful to all the others who got in my same trouble.

Answer 2

Like this padding and background color in carousel class.

DEMO :- http://jsfiddle.net/7Ur6z/260/

Answer 3

You have to override the media-query that set to 0 your borders.

1. From inpector search the selectors and media-query that do this, for example will be:

   @media screen and (max-width: 979px) {
       div.corousel-inner {        
           border: 0;
       }
   }   
   

2. Add a class to your carousel-inner, like this <div class="carousel-inner my-inner">

3. In your CSS file add this rule:

   @media screen and (max-width: 979px) {
       div.corousel-inner.my-inner {       
           border-top: 10px;
           border-left: 10px;
           border-right: 10px;
           border-bottom: 00px;
           border-color: #fff;
           border-style: solid;
       }
   }