Introduction to the Bootstrap Framework

When we are designing websites, a "framework" refers to a collection of related web code that we use to speed and assist in the process of building a website. In this class we will be using the Bootstrap 3 framework to help us build our site. The Bootstrap 3 framework includes CSS (cascading style sheets), JS (javascript) and HTML (hypertext markup language). The Bootstrap CSS rules are included in the bootstrap.css file, the Bootstrap Javascript is found in the bootstrap.js file, and Dreamweaver includes ready-to-use Bootstrap HTML accessible from Bootstrap Components found in the Dreamweaver Insert panel.

Like many modern, popular web technologies, Bootstrap is free and open-source. Bootstrap originated at Twitter, and was originally called Twitter Bootstrap. Bootstrap was developed by Jacob Thornton and Mark Otto.

Responsive Components

One of the essential components of Bootstrap 3 are the built-in styling rules and classes that make a website responsive . Responsive websites automatically change their appearance based up the kind of device viewing the web page. So a website can be styled to look great on a smart phones and be instantly restyled to look great on a desktop computer.

How do we make a responsive website? While various approaches have been tried, the consensus among web developers is to use a grid to divide the viewing area into an equal number of columns.

These columns can then be automatically rearranged by determining the size of the viewing device by using media queries. Media queries ask the question "What kind of device is viewing the web page?" The answer to this question determines the layout of the web page. We started working with media quieries when we created the image gallery.

The idea of using a grid to define the layout of a page is not new. This approach has been used in print publishing for years. Like other responsive frameworks, Bootstrap uses a grid of 12 columns, placed inside a row. If the combined size of the bootstrap elements in a row exceed 12  columns, the extra content will be pushed down.

The row holds the columns, and the row is then placed inside a Bootstrap container, or in a container-fluid. In other words, the container or container-fluid is the primary Bootstrap parent element. The child element of the container is the row, and the row then can have multiple child column elements.

Rows can be nested inside rows, but containers cannot be nested inside containers.

The Four Sizes of the Bootstrap 3 Framework

Bootstrap supports four different viewing sizes: extra small, small, medium and large. We abbreviate these sizes as xs, sm, md and lg respectively.

Generally speaking, we think of extra small (xs) devices as smart phones, small (sm) devices as tablet computers, medium (md) devices as laptops, and large (lg) devices as full size laptops or desktop computers.

Bootstrap Elements
Abbreviation Name Device Container Width
xs extra small mobile variable 767 px or less
sm small tablet 750px between 768px and 991px
md medium laptop 970px between 992px and 1199px
lg large desktop 1170px 1200 px or greater

 

How Device Size Changes Layout

Let’s start with a simple layout of two columns of text, viewed on an extra small (xs) device. These two columns are equally wide. If we divide the 12 columns by two, both of these columns will be six columns wide, and will be displayed side-by-side on the extra small (xs) device.

In HTML code, these two columns would be written as:

<div class="col-xs-6">Content for Column One goes here</div>

<div class="col-xs-6">Content for Column Two goes here</div>
                      

If these two columns fit side-by-side well on an extra small device, how will they appear on a small device, which is larger? They will also appear side-by-side. In fact, they will appear side-by-side on a medium and large device as well.

We really need to power of the Bootstrap framework when we need to move content from a larger device to a smaller device.

Consider this: a compact car fits nicely in a compact parking space. And you do not really anticipate any problems parking a compact car in a space marked for SUVs or large trucks.

The problem comes when we are driving a large truck, and the only space available is for a compact car!

Imagine we have content designed specifically for a small device (sm). Keep in mind the small (sm) device is larger than the extra small (xs) device.

In HTML code, we would write this as:

<div class="col-sm-6">Content for column One, Small Device</div>
<div class="col-sm-6">Content for column Two, Small Device</div>

 

What happens when we view this content on a device larger than the small (sm) format? There will be no changes when viewing this content on a medium (md) or large (lg) device; the two columns will be side-by-side. Again, if we can fit the text on a small device, then there will be no problems when moving to a larger display area.

 

But what happens in the Bootstrap framework when we view that content on the extra small (xs) device, which is smaller than a (sm) small device?

  • The two columns will stack one on top of another.
  • Each column will act as if it is 12 columns wide, and take up the full width of the space available.
  • The column which appears first in the code will be on top.

The similar action occurs if we have content coded as two columns of 6 for a medium (md) device, and increase the viewing width. Nothing happens when we view the medium (md) content on a large (lg) device, but as soon as we move to a small (sm) device, or extra small (xs) device, the content will be stacked.

We have an example of this in our tutorial website, where we have a Media page. The Video player is in a column which is a member of the medium-8 column (col-md-8) class, and the Audio player is a member of the medium-4 column (col-md-4) class.

Nothing changes when we switch from the medium (md) to large (lg) display, but as soon as we view the content in the range of a small (sm) device, or extra small (xs), the Video player is stacked on top of the Audio player. Again note that in medium view the Video player is 8 columns wide, and the Audio player is 4 columns wide, but in small or extra small view, they are both 12 columns wide, spanning the entire width of the viewing devices.

In our tutorial website, on the home page, we have three icons, each of which is 4 columns wide in medium view (col-md-4). As soon as we enter the viewing range of a small (sm) device, the three columns are stacked on top of each other, and each column is now 12 columns wide.

