How to vertically center content in body using bootstrap 4

Question

I am trying to align the container fluid container class in the middle of the screen both horizontally and vertically. I did try many classes which were supposed to work with bootstrap but they didn't. I would appreciate your help!

<body>
<div class="container align-items-center justify-content-center">
    <div class="row justify-content-center">
        <div class="col-10 text-center" >
            <h1 style="font-size:40pt;">Site in constructie</h1>
            <p>Ceva fain este in constructie!<br>
                Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>
        </div>
        <div class="col-10 col-md-6 py-5">
            <form id="subscribeForLaunch" class="input-group">
                <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
                <button class="btn btn-info" onclick="subscribeRelease(); return false;">Submit!</button>
            </form>
        </div>  
    </div>
</div>

Possible duplicate of [How to center align vertically the container in bootstrap](https://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap) — Maxpm, Oct 20 '18 at 22:24

Ravina Parab · Answer 1 · 2018-10-22T06:51:25.207

To make the container vertically and horizontally center, you need to make its's parent a flexbox container with align-items and justify-content properties as center. In your code, you can give the container an immediate parent div with it's height 100% so that it takes the height of the body.

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
</head>

<body>
<div class="h-100 d-flex  align-items-center justify-content-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-10 text-center" >
                    <h1 style="font-size:40pt;">Site in constructie</h1>
                    <p>Ceva fain este in constructie!<br>
                        Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>
                </div>
                <div class="col-10 col-md-6 py-5">
                    <form id="subscribeForLaunch" class="input-group">
                        <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
                        <button class="btn btn-info" onclick="subscribeRelease(); return false;">Submit!</button>
                    </form>
                </div>  
            </div>
        </div>
  </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

You can refer: https://dev.to/c0depanda/flexing-with-css-flexbox-1a2l https://getbootstrap.com/docs/4.0/utilities/flex/

I have just did what you suggested and it still doesn't work. :( — user3637052, Oct 20 '18 at 22:19
please have a look at the modified code. If its still not working, please ensure that you have linked bootstrap css/js and jquery files in the proper order. If still not working, please post the entire code (head, script etc) — Ravina Parab, Oct 22 '18 at 06:53

score 0 · Answer 2 · answered Oct 20 '18 at 22:28

0

First make sure that the body/html/ container is taking the full height (you can use h-100 class) and then add align-self-center to the content you want centered:

body,html {
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid h-100 justify-content-center">
    <div class="row justify-content-center align-middle h-100">
        <div class="col-10 text-center align-self-center">
            <h1 style="font-size:40pt;">Site in constructie</h1>
            <p>Ceva fain este in constructie!<br>
                Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>
        
          <form id="subscribeForLaunch" class="form-inline justify-content-center">
              <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
              <button class="btn btn-info" onclick="subscribeRelease(); return false;">Submit!</button>
          </form>
       </div>
    </div>
</div>

answered Oct 20 '18 at 22:28

Iulius

668
4
14

Also tried this one. Now I did try it jsfiddle and it seemed to work there but not on my website. What could be the issue? – user3637052 Oct 21 '18 at 10:41
have you copy pasted the html? it has some other modifications to your original one, like for example I took your form and placed it under the first column (col-10) as I saw no point in having two col-10 columns – Iulius Oct 21 '18 at 10:46
Yes, I did copy and paste – user3637052 Oct 21 '18 at 10:49
go to dev tools and make sure .row takes up the full height of the page – Iulius Oct 21 '18 at 10:51
.row, .conainer-fluid,body{ height:100% !important; } That's what I have added to my style sheet and still the same – user3637052 Oct 21 '18 at 10:56
So is it 100%? 100% height means it will take 100% of the parents height and if that parent is not 100% it will not work. add html {height: 100%} – Iulius Oct 21 '18 at 10:59

score 0 · Answer 3 · answered Oct 20 '18 at 23:03

Try this

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
 
<div class="container align-items-center justify-content-center">
    <div class="row justify-content-center">
        <div class="col-10 text-center" >
            <h1 style="font-size:40pt;">Site in constructie</h1>
            <p>Ceva fain este in constructie!<br>
                Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>

            <form id="subscribeForLaunch" class="input-group container pr-5">
                <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
                <button class="btn btn-info pl-1" onclick="subscribeRelease(); return false;"> Submit! </button>
            </form>
        </div> 
    </div>
</div>

Or This

       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
       
<div class="d-flex justify-content-center">
    <div class="row justify-content-center">
        <div class="col-10 text-center" >
            <h1 style="font-size:40pt;">Site in constructie</h1>
            <p>Ceva fain este in constructie!<br>
                Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>

            <form id="subscribeForLaunch" class="input-group container pr-5">
                <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
                <button class="btn btn-info pl-1" onclick="subscribeRelease(); return false;">Submit!</button>
            </form>
        </div> 
    </div>
</div>

Copied both of the and they still don't work. :( it becomes centered horizontally, because of the justify content center, but that's it. it stays at the top of the page. — user3637052, Oct 21 '18 at 10:29

How to vertically center content in body using bootstrap 4

3 Answers3