Intro to Bootstrap

It was not fun being a web developer during the pre-historic days of the internet. Every website that was built required brand new sets of CSS styles to make it look presentable. Thousands of developers would spend hours recreating the wheel on simple features every day. Then, Twitter came alone and changed all that. While building their product, Twitter engineers realized that they could reuse a lot of the components and style functionality between pages. They packaged all of the redundancy into a CSS framework and called it Bootstrap. The fundamental improvement that Bootstrap provided, it's grid system that we will cover further down, was such a good idea that now every reputable CSS frameworks out there uses it.

Another reason that Bootstrap is so important is because its' grid system facilitated a new paradigm for web development: responsive design. It turns out that most people are going to be logging into our website on their phones and tables rather than a traditional browser on a laptop. So, we better make a website that looks good on all of these different platforms. Through Bootstrap, we will tell our website how to look in all of these different scenarios.

What is a CSS framework?

A CSS framework is a collection of styles and components that are ready to be used to immeadiately enhance the look and feel of your website. Bootstrap is a bare-bones framework of sorts that people can use, but there are many others like Foundation and Materialize.

The easiest way to think about a CSS framework is that it is a large CSS file that contains styles on specifically named IDs and classes. For instance, bootstrap contains styles for elements with the "panel" class. In order to use the styles applied to a panel, we would give an element on our page the "panel" class. This would then give it all the styles defined for a panel in our framework. This will hopefully become more natural to you as we get our hands wet with some real code.

Importing Bootstrap

In order to use Bootstrap, we have to import a few different CSS and javascript files. We will do this using what is called a CDN. Essentially, the code we need to import onto our page is located on a website somewhere instead of in a file on our computer. We then make a link to the website in our HTML. Modify your index.html to contain the following:

{% load staticfiles %}
<html>
    <head>
        <title>InstaClone</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
    </head>
    <body>
        ...

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
</html>

The CDN for Bootstrap came from here and the one for jQuery came from here. We are importing jQuery now because Bootstrap requires it, but we won't be using it until later when we learn it in the Javascript section.

Now when you refresh your page you'll see right off the bat that it is a bit more aesthetically pleasing because the font changed and some of the text formatting changed. This all happened because of the stylings specified in Bootstrap's source code:

(Bootstrap upgrade on the left and the original bootstrap-less website on the right)

The Bootstrap Grid System

As I mentioned earlier, the real revolution behind bootstrap is the grid system that it created. Bootstrap dictates that a page is made up of a bunch of rows that span the width of the page. Each row is made up of exactly 12 columns. When we write our HTML, we will be giving each element an amount of columns for it to fill up. This will dictate its size.

Basic Rows and Columns

Let's dive right into an example of the grid system to make things more concrete:

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

In this example we are looking at four rows. Notice how each row is a <div> element given the "row" class. Within each row we define <div>'s which we give various numbers of columns. It says "col-md-x" but ignore the "md" for now because we will talk about it later.

This grid system makes it quite easy to do powerful things. For example, if we want 2 items to be horizontally side by side filling up the width of the screen, we would put both of them in the same row and make them both 6 columns (as seen in the 4th row above).

More than 12 columns in a row

One logical question to be asking right now is what happens if we put more than 12 total columns in a row. Let's observe the following example:

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

This example is interested because the number of columns in the row are 9+4+6=19. The way that bootstrap handles this is by shifting the entire group of extra columns to the next row. Thus, even though the first row has space for 3 more columns, since the next element is 4 columns, bootstrap shifts all 4 to the next row as a group.

Breakpoints for page sizes

Let's talk about the whole "md" and "xs" thing that we saw above when we defined the number of columns for an element.

When we tell a <div> how many columns it takes up, we specify a size to go along with that: xs (extra small), sm (small), md (medium), and lg (large). Each of these sizes correspond with a screen size. In order for our webpage to be responsive, we need tell the same element how many columns it should inhabit on different screen sizes. The cutoffs, in terms of pixels, for screen sizes are :

col-xs (x-small) col-sm (small) col-md (medium) col-lg (large)
Range < 786px >786px >992px >1200px
Device Type Mobile Tablet Laptop Desktop

