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:

<div class="container">   <img src="#.jpg" height="200px" width="300px"> </div> 

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:

<div class="container" style="min-height: 594px;">   <img src="#.jpg" height="200px" width="300px"> </div> 

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?

Answer 1

Two things are happening here.

1. You are not using the container class properly.
2. 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:

<div class="container-fluid"> <!-- this is to make it responsive to your screen width -->     <div class="row">         <div class="col-md-4 myClassName">  <!-- myClassName is defined in my CSS as you defined your container -->             <img src="#.jpg" height="200px" width="300px">         </div>     </div> </div> 

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 "!important" 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 "!important" clause just makes for messy CSS.

Answer 2

Usually, if you are using bootstrap you can do this to set a min-height of 100%.

 <div class="container-fluid min-vh-100"></div> 

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.