Bootstrap: A Crash Course

Bootstrap: A Crash Course Part 3

April 2, 2015


Working with the basic layout of a site using Bootstrap’s .container .row and .col classes.

 Now that we understand how Bootstrap’s main layout classes work, we are going to dive into the actual coding of these classes.

The HTML Head Section

Here is the basic head section:

<!DOCTYPE html>
<html lang="en">
<head>

Now we’ll add in some meta and link tags for Bootstrap in the head:

<meta charset="utf-8">
 <!--
 *****width=device-width: this sets the screen size to the size of the device this site is being view on
 *****initial-scale=1: this sets the initial zoom level when the page is first loaded
 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">

<!--Style Sheet Imports-->
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap

/3.2.0/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="custom.css">
</head>

 

Looking at the meta name you will see two pieces in the content portion.

  • The first is width=device-width, and this sets the screen size to the size of the viewing device.
  • The second is initial-scale=1, and this sets the zoom level of the page when it is first loaded onto the screen.

The first link tag is the MaxCDN style sheet link, and the second is a style sheet I created to edit some of the content for this example.

NOTE: There are some extra tidbits in this head section, but the two that you need to be concerned with in terms of getting Bootstrap to work is the meta name and the MaxCDN link.

The Main Content Layout

Now we are going to move straight into the main content of the site. If you remember the hierarchy in the previous post of this Bootstrap Crash Course, then you know that the first class we must work with is the .container. We’ll start by placing in the body tag, and then a div tag assigned a class of container.

<body>
 <div class="container">

The next step down on the hierarchy is the .row class. This must be placed inside the container class element.

<body>
 <div class="container">
 <div id="main" class="row">

You’ll notice that this div was given an id in addition to the .row class. This serves as a reminder of what section you are working on as well as gives you control over the content inside without having to add code to the .row class rule.

The last step in the hierarchy is the .col class. Before we jump into creating them, let’s work out a plan for what we want on our site.

The Main Site Content Plan

Two Sections:

  • For Desktops or Tablets:
    • An article section that takes up the majority of the screen
    • A sidebar section that takes up a lesser portion of the screen compared to the article section
  • For Smart Phones
    • Both the article and sidebar section will take up the full width of the screen
    • The sidebar section will get booted below the article section.

Now that we have our plan established we can code it out. Below our .row div element we will type the following:

<div id="article" class="col-lg-8 col-md-8 col-sm-8">
<h1>Title of Article</h1>
<p>This is the content of the article that will take up the majority of screen space

 when viewed on a desktop, but when it is viewed within a smaller screen, 

it will take up the full width of the screen.To test this, adjust the width of your

 browser window, and watch as the Bootstrap do its magic.</p>
</div><!--end of article-->

 <div id="sidebar" class="col-lg-4 col-md-4 col-sm-4">
 <h2>Sidebar Text</h2>
 <p>This is the sidebar content that you will see is in the second column

 when viewed on a desktop or tablet. When viewed on a smartphone, this sidebar 

will take up the full width of the screen when it is moved below the article section.
 </p>
 </div><!--end of sidebar-->

You can see that for large desktops, desktops, and tablets that the article section will take up 8 out of 12 units of space, and the sidebar section will take up 4 out of 12 units of space.

There is one piece missing other than the closing tags, did you catch it? Yep, you got it. There isn’t a col-xs in the class name to designate a full browser width section. The reason for this is because if you do not declare a .col size unit for an element, the default size will go to 12 automatically and take up the full width of the screen when rendered.

Today we learned how to layout content for a site so it will be responsive to different device browser-widths. On the next Bootstrap Crash Course post we will look at how Bootstrap helps create awesome menus and navigation bars.

The code in full:

<!DOCTYPE html>
 <html lang="en">
 <head>

<meta charset="utf-8">
 <!--
 *****width=device-width: this sets the screen size to the size of the device this site is being view on
 *****initial-scale=1: this sets the initial zoom level when the page is first loaded
 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">

<!--Style Sheet Imports-->
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap

/3.2.0/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="custom.css">

</head>
 <body>

<div class="container">

<div id="main" class="row">

<div id="article" class="col-lg-8 col-md-8 col-sm-8 col-xs-pull">
 <h1>Title of Article</h1>
 <p>This is the content of the article that
will take up the majority of screen space when viewed on a desktop, but when it
is viewed within a smaller screen, it will take up the full width of the screen.
To test this, adjust the width of your browser window, and watch as the Bootstrap
do its magic.
 </div><!--end of article-->

<div id="sidebar" class="col-lg-4 col-md-4 col-sm-4 col-xs-push">
 <h2>Sidebar Text</h2>
 <p>This is the sidebar content that you will
see is in the second column when viewed on a desktop or tablet. When viewed on a smartphone, this sidebar will take up the full width of the screen when it is moved below the article section.

</p>

 </div><!--end of sidebar-->

</div><!--end of main-->

</div><!--end of container-->

<!--JQuery & Bootstrap JavaScript-->
 <script src="https://ajax.googleapis.com/ajax/libs/

jquery/1.11.1/jquery.min.js"></script>

 <script src="http://maxcdn.bootstrapcdn.com/bootstrap

/3.2.0/js/bootstrap.min.js"></script>

</body>

</html>

And here is the custom.css:

/*basic css for Bootstrap example*/
 h1
 {
 text-align: center;
 }
 h2
 {
 text-align: center;
 }
 #article
 {
 padding: 10px 10px 10px 10px;
 }
 #sidebar
 {
 padding: 10px 10px 10px 10px;
 }