It is important to note a few nuances:

  • If we only define the # of columns for one size, say md, then it will use that many columns for all screen sizes
  • If we define sm and md, if the page is sized at 800px then it will use the small definition, but if it is as 1000px it will use the md definition.
  • Further, in the above example, if the screen was 1300px, we would use the md definition because it is the largest size for which we have defined the number of columns

Let's look at a concrete example with the following code:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

The important thing to realize is that we are giving the same <div> multiple classes. This is fine and django will pick which one to used based on the size of the screen. On a mobile sized screen (xs), it looks like this:

On a screen size greater than 992px, it looks like this:

Updating InstaClone with Bootstrap

Now that we have this great bootstrap knowledge, let's use it to make our web page better. We are going to make it so that the 3 pieces of information (currently blue) are going to be displayed side by side in a single row on a larger screen. On mobile screens, we will make it so that each panel takes up an entire row and so they are stacked on top of one another.

First, we have to put all 3 of the panels into a row:

<div class="row">
    <div class="register-reason">
        <div class="register-title">Reason 1: You love Instagram</div>
        <div class="register-description">
            If you love Instagram then you're going to love us. It's a no brainer
        </div>
    </div>
    <div class="register-reason">
        <div class="register-title">Reason 2: We are free!</div>
        <div class="register-description">
            You might say, "Instagram is free too!" If you said that then you would be right.
        </div>
    </div>
    <div class="register-reason">
        <div class="register-title">Reason 3: We love the environment</div>
        <div class="register-description">
            It's true. The environment is great.
        </div>
    </div>
</div>

Next, we have to assign some number of columns to each panel. Let's focus on the larger screen (we'll say medium). We want all three panels on the same row, and so they should each take up an equal amount of the 12 columns. Thus, we will assign them all to be 4 columns on a medium size. For the xs case, we will give them 12 columns so that they each take up the entire row (I got rid of the register-reason class because we don't need those styles anymore):

<div class="row">
    <div class="col-md-4 col-xs-12">
        <div class="register-title">Reason 1: You love Instagram</div>
        <div class="register-description">
            If you love Instagram then you're going to love us. It's a no brainer
        </div>
    </div>
    <div class="col-md-4 col-xs-12">
        <div class="register-title">Reason 2: We are free!</div>
        <div class="register-description">
            You might say, "Instagram is free too!" If you said that then you would be right.
        </div>
    </div>
    <div class="col-md-4 col-xs-12">
        <div class="register-title">Reason 3: We love the environment</div>
        <div class="register-description">
            It's true. The environment is great.
        </div>
    </div>
</div>

Doing this gives us a nice result on medium and xs screens:

Finally, let's utilize some of Bootstrap's framework power to style each panel as a Bootstrap Panel. I am going to make a few changes:

  • Put the entire row into a <div> with a "container" class. This is recommended by Bootstrap and makes the margin spacing nice
  • Move the contents of each panel into a <div> with a "panel panel-primary" class. I also give the title and description specific classes that bootstrap says to use in its documentation in order to apply the proper styles
<div class="container">
    <div class="row">
        <div class="col-md-4 col-xs-12">
            <div class="panel panel-primary">
                <div class="panel-heading">Reason 1: You love Instagram</div>
                <div class="panel-body">
                    If you love Instagram then you're going to love us. It's a no brainer
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="panel panel-primary">
                <div class="panel-heading">Reason 2: We are free!</div>
                <div class="panel-body">
                    You might say, "Instagram is free too!" If you said that then you would be right.
                </div>
            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="panel panel-primary">
                <div class="panel-heading">Reason 3: We love the environment</div>
                <div class="panel-body">
                    It's true. The environment is great.
                </div>
            </div>
        </div>
    </div>
</div>

This results in a much more aesthetically pleasing result:

For an in-depth look at the grid system, consult bootstrap's documentation (where many of the examples I gave here come from).

Conclusion

In this section we learned about the CSS framework Bootstrap and how to use it's basic grid system. We then used it to upgrade our current application, taking advantage of the grid system and the Bootstrap Panel component.

While your knowledge of Bootstrap is in no way complete, you should feel comfortable looking up supplemental information on the internet on a need-to-know basis and learn more and more as you become more experienced. Now that we've gotten a light overview of CSS and Bootstrap, we are ready to move on to Javascript.

results matching ""

    No results matching ""