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?
This question is related to
html
css
twitter-bootstrap
containers
Two things are happening here.
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.
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 .container
class this line
min-height:0px !important;
I've updated my fiddle to give you an example.
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.
Source: Stackoverflow.com