Make Bootstrap s Carousel both center AND responsive

Question

I want my carousel images to be at the center  horizontally   which is not by default  I follow the solution at this topic   However  using this solution  when the carousel is resized and smaller than the image  the image is cropped instead of scaling as default   How can I both center my image  but keep it to stretch to the carousel item

User · Answer

On Boostrap 4 simply add mx-auto to your carousel image class     lt div class  carousel-item  gt     lt img class  d-block mx-auto  src  http   placehold it 600x400    gt   lt  div gt     Combine with the samples from the bootstrap carousel documentation as desired

User · Answer

in bootstrap v4  i center and fill the carousel img to the screen using   lt img class  d-block mx-auto  max-width  100   max-height  100   gt    pretty sure this requires parent elements  height or width to be set  html body height 100     carousel  carousel-item  active height 100     carousel-inner height 100

User · Answer

None of the above solutions worked for me  It s possible that there were some other styles conflicting   For myself  the following worked  hopefully it may help someone else  I m using bootstrap 4    carousel-inner img             display block     height  auto      max-width  100

User · Answer

By using this on bootstrap 3    carousel-example-generic      margin auto

User · Answer

Add a class to each image in the carousel html code  then with css apply margin  0 auto

User · Answer

Now  on Boostrap 3 and 4  its simply      carousel-inner img     margin  auto

User · Answer

carousel-inner  gt   item  gt  img       margin  0 auto      This simple solution worked for me

User · Answer

I assume you have different sized images  I tested this myself  and it works as you describe  always centered  images widths appropriately     CSS   div c-wrapper      width  80      for example        margin  auto      carousel-inner  gt   item  gt  img    carousel-inner  gt   item  gt  a  gt  img  width  100      use this  or not    margin  auto      lt  --html-- gt   lt div class  c-wrapper  gt   lt div id  carousel-example-generic  class  carousel slide  gt     lt  -- Indicators -- gt     lt ol class  carousel-indicators  gt       lt li data-target   carousel-example-generic  data-slide-to  0  class  active  gt  lt  li gt       lt li data-target   carousel-example-generic  data-slide-to  1  gt  lt  li gt       lt li data-target   carousel-example-generic  data-slide-to  2  gt  lt  li gt     lt  ol gt      lt  -- Wrapper for slides -- gt     lt div class  carousel-inner  gt       lt div class  item active  gt         lt img src  http   placehold it 600x400  gt         lt div class  carousel-caption  gt          hello        lt  div gt       lt  div gt           lt div class  item  gt         lt img src  http   placehold it 500x400  gt         lt div class  carousel-caption  gt          hello        lt  div gt       lt  div gt       lt div class  item  gt         lt img src  http   placehold it 700x400  gt         lt div class  carousel-caption  gt          hello        lt  div gt       lt  div gt     lt  div gt      lt  -- Controls -- gt     lt a class  left carousel-control  href   carousel-example-generic  data-slide  prev  gt       lt span class  icon-prev  gt  lt  span gt     lt  a gt     lt a class  right carousel-control  href   carousel-example-generic  data-slide  next  gt       lt span class  icon-next  gt  lt  span gt     lt  a gt   lt  div gt   lt  div gt    This creates a  jump  due to variable heights    to solve that  try something like this  Select the tallest image of a list  Or use media-query to set your own fixed height

User · Answer

Try giving a Width in   to the image in  the carousel    item img       width 100

User · Answer

add this   carousel  item img      left  -9999px     important       right  -9999px     important       margin  0 auto     important       max-width  none     important       min-width  100      position  absolute      And of course one of the parent divs needs to have a position relative  but I believe it does by default   See it here  http   paginacrestinului ro

User · Answer

This work for me very simple just add attribute align  center   Tested on Bootstrap 4    lt  -- The slideshow -- gt               lt div class  carousel-inner  align  center  gt                                lt div class  carousel-item active  gt                       lt img src  image1 jpg  alt  no image  height  550  gt                   lt  div gt                   lt div class  carousel-item  gt                       lt img src  image2 jpg  alt  no image  height  550  gt                   lt  div gt                                   lt div class  carousel-item  gt                       lt img src  image3 png  alt  no image  height  550  gt                   lt  div gt                lt  div gt

User · Answer

Was having a very similar issue to this while using a CMS but it was not resolving with the above solution  What I did to solve it is put the following in the applicable css   background-size  cover   and for placement purposes in case you are using bootstrap  I used   background-position  center center    or whatever position you wanted

User · Answer

I ve placed the  lt div class  carousel  id    gt  inside another div with the class container   lt div class  container  gt  lt div class  carousel  id  my-carousel  gt     lt  div gt  lt  div gt    That solved it too

[html] Make Bootstrap's Carousel both center AND responsive?

Examples related to html

Examples related to css

Examples related to image

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3