[Solved] Bootstrap 4 cannot center row div vertically

by


Try this approach.

Main points of design are:

  1. keep height 100% only on html & body tags
  2. most elements use bootstrap’s .flex-fill to fit in content fully within viewport and .flex-column to span across the page vertically. this helps control vertical alignment
  3. blue background (.bg-info) is left so that you can see how content expands starting from center spanning accross the page vertically as much as it needs
body, html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<html>
  <body>
    <div class="container-fluid d-flex flex-column flex-fill">
      <div class="row flex-fill">
        <div class="col-4 d-flex bg-success">
          <div class="d-flex flex-column flex-fill my-auto bg-info">
            <div class="form-group">
              <input class="form-control">
            </div>
            <div class="form-group">
              <input class="form-control">
            </div>
          </div>
        </div>
        <div class="col-8 d-flex flex-column bg-warning">
          <div class="d-flex flex-fill my-auto bg-info">
            <img class="img-fluid w-100" src="data:image/svg+xml, %3Csvg viewBox='0 0 612 612' xmlns="http://www.w3.org/2000/svg" focusable="false"%3E%3Ctitle%3EBootstrap%3C/title%3E%3Cpath d='M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z'%3E%3C/path%3E%3Cpath fill="currentColor" d='M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z'%3E%3C/path%3E%3C/svg%3E">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

2

solved Bootstrap 4 cannot center row div vertically