In a bootstrap responsive page how to center a div

Question

position a div at centre of a responsive page

I need to create a responsive page using bootstrap by position a div at the centre of a page as like in the below mentioned layout.

http://stackoverflow.com/questions/9554724/how-do-i-center-a-bootstrap-div-with-a-spanx-class — Kenny Thompson, Nov 22 '13 at 10:33
i need to center a div with the text(Responsive design using bootstrap) which should be present inside another full width col-lg-12 centered div as like in the layout.it would be helpful if i can get the sample code in fiddle — Rama Priya, Nov 22 '13 at 10:45

ppollono · Accepted Answer · 2022-05-31T08:53:21.473

Update for Bootstrap 5

Simpler vertical grid alignement with flex-box

@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css');
html,
body {
  height: 100%
}

<div class="h-100 d-flex align-items-center justify-content-center">
  <div style="background:red">
    TEXT
  </div>
</div>

Solution for Bootstrap 4

Simpler vertical grid alignement with flex-box

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
  height: 100%
}

<div class="h-100 d-flex align-items-center justify-content-center">
  <div style="background:red">
    TEXT
  </div>
</div>

Solution for Bootstrap 3

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table {
    height: 100%;
}
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>

It's a simple example of a horizontally and vertically div centered in all screen sizes.

I have to position the div col-lg-12 vertically center in all screen sizes — Rama Priya, Nov 23 '13 at 04:51
I found the solution for you check this fiddle http://jsfiddle.net/Palapas/52VtD/687/ the container must have height 100% otherwise you need to use position absolute — ppollono, Nov 25 '13 at 15:49
@ppollono, I guess your fildle example is not loading / referencing bootstrap framework. — NoChance, Aug 07 '22 at 08:00

score 60 · Answer 2 · answered Jan 25 '17 at 18:02

60

CSS:

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML:

<div class="container">
  <div>
    example
  </div>
</div>

Example fiddle

answered Jan 25 '17 at 18:02

vocasle

799
8
11

2

this solution does not work when i open my site in the mobile. – codeinprogress Mar 21 '17 at 02:28
2

Hi, what browser you were using? Did you load Bootstrap's stylesheets and javascript? It's working in Firefox and Chrome. Tested on all screen sizes. – vocasle Mar 22 '17 at 07:25
I tested this by resizing my browser, as well as using a responsive website checker. Works for me. – RockyK Sep 29 '17 at 03:10
1

this fix is breaking bootstrap default styles – ppollono Nov 04 '19 at 14:12

score 42 · Answer 3 · edited Feb 08 '21 at 14:36

In bootstrap 4

to center the children horizontally, use bootstrap-4 class

justify-content-center

to center the children vertically, use bootstrap-4 class

 align-items-center

but remember don't forget to use d-flex class with these it's a bootstrap-4 utility class, like so

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <div class="bg-primary">MIDDLE</div>    
</div>

Note: make sure to add bootstrap-4 utilities if this code does not work

score 20 · Answer 4 · answered Aug 23 '17 at 12:35

Update for Bootstrap 4

Now that Bootstrap 4 is flexbox, vertical alignment is easier. Given a full height flexbox div, just us my-auto for even top and bottom margins...

<div class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
      <h1 class="display-3">Hello, world!</h1>
    </div>
</div>

http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center

Vertical center in Bootstrap 4

score 7 · Answer 5 · edited Jul 03 '21 at 20:59

7

For centering a div assign three class names of bootstrap inside into a div: ml-0 mr-0 mx-auto

Just look at the simple example below how it is being centered

<div class="bg-primary w-50 ml-0 mr-0 mx-auto text-center">
      Center
</div>

edited Jul 03 '21 at 20:59

Sven Eberth

3,057
12
24
29

answered Jul 03 '21 at 20:41

Ruman

936
11
9

1

This one keeps the width of the content from going too small for low width screens. – Schwarz Software Jun 02 '22 at 02:52

score 6 · Answer 6 · answered Aug 02 '19 at 00:09

6

You don't need to change anything in CSS you can directly write this in class and you will get the result.

<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

answered Aug 02 '19 at 00:09

Jay

308
2
10

2

it works for horizantal center only, i dont know why up? queston asked for both (h and v). – Nuri YILMAZ Oct 05 '20 at 10:48

score 4 · Answer 7 · answered Nov 17 '16 at 14:16

without display table and without bootstrap , i would rather do that

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>


 html, body, .container-table {
    height: 100%;
}
.container-table {
    width:100vw;
  height:150px;
  border:1px solid black;
}
.vertical-center-row {
   margin:auto;
  width:30%;
  padding:63px;
  text-align:center;

}

http://codepen.io/matoeil/pen/PbbWgQ

score 3 · Answer 8 · answered Jun 01 '20 at 11:43

In Bootstrap 4, use:

<div class="d-flex justify-content-center">...</div>

You can also change the position depending on what you want:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Reference here

score 3 · Answer 9 · answered Sep 10 '20 at 17:35

