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><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>JS Bin</title><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"crossorigin="anonymous"></head><body><divid="nav"><divclass="container-fluid navbar-main"><navclass="navbar navbar-expand-md no-padding navbar-main"><divclass="container"><aclass="navbar-brand"href="#">Main menu</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent"aria-expanded="false"aria-label="Menü aufklappen"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarSupportedContent"><ulclass="navbar-nav mr-auto"><liclass="nav-item"><aclass="nav-link"href="/"role="button">Start</a></li></ul></div></div></nav></div></div><divclass="container"><divclass="row"><divclass="col header"><spanid="score">first row </span></div></div><divclass="row justify-content-center vertical-center"><!-- div to center --><divclass="col-auto"><spanid="operand1">text</span></div><divclass="col-auto"><spanid="operator">text</span></div><divclass="col-auto"><spanid="operand2">text</span></div><divclass="col-auto"><spanid="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"