You might wonder, what if, in fact, we could comfortably fit two of those columns together in small view? Do all three columns have to be 12 columns wide? Well, no. We could specify that the first two divs are 4 columns wide in medium view, but 6 columns in small view. The HTML code for the first two columns would be written like this:

<div class=”col-md-4 col-xs-6”></div>
<div class=”col-md-4 col-xs-6”></div>
And the last div would be:
<div class=”col-md-4”></div>

In this example, the three columns would be spaced equally in medium (md) view.

In small (sm) view, the first two columns would be side-by-side, and the third column below, spanning a full 12 columns.

And in extra small (xs) view, all three columns would be stacked on top of each other.

In fact, there are quite a number of creative ways to arrange content using the Bootstrap framework. Content does not always have to be 12 columns wide. It can be less, and we can use offsets to shift content. On the tutorial homepage, we will have a single div that is 10 columns wide, with an offset of one column:

<div class="col-lg-10 col-lg-offset-1">

The Bootstrap 3 Structure

Well, now that you have some idea of how the Bootstrap framework works, let us review the basic structure of the framework.

Two Containers - Container vs Container-Fluid

All the responsive content must be contained inside a bootstrap container. That container can either be a standard container, which has fixed widths at different viewing sizes, such as extra small, small, medium or large. Or that container can be a container-fluid, which always expands or contracts its size to the edges of its content.

You might think that the container-fluid is the most popular Bootstrap container, since it always fully expands to whatever area is available. But the basic container, rather than the container-fluid, tends to be used more often.

The basic container: predictable sizes in a changing layout

The idea behind the basic container is simple: for the small, medium and large device media queries, the width of the container is fixed for each viewing size.

For the small device, there is a box with a fixed width of 750px. For the medium device, there is a box with a fixed width of 970px, and for the large device, there is a box with a fixed width of 1170px.

Let us look at our Bootstrap table again:

Bootstrap Elements
Abbreviation Name Device Container Width
xs extra small mobile variable 767 px or less
sm small tablet 750px between 768px and 991px
md medium laptop 970px between 992px and 1199px
lg large desktop 1170px 1200 px or greater

Example with large media query

If I am using a basic container, and the screen width is 1200px, then the content has a width of 1170px. So there is a slight margin of 15px on either side of the content when viewed in the smallest width for the "large" device, 1200px.

Imagine the screen width is much larger, say 2200px. Even though the screen width has greatly increased in size. the content still has a width of 1170px, and now the margin on each side is a whopping 515px! We do have a lot of unused space in this example, but the appearance of the content, with a fixed with of 1170px, remains consistent and constant as the screen is resized.

Example with a small media query

You will notice the limits for the small media query are from 768px to 991px. In this case, the content has a fixed with a 750px. Again, you will have a rather small margin of 9px on either side of the content at the very smallest size, 768px, and a much larger margin of around 120px at the very largest size, 991px.

These examples work very well with text. Paragraph text is generally displayed in a fixed size of 16px. So the appearance and layout of paragraph text in the Bootstrap container, with a fixed size of 16px, will be consistent, as it is in a container that also has a fixed size.

Using the container-fluid: always changing size.

The container-fluid, on the other hand, is always working had to fill as much of the screen as possible. Images are often found in the container-fluid. Unlike text, which has to maintain a certain level of readability, images offer much for flexibility for viewing.

The Bootstrap 2 navigation bar is a good example of content in a container-fluid.

Try resizing the screen of your student website. Notice how the content is always at the limits, both the far left, and far right, or the screen.

Using Bootstrap 3 Visibility Classes

Part of designing a responsive website is considering which content to display, and which content to hide, depending on the viewing device: mobile, tablet, laptop, or desktop.

As we learned earlier, mobile users are often primarily concerned with locating information quickly. For this reason, you may want hide some content on your website for the mobile device.

Bootstrap has a number of classes for showing or hiding content:

When to hide content in mobile view:

Case 1: Load Time/Bandwidth

For our site, we will select to hide the image carousel for the mobile view. This is not because we do not value the images we added to our website, but the user will typically have to wait for the larger image files to load.

This slows down the user experience of accessing information on the page, and may contribute to high data useage for the mobile user as well. And on a mobile device, our wonderful images are going to be small, taking away from their impact.

But what about the media page?

You might be wondering, but what about the media page we will be adding to the site, with audio and video? Does not streaming video, and audio, use a lot of bandwidth? Does it not take a long time to load? Well, yes to both points. But we are keeping this content on a separate, dedicated page on the site. So we are letting the visitor decide for themselves if they want to look at a video, or listen to a song, on their mobile device. The content we are targeting for load time/bandwidth reasons is on the home page, the first page the visitor will typically see.

Case 2: Screen Real-Estate

We are also going to hide our Google search bar in the navigation. The Google search bar is a useful addition to our web page, but it is not critical, or essential, to the user experience.

There are certainly other ways to the mobile user to search the web if that is what they are interested in doing. Also, on a small screen, the Google search takes up valuable space that would be better used to display various pages in the navigation menu.


Wayne Joness
West Los Angeles College, cs952
Fall