How to center a bootstrap 4 row vertically and horizontally when there are some rows before

Question

Let's assume we have a main menu and three rows afterwards. The first row should be at the top, the third at the bottom. The second row has to be centered vertically and horizontally.
When you scroll down you should be able to hide the main menu but everything else should fit in the page.

I know this, I know about justify-content-center and I played a bit around with this. But I can't put it together.
The second row is centered vertically but it stretches the height and it's not correctly centered horizontally anymore.
Here is what I tried:

.vertical-center {
  min-height: 100%; 
  min-height: 100vh; 
  display: flex;
  align-items: center;
}

html, body, {
  height: 100%;
}

.header {
  float: left;
  width: 100%;
}

.full {
  height: 100%;
}

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   </head>
   <body>
      <div id="nav">
         <div class="container-fluid navbar-main">
            <nav class="navbar navbar-expand-md no-padding navbar-main">
               <div class="container">
                  <a class="navbar-brand" href="#">Main menu</a>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                     aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Menü aufklappen">
                  <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse"
                     id="navbarSupportedContent">
                     <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                           <a class="nav-link" href="/" role="button">Start</a>
                        </li>
                     </ul>
                  </div>
               </div>
            </nav>
         </div>
      </div>
      <div class="container">
         <div class="row">
            <div class="col header">
               <span id="score">first row </span>
            </div>
         </div>
         <div class="row justify-content-center vertical-center" style="height:100%">
            <!-- div to center -->
            <div class="col-auto">
               <span id="operand1">text</span>
            </div>
            <div class="col-auto">
               <span id="operator">text</span>
            </div>
            <div class="col-auto">
               <span id="operand2">text</span>
            </div>
            <div class="col-4">
               <span id="operand2">text</span>
            </div>
         </div>
      </div>
   </body>
</html>

Shery · Accepted Answer · 2018-10-07T14:41:55.840

You should be using the "col-auto" for all the the divs in the 2nd row. Have a look at this

.vertical-center {
  min-height: 100%; 
  min-height: 100vh; 
  display: flex;
  align-items: center;
}

html, body, {
  height: 100%;
}

.header {
  float: left;
  width: 100%;
}

.full {
  height: 100%;
}

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   </head>
   <body>
      <div id="nav">
         <div class="container-fluid navbar-main">
            <nav class="navbar navbar-expand-md no-padding navbar-main">
               <div class="container">
                  <a class="navbar-brand" href="#">Main menu</a>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                     aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Menü aufklappen">
                  <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse"
                     id="navbarSupportedContent">
                     <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                           <a class="nav-link" href="/" role="button">Start</a>
                        </li>
                     </ul>
                  </div>
               </div>
            </nav>
         </div>
      </div>
      <div class="container">
         <div class="row">
            <div class="col header">
               <span id="score">first row </span>
            </div>
         </div>
         <div class="row justify-content-center vertical-center">
            <!-- div to center -->
            <div class="col-auto">
               <span id="operand1">text</span>
            </div>
            <div class="col-auto">
               <span id="operator">text</span>
            </div>
            <div class="col-auto">
               <span id="operand2">text</span>
            </div>
            <div class="col-auto">
               <span id="operand2">text</span>
            </div>
         </div>
      </div>
   </body>
</html>

go to the "row justified-content-center" in your code,, then check the 4th div, you used "col-4" but I used "col-auto" for 4th div... — Shery, Oct 07 '18 at 14:37

score 0 · Answer 2 · edited Oct 07 '18 at 16:06

0

Wrap everything inside that row with a div that has a class called centered. For example, add position relative to the parent row and add css class:

.centered{position:absolute; top:50%; left:50%;}

edited Oct 07 '18 at 16:06

nijm

2,158
12
28

answered Oct 07 '18 at 14:07

Samer Istambouli

1
1
2

How to center a bootstrap 4 row vertically and horizontally when there are some rows before

2 Answers2

Linked