Bootstrap 4 - Align horizontally and vertically

Question

I can't align the following content both horizontally and vertically.

Can someone tell me the best approach for this ?

    <div class="container">

  <div class="row">

    <div class="col-md-4">
      <img width="300" src="../assets/medlogo.png">

      <h1 class="text-center login-title">Acessar o programa</h1>
      <div class="account-wall">
        <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
          alt="">
        <form class="form-signin">
          <input type="text" class="form-control" placeholder="Email" required autofocus>
          <input type="password" class="form-control" placeholder="Password" required>
          <button class="btn btn-lg btn-primary btn-block" type="submit">
                  Sign in</button>
        </form>
      </div>

    </div>
  </div>
</div>

Thank you

score 2 · Accepted Answer · answered Oct 09 '17 at 00:09

Bootstrap4 is now using css Flexbox so you can use the same. Flexbox has vertical and horizontal alignment support out of the box.

Basically, a flexbox container can have flex-direction as row (the default value) or column. With the former, property align-items can be used to vertical align its children and justify-content for horizontal alignment. While with the latter, align-items is used for horizontal align and justify-content for vertical alignment.

You can read more about Flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thank you for your answer Thai Duong – GCoe Oct 09 '17 at 15:11 — GCoe, Oct 09 '17 at 15:11

score 0 · Answer 2 · answered Oct 09 '17 at 00:34

0

Try this

  <div class=" d-flex justify-content-center align-content-center">
      <img width="300" src="../assets/medlogo.png">

      <h1 class="text-center login-title">Acessar o programa</h1>
      <div class="account-wall">
        <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
          alt="">
        <form class="form-signin">
          <input type="text" class="form-control" placeholder="Email" required autofocus>
          <input type="password" class="form-control" placeholder="Password" required>
          <button class="btn btn-lg btn-primary btn-block" type="submit">
                  Sign in</button>
        </form>
      </div>

    </div>

I removed the col-md-4 and replaced it with d-flex justify-content-center align-content-center. This is bootstrap 4 beta utilities for flexbox. Though you can also do in-line style

More info http://getbootstrap.com/docs/4.0/utilities/flex/

answered Oct 09 '17 at 00:34

brijmcq

3,354
2
17
34

Hi, no results. All become unaligned. – GCoe Oct 09 '17 at 00:45
can you provide a plunkr or codepen? – brijmcq Oct 09 '17 at 00:48
Hi @brijmcq. I'm new on plunkr. The code is that but not running yet https://plnkr.co/edit/Sszrawikt6Z6xWUZH8JD – GCoe Oct 09 '17 at 15:02
i have a project with bootstrap included in stackblitz https://stackblitz.com/edit/ng-bri-bootstrap-login, fork it and edit it with your code and let's see what's the problem – brijmcq Oct 09 '17 at 15:06
Fixed it and now it's running -> https://plnkr.co/edit/Q77tXQ4rJ2Yt1n7u6zYq?p=preview . – GCoe Oct 09 '17 at 15:09

Bootstrap 4 - Align horizontally and vertically

2 Answers2