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.

2

17 Answers

Update for Bootstrap 5

Simpler vertical grid alignement with flex-box

@import url(');
html,
body { height: 100%
}

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

Solution for Bootstrap 4

Simpler vertical grid alignement with flex-box

@import url(');
html,
body { height: 100%
}

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

Solution for Bootstrap 3

@import url('); html, body, .container-table { height: 100%;
}
.container-table { display: table;
}
.vertical-center-row { display: table-cell; vertical-align: middle;
}

<script src=""></script>
<div> <div> <div>TEXT</div> </div>
</div>

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

3

CSS:

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

HTML:

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

Example fiddle

4

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> <div>MIDDLE</div>
</div>

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

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> <div> <h1>Hello, world!</h1> </div>
</div>

---

Vertical center in Bootstrap 4

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

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

1

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> Center
</div>

1

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

<div> <div> <div>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;
}

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

<link href="" rel="stylesheet"/>
<div> <div> <div> <h1>Counter</h1> </div> <div> <span>0</span> </div> <div> <button>Decrease</button> <button>Reset</button> <button>Increase</button> </div> </div> </div>

you can do also that way.

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> <div> <div align="center">TEXT</div> </div>
</div>

This would be enough.

0

In Bootstrap 4, use:

<div>...</div>

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

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

Reference here

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

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

2

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

<section>
<div> <div> <div align="center"> <div> <div> <h1>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> <div> <div align="center"> <div> <div> <div> <h1>Some content</h1> </div> <div> <p>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.

For actual version of Bootstrap 4.3.1 use

Style

<link rel="stylesheet" href="">
<style type="text/css">
html, body { height: 100%;
}
</style>

Code

<div>
<div>
<!-- example content -->
<div>
<h4>Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div

Not the best way ,but will still work

<div>
<div>
<div></div>
<div>
<div> <div></div> <div> This div is in middle </div> <div></div>
</div>
</div>
<div></div>
</div>
</div>

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="">
</head>
<body> <div> <div></div> </div>
</body>
</html>

jsFiddle

HTML:

<div> <div> <div>text <div> <div>TEXT</div> </div> </div> </div>
</div>

CSS:

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

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

 <div> <div></div> <ul> <li>Yuvraj Patil</li> </ul> <div></div> </div>

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy