How to set min-height for bootstrap container

Question

I have some issues with the container in bootstrap  My goal is to have a container which is only as high as the content  For example    lt div class  container  gt     lt img src    jpg  height  200px  width  300px  gt   lt  div gt    In the example above  the container should be only as high as the image  However  even though I set min-height for the container via CSS to 0px  my browser automatically integrates a min-height of 594px in the element style  The source code in the browser looks like this    lt div class  container  style  min-height  594px   gt     lt img src    jpg  height  200px  width  300px  gt   lt  div gt    But in the HTML file the style element is not defined  This occurs with Chrome as well as IE  Hence  the CSS code  min-height  0px   is being ignored   CSS    container      padding-right  15px     padding-left  15px     margin-right  auto     margin-left  auto     max-width  900px     overflow hidden     min-height 0px      Has anyone an idea on how I can fix this issue

User · Answer

Usually  if you are using bootstrap you can do this to set a min-height of 100     lt div class  quot container-fluid min-vh-100 quot  gt  lt  div gt   this will also solve the footer not sticking at the bottom  you can also do this from CSS with the following class  stickDamnFooter min-height  100vh    if this class does not stick your footer just add position  fixed  to that same css class and you will not have this issue in a lifetime  Cheers

User · Answer

Two things are happening here   You are not using the container class properly  You are trying to override Bootstrap s CSS for the container class  Bootstrap uses a grid system and the  container class is defined in its own CSS   The grid has to exist within a container class DIV   The container DIV is just an indication to Bootstrap that the grid within has that parent   Therefore  you cannot set the height of a container  What you want to do is the following   lt div class  quot container-fluid quot  gt   lt  -- this is to make it responsive to your screen width -- gt       lt div class  quot row quot  gt           lt div class  quot col-md-4 myClassName quot  gt    lt  -- myClassName is defined in my CSS as you defined your container -- gt               lt img src  quot   jpg quot  height  quot 200px quot  width  quot 300px quot  gt           lt  div gt       lt  div gt   lt  div gt   Here you can find more info on the Bootstrap grid system  That being said  if you absolutely MUST override the Bootstrap CSS then I would try using the  quot  important quot  clause to my CSS definition as such     container      padding-right  15px     padding-left  15px     margin-right  auto     margin-left  auto     max-width  900px     overflow hidden     min-height 0px  important     But I have always found that the  quot  important quot  clause just makes for messy CSS

User · Answer

Have you tried height  auto   on your  container div    Here is a fiddle  if you change img height  container height will adjust to it   EDIT  So if you  can t  change the inline min-height  you can overwrite the inline style with an  important parameter  It s not the cleanest way  but it solves your problem   add to your  containerclass this line  min-height 0px  important   I ve updated my fiddle to give you an example

[html] How to set min-height for bootstrap container

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to containers