How to set min-height for bootstrap container
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:
<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.
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.