Bootstrap carousel width and height

Question

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    lt div id  myCarousel  class  carousel slide  gt   lt ol class  carousel-indicators  gt     lt li data-target   myCarousel  data-slide-to  0  class  active  gt  lt  li gt     lt li data-target   myCarousel  data-slide-to  1  gt  lt  li gt     lt li data-target   myCarousel  data-slide-to  2  gt  lt  li gt   lt  ol gt   lt  -- Carousel items -- gt   lt div class  carousel-inner  gt     lt div class  active item  gt       lt    image tag  slider slide-bg-1 jpg   class   tales    gt     lt  div gt     lt div class  item  gt       lt    image tag  slider slide-bg-2 jpg   class   tales    gt     lt  div gt     lt div class  item  gt        lt    image tag  slider slide-bg-3 jpg   class   tales    gt     lt  div gt   lt  div gt   lt  -- Carousel nav -- gt   lt a class  carousel-control left  href   myCarousel  data-slide  prev  gt  amp lsaquo  lt  a gt   lt a class  carousel-control right  href   myCarousel  data-slide  next  gt  amp rsaquo  lt  a gt      and my css file   tales     width  100     height  200px

User · Answer

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.

User · Answer

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

User · Answer

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      lt div id  carouselExampleSlidesOnly  class  carousel slide  data-ride  carousel  gt     lt div class  carousel-inner  role  listbox  gt       lt div class  carousel-item active  gt         lt img class  d-block img-fluid  src       alt  First slide  gt       lt  div gt       lt div class  carousel-item  gt         lt img class  d-block img-fluid  src       alt  Second slide  gt       lt  div gt       lt div class  carousel-item  gt         lt img class  d-block img-fluid  src       alt  Third slide  gt       lt  div gt     lt  div gt   lt  div gt    Solution   The solution is to put  div  around the image  with the class   container   like this    lt div class  carousel-item active  gt     lt div class  container  gt       lt img src  images proyecto 0 png  alt  First slide  class  d-block img-fluid  gt     lt  div gt   lt  div gt

User · Answer

I recommend the following for Bootstrap 3   carousel-inner  gt   item  gt  img   carousel-inner  gt   item  gt  a  gt  img     min-height  500px        Set slide height here

User · Answer

I found that if you just want to change the height of the element the image takes up  this will be the code that will help   carousel-item           height  600px  important         however  this won t make the size of the image dynamic  it will simply crop the image to its size

User · Answer

I have created a responsive sample that works well for me and I find it to be quite simple have a look at my carousel-fill    carousel-fill       height  -o-calc 100vh - 165px   important      height  -webkit-calc 100vh - 165px   important      height  -moz-calc 100vh - 165px   important      height  calc 100vh - 165px   important      width  auto  important      overflow  hidden      display  inline-block      text-align  center      carousel-item       text-align  center  important      my navigation height footer are a hair less then 165px so that value works for me  take off a value that fits for you  I overrdide the  carousel-item from bootstrap so make sure by videos are centered   my carousel looks like this  note the  carousel-fill  on the video tag    lt div gt           lt div id  myCarousel  class  carousel slide carousel-fade text-center  data-ride  carousel  gt               lt  -- Indicators -- gt               lt ol class  carousel-indicators  gt                   lt li data-target   myCarousel  data-slide-to  0  class  active  gt  lt  li gt                   lt li data-target   myCarousel  data-slide-to  1  gt  lt  li gt                   lt li data-target   myCarousel  data-slide-to  2  gt  lt  li gt                   lt li data-target   myCarousel  data-slide-to  3  gt  lt  li gt               lt  ol gt                lt  -- Wrapper for slides -- gt               lt div class  carousel-inner  gt                   lt div class  carousel-item active  gt                       lt video autoplay muted class  carousel-fill  gt                           lt source src    Video CATSTrade mp4  type  video mp4  gt                          Your browser does not support the video tag                       lt  video gt                       lt div class  carousel-caption  gt                           lt h2 gt CATS IV Trade engine lt  h2 gt                           lt p gt Automated trading for high ROI lt  p gt                       lt  div gt                   lt  div gt                   lt div class  carousel-item  gt                       lt video muted loop class  carousel-fill  gt                           lt source src    Video itrs mp4  type  video mp4  gt                       lt  video gt                       lt div class  carousel-caption  gt                           lt h2 gt Machine learning lt  h2 gt                           lt p gt Machine learning specialist lt  p gt                       lt  div gt                   lt  div gt                   lt div class  carousel-item  gt                       lt video muted loop class  carousel-fill  gt                           lt source src    Video frequency mp4  type  video mp4  gt                       lt  video gt                       lt div class  carousel-caption  gt                           lt h3 gt Low latency development lt  h3 gt                           lt p gt Create ultra fast systems with our consultants lt  p gt                       lt  div gt                   lt  div gt                   lt div class  carousel-item  gt                       lt img src    Images data pipeline faded png  class  carousel-fill    gt                        lt div class  carousel-caption  gt                           lt h3 gt Big Data lt  h3 gt                           lt p gt Maintain  generate  and host big data lt  p gt                       lt  div gt                   lt  div gt               lt  div gt                lt  -- Left and right controls -- gt               lt a class  carousel-control-prev  href   myCarousel  data-slide  prev  gt                   lt span class  carousel-control-prev-icon  aria-hidden  true  gt  lt  span gt                   lt span class  sr-only  gt Previous lt  span gt               lt  a gt               lt a class  carousel-control-next  href   myCarousel  data-slide  next  gt                   lt span class  carousel-control-next-icon  aria-hidden  true  gt  lt  span gt                   lt span class  sr-only  gt Next lt  span gt               lt  a gt           lt  div gt       lt  div gt    in case some one needs to control the videos like i do  I start and stop the videos like this    lt script language  JavaScript  type  text javascript  gt            document  ready function                      carousel   carousel   interval  8000                    myCarousel   on  slide bs carousel   function  args                    var videoList   document getElementsByTagName  video                    switch  args from                        case 0                          videoList 0  pause                            break                      case 1                          videoList 1  pause                            break                      case 2                          videoList 2  pause                            break                                    switch  args to                        case 0                          videoList 0  play                             break                      case 1                          videoList 1  play                            break                      case 2                          videoList 2  play                            break                                                 lt  script gt

User · Answer

just put height  400px  into image attribute like   lt img class  d-block w-100  src     assets img natural-backdrop jpg  height  400px  alt  First slide  gt

User · Answer

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

[javascript] Bootstrap carousel width and height

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap