CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kallol Das
Kallol Das

Reputation: 141

why does bootstrap carousel take margin on its left and right side automatically?

I am trying to make a carousel with full screen. That means I need my carousel 100% wide literally. But it is leaving some place on its left and right side. Other elements are working fine. Here is the image:

My Code is: 

 <div class="container-fluid">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="images/slide-1.jpg" alt="" />
            </div>
            <div class="item">
                <img src="images/slide-2.jpg" alt="" />
            </div>
            <div class="item">
                <img src="images/slide-3.jpg" alt="" />
            </div>
        </div>
    </div>
<div style="width: 100%; height: 300px; background: #990000;">&nbsp;</div>
</div>

How to remove these unwanted margins?

Upvotes: 2

Views: 2974

Answers (2)

hartanta
hartanta

Reputation: 36

this is because .container already have padding-right: 15px; padding-left: 15px; so you need to create a new class to overwrite by making padding-right: 0; padding-left: 0;

<div class="container-fluid header">
...
</div>

.header {padding-right: 0; padding-left: 0;}

Upvotes: 2

AVI
AVI

Reputation: 5703

try following

 <style>
      .carousel-inner > .item > img,
      .carousel-inner > .item > a > img {

          margin: 0 auto;
      }
      </style>

else try this

.carousel .item {
    width: 100%; /*slider width*/
    max-height: 400px; /*slider height*/
}
.carousel .item img {
    width: 100%; /*img width*/
}
@media (max-width: 767px) {
    .block {
        margin-left: -20px;
        margin-right: -20px;
    }
}

Upvotes: 0

Related Questions