CODEWITHSUNDEEP
csstwitter-bootstrap
user348173
user348173

Reputation: 9288

Bootstrap: Centering Elements Vertically and Horizontally

I have a page where only a form exists and I want the form to be placed in the center of the screen.

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

The justify-content-center aligns the form horizontally, but I can't figure out how to align it vertically. I have tried using both align-items-center and align-self-center, but neither seems to work.

A minimal reproducible example can be found here.

Upvotes: 285

Views: 773071

Answers (19)

Paulo Pedroso
Paulo Pedroso

Reputation: 3705

None has worked for me, but this one did.

Since the Bootstrap 4 .row class is now display: flex, you can simply use the new align-self-center flexbox utility on any column to vertically center it.

<div class="row">
   <div class="col-6 align-self-center">
      <div class="card card-block">
      Center
      </div>
   </div>
   <div class="col-6">
      <div class="card card-inverse card-danger">
      Taller
      </div>
   </div>
</div>

I learned about it from this Medium article.

Upvotes: 12

Andreas Violaris
Andreas Violaris

Reputation: 4198

Bootstrap 5 (Updated 2024)

There are several suggestions involving bad practices, such as using pure CSS, a combination of Bootstrap classes with custom CSS, or even unnecessary Bootstrap classes.

Below, you can find the minimum required code to achieve the desired result natively, with an in-depth analysis for those seeking a better understanding.

TL;DR:

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"/>
</head>
<body>
  <div class="vh-100 d-flex justify-content-center align-items-center">
    <p>This content is centered vertically and horizontally.</p>
  </div>
</body>
</html>

In-depth explanation:

  1. vh-100:

    • Purpose: This class sets the height of the element to 100% of the viewport height.
    • Behind the scenes: Bootstrap applies the height: 100vh; CSS property, making the container take up the entire height of the viewport.
    • <!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
        .outer-container {
            border: 2px solid red; 
        }
        .inner-content {
            border: 2px solid blue; 
        }
    </style>
</head>
<body>
    <div class="vh-100 outer-container">
        <p class="inner-content">vh-100 applied.</p>
    </div>
</body>
</html>

  2. d-flex:

    • Purpose: This class is used to enable the Flexbox layout for the container. Flexbox is a one-dimensional layout method for laying out items in rows or columns.
    • Behind the scenes: Bootstrap applies the display: flex; CSS property to the element, making it a flex container. This allows you to use properties like justify-content and align-items to control the alignment of its children.
    • More information about display property can be found here.
    • <!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
        .outer-container {
            border: 2px solid red; 
        }
        .inner-content {
            border: 2px solid blue; 
        }
    </style>
</head>
<body>
    <div class="vh-100 d-flex outer-container">
        <p class="inner-content">vh-100 and d-flex applied.</p>
    </div>
</body>
</html>

  3. justify-content-center:

    • Purpose: This class is used to horizontally align the child elements (content) of the flex container to the center.
    • Behind the scenes: Bootstrap applies the justify-content: center; CSS property to the flex container, ensuring its children are horizontally centered.
    • <!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
        .outer-container {
            border: 2px solid red; 
        }
        .inner-content {
            border: 2px solid blue; 
        }
    </style>
</head>
<body>
    <div class="vh-100 d-flex justify-content-center outer-container">
        <p class="inner-content">vh-100 and d-flex and justify-content-center applied.</p>
    </div>
</body>
</html>

  4. align-items-center:

    • Purpose: This class is used to vertically align the child elements (content) of the flex container to the center.
    • Behind the scenes: Bootstrap applies the align-items: center; CSS property to the flex container, ensuring its children are vertically centered.
    • <!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
        .outer-container {
            border: 2px solid red; 
        }
        .inner-content {
            border: 2px solid blue; 
        }
    </style>
</head>
<body>
    <div class="vh-100 d-flex justify-content-center align-items-center outer-container">
        <p class="inner-content">vh-100 and d-flex and justify-content-center and align-items-center applied.</p>
    </div>
</body>
</html>

Upvotes: 13

