In a bootstrap responsive page how to center a div
CssTwitter BootstrapResponsive DesignCss Problem Overview
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.
Css Solutions
Solution 1 - Css
UPDATE 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 row align-items-center">
<div class="col" 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.
Solution 2 - Css
CSS:
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
HTML:
<div class="container">
<div>
example
</div>
</div>
Solution 3 - Css
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
Solution 4 - Css
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
Solution 5 - Css
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>
Solution 6 - Css
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>
Solution 7 - Css
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;
}
Solution 8 - Css
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.
Solution 9 - Css
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.
Solution 10 - Css
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
Solution 11 - Css
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/
Solution 12 - Css
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.
Solution 13 - Css
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
Solution 14 - Css
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>
Solution 15 - Css
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>
Solution 16 - Css
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;
}
Solution 17 - Css
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>