Let's see how to put the grid system into practice, creating a dynamic layout that adjusts to the size of device it is viewed in.
The following code shows how to use the col-md-12,
medium sized column to design for desktops.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- ww w .jav a2s. com-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<h3>Post Title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing aliqua. </p>
</div>
<div class="col-md-4">
<h3>Post Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. </p>
</div>
<div class="col-md-4">
<h3>Post Title 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. </p>
</div>
</div>
</div>
</body>
</html>Next, we'll directly append columns to the existing row of columns in the previous code.
Bootstrap allows only 12 Bootstrap columns in a single row. If we try to exceed that, the rest of the columns will be adjusted into the next line. This new line will again have the capacity of 12 Bootstrap columns. This way we can tie all the blog post columns into a single row.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- w w w.j a v a 2 s . com-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<h3>Post Title 1</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 2</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 3</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 4</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 5</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 6</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
</div>
</div>
</body>
</html>Next we will modify our code to achieve the layout for tablets.
Tablets can be viewed in two formats: Portrait and Landscape.
A tablet's landscape view is considered a medium-sized display (screen width >= 992px), which we've already taken care of using col-md-* classes.
We're now left with the portrait view, which is a small-sized display.
This can be achieved using col-sm-* classes.
Since we have to achieve a two-column layout in smaller displays, we have to force each column to span across six Bootstrap columns. This way we get only two columns (two by six Bootstrap columns = 12 Bootstrap columns) in each row. Hence, once all the 12 Bootstrap columns are occupied, the remaining columns will appear in the next line creating a new row each time.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- www. jav a 2 s . co m-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4 col-sm-6">
<h3>Post Title 1</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 2</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 3</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 4</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 5</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 6</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
</div>
</div>
</body>
</html>Resize your browser window to see the changes.
Like tablets, mobiles can also be viewed in landscape and portrait mode.
The landscape view in mobile devices utilize small-sized displays (screen width >= 768px)
that we have already taken care of using col-sm-* classes.
Portrait view in mobile devices employs extra small-sized displays (screen width < 768px).
For extra small screens, we have to use classes that have
the col-xs prefix. Here, we want each blog post columns to
occupy all the 12 Bootstrap columns so that we have
only one blog post in each row.
Our class will be col-xs-12, so let's proceed and add this class to our code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!-- ww w. j a va 2 s. c o m-->
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 1</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 2</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 3</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 4</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 5</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 6</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
</div>
</div>
</body>
</html>