Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap carousel width and height

Im trying to do a bootstrap carousel with full width for the images (width: 100%) and a fixed height but if I set the width to 100% the height automacally is taking the 100% too

I don't sure if the problem is in my files

 <div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
  <div class="active item">
    <%= image_tag "slider/slide-bg-1.jpg", class: "tales" %>
  </div>
  <div class="item">
    <%= image_tag "slider/slide-bg-2.jpg", class: "tales" %>
  </div>
  <div class="item"> 
    <%= image_tag "slider/slide-bg-3.jpg", class: "tales" %>
  </div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

and my css file

.tales {
  width: 100%;
  height: 200px;
}
like image 449
Jorman Bustos Avatar asked Oct 20 '13 18:10

Jorman Bustos


People also ask

What size should Bootstrap carousel images be?

If you want to have a carousel image that spans the full width of the screen its probably a good idea to use an image that is at least 1024 px wide (possibly wider), though you don't want it to be too high resolution, since that would take a long time to load.

What size should carousel images be?

Carousels come in a variety of sizes, which are determined by the theme. In general, themes use dimensions of at least 1200 x 600 pixels. Carousel images must be in JPEG/JPG, PNG, or GIF format.


5 Answers

Are you trying to make it responsive? If you are then I would just recommend the following:

.tales {
  width: 100%;
}
.carousel-inner{
  width:100%;
  max-height: 200px !important;
}

However, the best way to handle this responsively would be thru the use of media queries like such:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
like image 173
Eduardo La Hoz Miranda Avatar answered Oct 19 '22 23:10

Eduardo La Hoz Miranda


If you use bootstrap 4 Alpha and you have an error with the height of the images in chrome, I have a solution: The documentation of bootstrap 4 says this:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Third slide">
    </div>
  </div>
</div>

Solution:

The solution is to put "div" around the image, with the class ".container", like this:

<div class="carousel-item active">
  <div class="container">
    <img src="images/proyecto_0.png" alt="First slide" class="d-block img-fluid">
  </div>
</div>
like image 23
hugotom Avatar answered Oct 19 '22 23:10

hugotom


I recommend the following for Bootstrap 3

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  min-height: 500px;    /* Set slide height here */

}
like image 29
Chuck Avatar answered Oct 20 '22 00:10

Chuck


I know this is an older post but Bootstrap is still alive and kicking!

Slightly different to @Eduardo's post, I had to modify:

#myCarousel.carousel.slide {
    width: 100%; 
    max-width: 400px; !important
}

When I only modified .carousel-inner {}, the actual image was fixed size but the left/right controls were displaying incorrectly off to the side of the div.

like image 40
rws Avatar answered Oct 19 '22 23:10

rws


I had the same problem.

My height changed to its original height while my slide was animating to the left, ( in a responsive website )

so I fixed it with CSS only :

.carousel .item.left img{
    width: 100% !important;
}
like image 41
David Chacon Avatar answered Oct 20 '22 00:10

David Chacon