comrade
comrade

Reputation: 19

been going thru a lot of posts on getting a form centered in the page and none of them worked. code below is from a react component using bootstrap 4.1. height should be 100vh and not 100%

<div className="container">
      <div className="d-flex justify-content-center align-items-center" style={height}>
        <form>
          <div className="form-group">
            <input className="form-control form-control-lg" placeholder="Email" type="email"/>
          </div>
          <div className="form-group">
            <input className="form-control form-control-lg" placeholder="Password" type="password"/>
          </div>
          <div className="form-group">
            <button className="btn btn-info btn-lg btn-block">Sign In</button>
          </div>
        </form>
      </div>
    </div>

where height in style is:

const height = {
    height: '100vh'
}

Upvotes: 1

Saad Abbasi
Saad Abbasi

Reputation: 853

Bootstrap way

HTML

 <div class="row top-row">
        <div class="col center-text">
            <H1>Center Text Horizantally and vertically</H1>
        </div>
</div>

Custom CSS

  .top-row{
        height: 300px; //It's important to set height 
    }
  .center-text{
       display: flex;
       align-items: center;
       justify-content: center;
    }

Upvotes: 2

zcoop98
zcoop98

Reputation: 3087

Bootstrap's m-auto is your friend!

If you have some parent container you want to suspend your content in the middle of, all you need are h-100, d-flex, and m-auto:

<div class="h-100 d-flex">
  <div class="m-auto">
    Content
  </div>
</div>

The outer container will inflate to the size of whatever container it itself exists in, and the inner container will have auto margins set on each of its sides to center it within the parent.

div > div { border: 1px solid red; }
div { border: 1px solid blue; }
body { border: 1px dashed orange; }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">

<body class="m-2" style="width: 600px; height: 150px;">
  <div class="h-100 d-flex">
    <div class="m-auto">
      This content is centered<br>
      both vertically and horizontally<br>
      in its container
    </div>
  </div>
</body>

(Where the document body is dashed in orange, the inner <div> container is in blue, and the child container in red.)

Upvotes: 2

Tabassam Ali
Tabassam Ali

Reputation: 262

Try the code given below while using v4 or v5.

<div class="d-flex align-items-center justify-content-center" style="height:100vh;">
  Vertically and Horizontally Aligned :)
</div>

...OR... You can use these classes if using v5.

<div class="position-absolute top-50 start-50 translate-middle">
  Vertically and Horizontally Aligned :)
</div>

Do this, and that's it :)

Upvotes: 11

Jury Gans
Jury Gans

Reputation: 1

bootstrap 5

body {
  display: flex;
  align-items: center;
}

https://getbootstrap.com/docs/5.1/examples/sign-in/

Upvotes: 0

Константин Прудников
Константин Прудников

Reputation: 177

From bootstrap v5.0 just:

<div class="position-absolute top-50 start-50 translate-middle">
   centred
</div>

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362780

Bootstrap 5 (Updated 2021)

Bootstrap 5 is still flexbox based so vertical centering works the same way as it did in Bootstrap 4. For example, align-items-center (flex-direction: row) and justify-content-center (flex-direction: column) can used on the flexbox parent (row or d-flex).

Centering examples in Bootstrap 5