body{
    height: 100vh;
} 
.container{
    height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container text-center d-flex align-items-center justify-content-center">
        <div>
            <div>
                <h1>Counter</h1>
            </div>
            <div>
                <span>0</span>
            </div>
            <div>
                <button class="btn btn-outline-primary">Decrease</button>
                <button class="btn btn-danger">Reset</button>
                <button class="btn btn-outline-success">Increase</button>
            </div>
        </div>
    </div>

you can do also that way.

score 2 · Answer 10 · answered Aug 14 '14 at 10:15

Good answer ppollono. I was just playing around and I got a slightly better solution. The CSS would remain the same, i.e. :

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    vertical-align: middle;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

But for HTML:

<div class="container">
    <div class="vertical-center-row">
        <div align="center">TEXT</div>
    </div>
</div>

This would be enough.

Sravan · Answer 11 · 2015-04-20T10:34:11.067

2

Here is simple CSS rules that put any div in the center

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

edited Apr 20 '15 at 10:34

answered Apr 20 '15 at 07:39

Sravan

69
3

Could you expand your answer? Links tend to become stale over time. – orique Apr 20 '15 at 07:57
2

Also, this isn't the "bootstrap way" to achieve this. – FuriousFolder Apr 26 '16 at 19:27
@FuriousFolder, what is the BS way? – NoChance Aug 07 '22 at 19:24

TheOneAndOnly ME · Answer 12 · 2017-07-24T16:05:22.573

I think the simplest way to accomplish the layout with bootstrap is like this:

<section>
<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 200px; background-color: blueviolet;">
                <div>
                    <h1 style="color: white;">Content goes here</h1>
                </div>
            </div>
        </div>
    </div>
</div>

all I did was to add layers of divs that allowed me to center the div, but since I am not using percentages, you need to specify the max-width of the div to be center.

You can use this same method to center more than one column, you just need to add more div layers:

<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 400px; background-color: blueviolet;">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
                    <div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
                        <h1 style="color: white;">Some content</h1>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
                        <p style="color: white;">More content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Note: that I added a div with column 12 for md, sm and xs, if you don't do this the first div with background color (in this case "blueviolet") will collapse, you will be able to see the child divs, but not the background color.

score 1 · Answer 13 · answered Mar 28 '19 at 12:12

For actual version of Bootstrap 4.3.1 use

Style

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
    height: 100%;
}
</style>

Code

<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div

score 1 · Answer 14 · answered Aug 26 '19 at 18:37

Not the best way ,but will still work

<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 border">
    This div is in middle
  </div>
  <div class="col-lg-4"></div>
</div>

</div>
<div class="col-lg-12"></div>
</div>

</div>

score 1 · Answer 15 · answered Apr 01 '20 at 11:42

Try this, For the example, I used a fixed height. I think it is doesn't affect the responsive scenario.

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
        <div class="bg-primary" style="width: 200px; height: 50px;"></div>
    </div>
</body>
</html>

Dasun Karawita · Answer 16 · 2023-06-20T03:42:52.347

1

Simply insert the class : d-flex justify-content-center to the div that you want center. Such ;

<div class="d-flex justify-content-center">
    <img src="asf" alt="text" >
</div>

Note : This works only If you uses Bootstrap 5.

I taken following code using : https://getbootstrap.com/docs/4.0/utilities/flex/ , follow it for more details.

Thanks !

edited Jun 20 '23 at 03:42

answered Jun 20 '23 at 03:34

Dasun Karawita

11
2

score 0 · Answer 17 · answered Dec 17 '22 at 06:26

Here is the snippet used and worked,

<div class="container-fluid py-5 h-100">
  <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="col col-md-8">
            <div class="card"></div>
        </div>
  </div>
</div>

score 0 · Answer 18 · answered Jun 20 '23 at 14:02

0


<div class="d-flex justify-content-center align-items-center vh-100">
<div class="bg-danger text-white">Hello</div>
</div>

answered Jun 20 '23 at 14:02

Emrah Akçal

1

score -2 · Answer 19 · edited Feb 18 '20 at 12:04

-2

jsFiddle

HTML:

<div class="container" id="parent">
  <div class="row">
    <div class="col-lg-12">text
      <div class="row ">
        <div class="col-md-4 col-md-offset-4" id="child">TEXT</div>
      </div>
    </div>
  </div>
</div>

CSS:

#parent {    
    text-align: center;
}
#child {
    margin: 0 auto;
    display: inline-block;
    background: red;
    color: white;
}

edited Feb 18 '20 at 12:04

Renan Araújo

3,533
11
39
49

answered Nov 26 '13 at 12:33

noppe

397
3
9

score -2 · Answer 20 · answered Mar 22 '20 at 09:19

Simplest solution will be adding one blank column in both sides like below:

  <div class="row form-group">

    <div class="col-3"></div>

    <ul class="list-group col-6">
      <li class="list-group-item active">Yuvraj Patil</li>
    </ul>

    <div class="col-3"></div>
  </div>

In a bootstrap responsive page how to center a div

20 Answers20

jsFiddle

Linked

Related