CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Alex Zahir
Alex Zahir

Reputation: 969

Bootstrap carousel full width issue

I am using bootstrap v 3.3.5's carousel with background images that need to be full width. I have set a min-height on the background images so that the full image shows. But there is a margin on left and right of the slides which I can't seem to be able to get rid of.

My HTML:

 <header id="header">
    <div class="container-fluid">
        <div class="row">
            <div id="myCarousel" class="col-xs-12 banner carousel slide">
              <div class="carousel-inner">
                <div class="fox-img1"></div>
                    <div class="active item item1">
                        <h2>
                            Ever wondered what goes into making a brake pad?
                        </h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus congue ante sed sagittis.
                            Quisque ves tibulum lectus et posuere commodom.
                        </p>
                        <a class="case-study" href="#">View Case Study</a>
                    </div>

                    <div class="item item2">
                        <h2>
                            Heading 2 Goes Here
                        </h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus congue ante sed sagittis.
                            Quisque ves tibulum lectus et posuere commodom.
                        </p>
                        <a class="case-study" href="#">View Case Study</a>
                    </div>
                    <div class="item item3">
                        <h2>
                            Heading 3 Goes Here
                        </h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus congue ante sed sagittis.
                            Quisque ves tibulum lectus et posuere commodom.
                        </p>
                        <a class="case-study" href="#">View Case Study</a>
                    </div>
                    <div class="item item4">
                        <h2>
                            Heading 4 Goes Here
                        </h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus congue ante sed sagittis.
                            Quisque ves tibulum lectus et posuere commodom.
                        </p>
                        <a class="case-study" href="#">View Case Study</a>
                    </div>
                </div><!-- end carousel-inner -->

                <ol class="carousel-indicators dots">
                    <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
                    <li data-slide-to="1" data-target="#myCarousel"></li>
                    <li data-slide-to="2" data-target="#myCarousel"></li>
                    <li data-slide-to="3" data-target="#myCarousel"></li>
                 </ol>                    
            </div><!-- end banner -->
        </div>
    </div><!-- end container-fluid -->
</header><!-- end header -->

The CSS:

.carousel, .item {overflow: hidden;}
.carousel-inner .item {transition: 0.4s ease-in-out left;}
.banner .carousel-inner {margin: 0;}

.banner {
    margin-top: -40px;
    margin-bottom: -1px;
    position: relative;
}
.fox-img1 {
    width: 436px;
    height: 682px;
    background: url(../img/avatar.png) no-repeat;
    position: absolute;
    right: 0; top: 0;
    z-index: 99;
}
    .banner .item {
         min-height: 730px;
    }
        .item1 {background: url(../img/banner-img1b.jpg) top center no-repeat;}
        .item2 {background: url(../img/banner-img1b.jpg) top center no-repeat;}
        .item3 {background: url(../img/banner-img1b.jpg) top center no-repeat;}
        .item4 {background: url(../img/banner-img1b.jpg) top center no-repeat;}

I tried adding .banner {margin: 0!important; padding: 0!important} but it doesnt remove the margins on each side.

Upvotes: 1

Views: 1212

Answers (3)

Tahir77667
Tahir77667

Reputation: 2512

You will actually get stunned to hear the solution....Just remove the

<div class="container-fluid">

before the

<div id="myCarousel" class="col-xs-12 banner carousel slide">

and this works perfectly fine.When using Bootstrap Carousel try avoiding the container-fluid class

Upvotes: 0

AlexG
AlexG

Reputation: 5919

Seems to work just fine with:

.banner{
    padding: 0;
}

Is your CSS generating properly? Or do you have a screen with over 2700px width?

Upvotes: 2

plushyObject
plushyObject

Reputation: 1131

Bootstrap has default padding on the carousel.

#myCarousel{
  padding: 0px;
}

Please note that on mobile you may actually want this to prevent your captions from going to the edge of the screens on the device. You can do this by just removing the padding on larger screens:

@media(min-width: 996px){
  #myCarousel{
    padding: 0px;
  }
}

Upvotes: 3

Related Questions