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.
This question is related to
css
twitter-bootstrap
responsive-design
The answer is
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');_x000D_
html,_x000D_
body {_x000D_
height: 100%_x000D_
}<div class="h-100 row align-items-center">_x000D_
<div class="col" style="background:red">_x000D_
TEXT_x000D_
</div>_x000D_
</div>Solution for Bootstrap 3
@import url('http://getbootstrap.com/dist/css/bootstrap.css');_x000D_
html, body, .container-table {_x000D_
height: 100%;_x000D_
}_x000D_
.container-table {_x000D_
display: table;_x000D_
}_x000D_
.vertical-center-row {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>_x000D_
_x000D_
<div class="container container-table">_x000D_
<div class="row vertical-center-row">_x000D_
<div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>_x000D_
</div>_x000D_
</div>It's a simple example of a horizontally and vertically div centered in all screen sizes.
CSS:
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
HTML:
<div class="container">
<div>
example
</div>
</div>
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
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;
}
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.
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 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
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/
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;
}
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
Try this, For the example, I used a fixed height. I think it is doesn't affect the responsive scenario.
<html lang="en">_x000D_
<head>_x000D_
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">_x000D_
</head>_x000D_
<body>_x000D_
<div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">_x000D_
<div class="bg-primary" style="width: 200px; height: 50px;"></div>_x000D_
</div>_x000D_
</body>_x000D_
</html>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
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.
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.
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>
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>
Source: Stackoverflow.com