Bootstrap Snippet Centered Content using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
            <h3>Hi! I'm centered</h3>
            <p class="lead">I'm not the author of this snippet, just found it <a href="https://html5devgal.wordpress.com/2013/05/29/vertically-and-horizontally-center-with-twitter-bootstrap-responsive/">here</a>!</p>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html, body{height:100%; margin:0;padding:0}
 
.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
 
.centering {
  float:none;
  margin:0 auto;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Centered Content"
Bootstrap 3.3.0 Snippet by nguyenluuthanhbinh

Related: See More

Questions / Comments:

"Centered Content" Bootstrap 3.3.0 Snippet by nguyenluuthanhbinh

Related: See More

Questions / Comments:

"Centered Content"
Bootstrap 3.3.0 Snippet by nguyenluuthanhbinh