How to align div vertically in bootstrap

Question

I want to align the card into center vertically

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container" style="width: 100%;height: 100vh">
  <div class="row ">
    <div class="col-md-6 offset-md-3">
      <div class="card">
        <h1>hello</h1>
      </div>
    </div>
  </div>
</div>

The container has height: 100vh; and width:100%;

Kirubel · Answer 1 · 2020-08-13T08:14:26.463

1

Try using bootstrap class names: d-flex align-items-center justify-content-center inside your container div class

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container d-flex align-items-center justify-content-center" style="width: 100%; height: 100vh;">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <div class="card">
                    <h1>hello</h1>
                </div>
            </div>
        </div>
    </div>

edited Aug 13 '20 at 08:14

answered Aug 13 '20 at 08:07

Kirubel

1,461
1
14
33

already tried this and doesn't work. It works horizontally but vertically no – Bogdan Paul Aug 13 '20 at 08:10
I've updated my answer check it now. – Kirubel Aug 13 '20 at 08:14

score 1 · Answer 2 · answered Aug 13 '20 at 08:16

Use d-flex align-items-center class in Bootstrap

Your h1 have a margin-bottom so it can show not align vertically it remove by add mb-0 to h1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container d-flex align-items-center" style="width: 100%;height: 100vh">
  <div class="row w-100">
    <div class="col-md-6 offset-md-3">
      <div class="card">
        <h1 class="mb-0">hello</h1>
      </div>
    </div>
  </div>
</div>

@Bogdan Paul please check this – Rayees AC Aug 13 '20 at 08:19 — Rayees AC, Aug 13 '20 at 08:19

score 0 · Answer 3 · answered Aug 13 '20 at 08:11

0

you want to vertically align a element in the center or middle, you can simply apply the class align-items-center on the containing element.

answered Aug 13 '20 at 08:11

Huzee

114
7

It doesn't work I don't know why, you mean to add align-items-center to that div that has col-md-6? – Bogdan Paul Aug 13 '20 at 08:13
no add this to row – Huzee Aug 13 '20 at 08:23

score 0 · Accepted Answer · answered Aug 13 '20 at 08:13

make container as flex and add align-items-center to center items vertically

to make sure that the row will remains full width add: w-100 class to the row

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container d-flex align-items-center justify-content-center" style="width: 100%;height: 100vh">
  <div class="row w-100">
    <div class="col-md-6 offset-md-3">
      <div class="card">
        <h1>hello</h1>
      </div>
    </div>
  </div>
</div>

it means it's apply to all tags that container contain this is wrong can you justify — Huzee, Aug 13 '20 at 08:24

How to align div vertically in bootstrap

4 Answers4