Lesson 9 of 39
In Progress

Dynamic Layouts

Designing for Desktops

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">
</head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1>Tutorial List</h1>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <h3>HTML</h3>
                <p>Here, goes the content for HTML Course. </p>
            </div>
            <div class="col-md-4">
                <h3>CSS</h3>
                <p>Here, goes the content for CSS Course. </p>
            </div>
            <div class="col-md-4">
                <h3>JS</h3>
                <p>Here, goes the content for JS Course. </p>
            </div>
        </div>
    </div>
  </body>
</html>

Output:

KodNest bt15 1

More Content

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">
</head>
  <body>
<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <h1>Tutorial List</h1>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4">
            <h3>HTML</h3>
            <p>Here, goes the content for HTML. </p>
        </div>
        <div class="col-md-4">
            <h3>CSS</h3>
            <p>Here, goes the content for CSS. </p>
        </div>
        <div class="col-md-4">
            <h3>JS</h3>
            <p>Here, goes the content for JS. </p>
        </div>
        <div class="col-md-4">
            <h3>.Net</h3>
            <p>Here, goes the content for .NET. </p>
        </div>
        <div class="col-md-4">
            <h3>C</h3>
            <p>Here, goes the content for C. </p>
        </div>
        <div class="col-md-4">
            <h3>C++</h3>
            <p>Here, goes the content for C++. </p>
        </div>
    </div>
</div>
  </body>
</html>

Output:

KodNest bt16

Designing 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>Tutorial List</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <h3>HTML</h3>
            <p>Here, goes the content for HTML. </p>
        </div>
        <div class="col-sm-4">
            <h3>CSS</h3>
            <p>Here, goes the content for CSS. </p>
        </div>
        <div class="col-sm-4">
            <h3>JS</h3>
            <p>Here, goes the content for JS. </p>
        </div>
        <div class="col-sm-4">
            <h3>.Net</h3>
            <p>Here, goes the content for .NET. </p>
        </div>
        <div class="col-sm-4">
            <h3>C</h3>
            <p>Here, goes the content for C. </p>
        </div>
        <div class="col-sm-4">
            <h3>C++</h3>
            <p>Here, goes the content for C++. </p>
        </div>
    </div>
</div>
  </body>
</html>

Output:

KodNest bt17

Designing for Mobile

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-xs-12 text-center">
            <h1>Tutorial List</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h3>HTML</h3>
            <p>Here, goes content for HTML.</p>
        </div>
        <div class="col-xs-12">
            <h3>CSS</h3>
            <p>Here, goes content for CSS.</p>
        </div>
        <div class="col-xs-12">
            <h3>JS</h3>
            <p>Here, goes the content for JS. </p>
        </div>
        <div class="col-xs-12">
            <h3>.NET</h3>
            <p>Here, goes the content for .NET. </p>
        </div>
        <div class="col-xs-12">
            <h3>C</h3>
            <p>Here, goes the content for C. </p>
        </div>
        <div class="col-xs-12">
            <h3>C++</h3>
            <p>Here, goes the content for C++. </p>
        </div>
    </div>
</div>
  </body>
</html>

Output:

KodNest bt19
KodNest Training New Batch is starting on 02nd November 2020. Attend one week free demo classes.Register Now

New Report

Close