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?

score 23 · Accepted Answer · edited Oct 03 '20 at 23:11

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.

jerryurenaa · Answer 2 · 2020-09-09T02:16:05.093

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.

Ramiz Wachtler · Answer 3 · 2014-09-15T18:53:56.043

1

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.

edited Sep 15 '14 at 18:53

answered Sep 15 '14 at 18:33

Ramiz Wachtler

5,623
2
28
33

the problem is: I can write what ever I want to in the CSS. But it does not matter since somehow this style="min-height: 594px;" occurs. It must be inserted by the browser because it is not in the HTML file. – Clems Sep 15 '14 at 18:47
Do you have a link to your site? – Ramiz Wachtler Sep 15 '14 at 18:48
I've edited my answer, I think you could fix it by adding missing line. – Ramiz Wachtler Sep 15 '14 at 18:57

How to set min-height for bootstrap container

3 Answers3