Bootstrap 4 center align full height no scrolling

Question

I would like to clarify that this is a basic page and there will be no scrolling whatsoever and minimal text.

I have been trying to use Bootstrap 4 to align text to the direct middle of the page, then also having a footer at the bottom of the page, also centered.

I currently have the following

<div class="cover-container text-center">
    <div class="row justify-content-center flex-column h-100">
        Test
    </div>
    Anything here adds a scrollbar
</div>

I have tried to change the h-100 and split the classes up into different divs to see if that would make a difference, but it does not.

I have also tried things like (with this, it works, besides a scrollbar being added to the page and to see the footer I need to scroll down):

<div class="cover-container text-center">
    <div class="row h-100 align-items-center">
        <div class="align-items-center">
            <main>
               <h1>Hi!</h1>
            </main>
        </div>
    </div>
    <footer>
        Footer
    </footer>
</div>

Do you have other css to make the body overflow:hidden? That's usually how to prevent scrolling. There's also CSS needed to full height. — Carol Skelly, Mar 21 '18 at 11:51
making it `overflow:hidden` would make it so I am not able to see the footer as I need to scroll to see it. Also I thought `h-100` class makes the height 1005 in BS4. — Nathan, Mar 21 '18 at 13:53
It does make it `height:100%`, but that's relative to the height of the parent ([see this](https://stackoverflow.com/questions/7049875/height-100-not-working)). That means html,body,container-fluid,etc.. all need to be `height:100%` I don't understand you do want scrolling to see the footer, or you don't? — Carol Skelly, Mar 21 '18 at 14:08

score 3 · Accepted Answer · answered Mar 21 '18 at 15:43

The vertical center aspect of this question is duplicate: Vertical Align Center in Bootstrap 4

The page height and no scrolling aspect of the question, "no scrolling whatsoever... direct middle of the page, then also having a footer at the bottom of the page" requires flexbox to fill the height. h-100 won't work since it pushes the footer over height:100% and thus requires scrolling to see the footer (or hides the footer).

.cover-container {
    height: 100vh;
}

.flex-fill {
    flex: 1 1 auto;
}

HTML

<div class="container-fluid cover-container text-center d-flex flex-column">
    <div class="row bg-light align-items-center justify-content-center flex-fill">
        <div class="col-12">
            <main>
               <h1>Hi!</h1>
            </main>
        </div>
    </div>
    <footer>
        Footer
    </footer>
</div>

https://www.codeply.com/go/CIMvZxkT4O

Note: The flex-fill class will be included in Bootstrap 4.1 so the extra flex-fill CSS will no longer be needed when 4.1 is released.

Related question:
Bootstrap 4 expanded navbar and content fill height flexbox

score 0 · Answer 2 · answered Mar 21 '18 at 05:31

Try this: Change<div class="cover-container text-center" to <div class="container-fluid text-center"> and add justify-content-center class to <div class="row h-100 align-items-center">

<div class="container-fluid text-center">
<div class="row h-100 justify-content-center align-items-center">
    <div class="align-items-center">
        <main>
           <h1 >Hi!</h1>
        </main>
    </div>
</div>
<footer>
    Footer
</footer>

I still have to scroll to see the footer. – Nathan Mar 21 '18 at 13:53 — Nathan, Mar 21 '18 at 13:53

Bootstrap 4 center align full height no scrolling

2 Answers2