Skip to content Skip to sidebar Skip to footer
Home / Bootstrap 4 / Css / Html

How To Center A Bootstrap 4 Row Vertically And Horizontally When There Are Some Rows Before

Post a Comment
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 horizontal

Solution 1:

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>

Solution 2:

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%;}

Post a Comment for "How To Center A Bootstrap 4 Row Vertically And Horizontally When There Are Some Rows Before"