Bootstrap carousel image not showing full width

Question

I am creating a simple HTML template using Bootstrap 3. I am checking the template on a medium sized display, it looks fine. But when I check it on a large display (and higher resolution), I see some free space on the right side of the images inside the carousel.

Screenshot:

My code for the carousel:

<!-- Carousel ================================================== --> <div class="clearfix"></div> <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> </ol> <div class="carousel-inner"> <div class="item active"> <img src="img/4.jpg"> <div class="container"> <div class="carousel-caption"> <h1> Example headline. </h1> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <p> <a class="btn btn-lg btn-primary" href="#" role="button"> Call to Action </a> </p> </div> </div> </div> <div class="item"> <img src="img/5.jpg"> <div class="container"> <div class="carousel-caption"> <h1> Another example headline. </h1> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <p> <a class="btn btn-lg btn-primary" href="#" role="button"> Register Now </a> </p> </div> </div> </div> <div class="item"> <img src="img/6.jpg"> <div class="container"> <div class="carousel-caption"> <h1> One more for good measure. </h1> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <p> <a class="btn btn-lg btn-primary" href="#" role="button"> Read Blog </a> </p> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"> </span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"> </span> </a> </div> <!-- end #mycarousel --> 

How to solve this problem?

I am trying to insert a container class in front of the Carousel class, but this does not give me a full carousel. I want the carousel to be full width, not the width of the container.

Answer 1

In your css

 .carousel-inner>.item>img, .carousel-inner>.item>a>img { display: block; height: auto; max-width: 100%; line-height: 1; width: 100%; // Add this } 

Answer 2

This is because bootstrap does not align the crousel contents to the center

you have 2 options

1. Make changes to the CSS and center it

 .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; height: auto; line-height: 1; margin: 0 auto; max-width: 100%; } 

2. instead of using a background image in a div, for example

<div class = "item"> <div style = "background-image: url (img / 4.jpg); height: 400 pixels; background-size: contain; margin: 0px auto; width: 95%;> </ div> </DIV>

Answer 3

I also had this problem. In my case, this was because the size of the original image was not large enough. When I increase the size of the image, it will fit the full screen. You can try it!