Bootstrap Carousel Image Not Display in Full Width

Question

I'm creating a simple HTML template using Bootstrap 3. I check the template in medium size display, it looks ok. But when I check it in larger display (and higher resolution), I see some white space at 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 fix this problem?

I have try to insert container class before the Carousel class, but that not give me full width Carousel. I want the Carousel in full width, not wrapped in container class width.

Answer 1

I come over this post because I was facing the same issue, but I just get over it right now ! All I have done is just deleted the container-fluid div and I use some CSS like this :

.carousel-inner > .item > img, .carousel-inner > .item > a > img  {
    height: 65vh;
    min-height: 350px;
    width: 100%;
    margin: 0 auto;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active" data-bs-interval="10000">
                    <img src="/img/arabian1.jpg" class="d-block w-100 h-100" alt="board">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Some representative placeholder content for the first slide.</p>
                    </div>
                </div>
                <div class="carousel-item" data-bs-interval="2000">
                    <img src="/img/arabian2 (2).jpg" class="d-block w-100 h-100" alt="cable">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Second slide label</h5>
                        <p>Some representative placeholder content for the second slide.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="/img/service.jpg" class="d-block w-100 h-100" alt="Mother board picture">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Third slide label</h5>
                        <p>Some representative placeholder content for the third slide.</p>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    

Answer 2

This is because bootstrap doesn't align crousel content to center

you have 2 options

1. Make changes in CSS and align it center

.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 in div use background image like

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

Answer 3

I had this problem too. In my case it was because the size of the original image wasn't big enough. When I increased the size of the picture it fit the full screen. You might want to try this!

Answer 4

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
}