Vertical center (don't forget the parent must have a defined height!):

  • my-auto for centering inside flex (.d-flex) elements
  • my-auto can be used to center columns (.col-) inside row
  • align-items-center to center columns (col-*) inside row

Horizontal center:

  • text-center to center display:inline elements & column content
  • mx-auto for centering inside flex elements
  • mx-auto can be used to center columns (.col-) inside row
  • justify-content-center to center columns (col-*) inside row

Bootstrap 4.3+ (Update 2019)

There's no need for extra CSS. What's already included in Bootstrap will work. Make sure the container(s) of the form are full height. Bootstrap 4 now has a h-100 class for 100% height...

Vertical center:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://codeply.com/go/raCutAGHre

the height of the container with the item(s) to center should be 100% (or whatever the desired height is relative to the centered item)

Note: When using height:100% (percentage height) on any element, the element takes in the height of it's container. In modern browsers vh units height:100vh; can be used instead of % to get the desired height.

Therefore, you can set html, body {height: 100%}, or use the new min-vh-100 class on container instead of h-100.

Horizontal center:

  • text-center to center display:inline elements & column content
  • mx-auto for centering inside flex elements
  • offset-* or mx-auto can be used to center columns (.col-)
  • justify-content-center to center columns (col-*) inside row

Vertical Align Center in Bootstrap
Bootstrap 4 full-screen centered form
Bootstrap 4 center input group
Bootstrap 4 horizontal + vertical center full screen

Upvotes: 534

The EasyLearn Academy
The EasyLearn Academy

Reputation: 927

I am required to show form vertically center inside container-fluid so I developed my own code for the same.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style>
       .container-fluid
       {
            display: table-cell;
            height: 100vh;
            width: 100vw !important;
            vertical-align: middle;
            border:1px solid black;
       }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-8 offset-2">
                <div class="card shadow">
                    <div class="card-header bg-danger text-white">
                        <h2>Login</h2>
                    </div>

                    <div class="card-body">
                        <form action="">
                            <div class="form-group row">
                                <label for="txtemail" class="col-form-label col-sm-2">Email</label>
                                <div class="col-sm-10">
                                    <input type="email" name="txtemail" id="txtemail" class="form-control" required />
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="txtpassword" class="col-form-label col-sm-2">Password</label>
                                <div class="col-sm-10">
                                    <input type="password" name="txtpassword" id="txtpassword" class="form-control"
                                        required />
                                </div>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-danger btn-block">Login</button>
                                <button class="btn btn-warning btn-block">clear all</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 1

Mohamed Allal
Mohamed Allal

Reputation: 20930

From the doc (bootsrap 4):

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around

Upvotes: -1

Fletch
Fletch

Reputation: 917

I ended up here because I was having an issue with Bootstrap 4 grid system and an Angular *ngFor loop. I fixed it by applying a col justify-content-center class to the div implementing the ngFor:

<div class="row" style="border:1px solid red;">
  <div class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
  <div *ngFor="let text of buttonText" class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
</div>

which gives the result: enter image description here

Upvotes: 1

Balwinder Singh Sohi
Balwinder Singh Sohi

Reputation: 69

Use This Code In CSS : 

.container {
    width: 600px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}

Upvotes: -1

Levan Jintcharadze
Levan Jintcharadze

Reputation: 307

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="col-12 border border-info">
          <div class="d-flex justify-content-center align-items-center" style="height: 100px">
              <a href="#" class="btn btn-dark">Transfer</a>
              <a href="#" class="btn btn-dark mr-2 ml-2">Replenish</a>
              <a href="#" class="btn btn-dark mr-3">Account Details</a>
          </div>
    </div>

Upvotes: 1

Syed Waqas Bukhary
Syed Waqas Bukhary

Reputation: 5340

This is working in IE 11 with Bootstrap 4.3. While the other answers were not working in IE11 in my case. 

 <div class="row mx-auto justify-content-center align-items-center flex-column ">
    <div class="col-6">Something </div>
</div>

Upvotes: 4

ciaran kehoe
ciaran kehoe

Reputation: 201

Bootstrap has text-center to center a text. For example

<div class="container text-center">

You change the following

<div class="row justify-content-center align-items-center">

to the following

<div class="row text-center">

Upvotes: 19

shades3002
shades3002

Reputation: 1001

flexbox can help you. info here

<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
    <div class="p-2">
     1
    </div>
    <div class="p-2">
     2
    </div>
</div>

Upvotes: 24

karembadawy
karembadawy

Reputation: 441

This work for me:

<section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header>
</section>

Upvotes: 37

Bram Vanroy
Bram Vanroy

Reputation: 28554

You need something to center your form into. But because you didn't specify a height for your html and body, it would just wrap content - and not the viewport. In other words, there was no room where to center the item in.

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}

Upvotes: 12

Related Questions