Bootstrap change carousel height

Question

I have a jsfiddle here - http   jsfiddle net gh4Lur4b 8   It s a full width bootstrap carousel   I d like to change the height and still keep it full width   Is the height determined by the image height   How can I chanhe the height of the carousel and keep it 100  width        carousel-inner            height  300px              item  img          height  100   important          width   100   important          border  1px solid red

User · Answer

You can use this  Tt is simplest way   carousel-item      height  200px      carousel-item img      height  200px

User · Answer

The following should work   carousel  item     height  300px      item img       position  absolute      top  0      left  0      min-height  300px      JSFille for reference

User · Answer

like Answers above  if you do bootstrap 4 just add few line of css to  carousel   carousel-inner  carousel-item and img as follows   carousel  carousel-inner  height 500px    carousel-inner  carousel-item img  min-height 200px    prevent it from stretch in screen size  lt  than 768px object-fit cover     media max-width 768px    carousel  carousel-inner    prevent it from adding a white space between carousel and container elements height auto

User · Answer

For Bootstrap 4 In the same line as image add height  300px   lt img src  quot     quot  style  quot height  300px  quot  class  quot d-block w-100 quot  alt  quot image quot  gt

User · Answer

This worked for me   carousel-item     height  500px      item  img      position  absolute      object-fit cover      height  100   important      width   100   important        min-height  500px

User · Answer

From Bootstrap 4   carousel-item      height  200px      carousel-item img      height  200px

User · Answer

Thank you  This post is Very Helpful   You may also want to add object-fit cover  To preserve the aspect ration for different window sizes  carousel  item     height  500px      item img       position  absolute      object-fit cover      top  0      left  0      min-height  500px     For bootstrap 4 and above replace  item with  carousel-item  carousel  carousel-item     height  500px      carousel-item img       position  absolute      object-fit cover      top  0      left  0      min-height  500px

[css] Bootstrap change carousel height

Examples related to css

Examples related to twitter-bootstrap

Examples related to carousel