Lesson Thursday

Now that we've addressed what Bootstrap does, and how to install it into our projects, we can begin experimenting with the styles it offers. In this lesson we'll walk through how to implement several of the most common Bootstrap resources and styles.

Project Setup

Let's create another basic project to practice using Bootstrap. We'll create a website to summarize what we've learned so far this week!

We'll make a new project directory named week-in-review. It will contain an .html file named index.html, and a folder called css .

Then, we'll add some starter HTML to index.html:

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>My First Week at Epicodus</title>
  </head>
  <body>
    <h1>My First Week at Epicodus</h1>
    <p>
      I've almost finished my first week at Epicodus. Here are some of the things I've learned so far:
    </p>
    <h2>Command Line</h2>
    <ul>
      <li>Navigating my documents through the command line.</li>
      <li>Creating new files and folders through the command line.</li>
      <li>Moving and deleting files and folders through the command line.</li>
      <li>Retrieving my current location from the command line.</li>
    </ul>
    <h2>Git and GitHub</h2>
    <ul>
      <li>Initializing local Git repository, and create remote GitHub repositories.</li>
      <li>Tracking and committing changes with Git.</li>
      <li>Pushing a local Git repository to a remote GitHub repository.</li>
      <li>Branching a project to make multiple copies.</li>
      <li>Merging multiple Git branches back together.</li>
      <li>Cloning down a project from GitHub to my local machine.</li>
      <li>Publishing a website on GitHub pages.</li>
    </ul>
    <h2>HTML</h2>
    <ul>
      <li>Using HTML tags to create websites.</li>
      <li>Indenting and organize HTML correctly.</li>
      <li>Incorporating block elements.</li>
      <li>Including inline elements.</li>
      <li>Using both spans and divs.</li>
      <li>Adding classes and ID's to style HTML with CSS.</li>
    </ul>
    <h2>CSS</h2>
    <ul>
      <li>Creating a stylesheet.</li>
      <li>Using CSS selectors to specify an HTML element.</li>
      <li>Writing CSS rules to style particular elements in my HTML.</li>
      <li>Floating elements to create columns, sidebars, and other alignments.</li>
      <li>Padding, margins, and the box model.</li>
      <li>How CSS cascades to apply styles.</li>
      <li>The importance of responsive design.</li>
      <li>How to use media queries to dynamically change the appearance of a site based on the user's viewport.</li>
    </ul>
    <h2>Bootstrap</h2>
    <ul>
      <li>What front-end frameworks do.</li>
      <li>Downloading and installing Bootstrap.</li>
      <li>Adding Bootstrap styles to a website.</li>
      <li>Navigating Bootstrap documentation.</li>
      <li>Creating websites with Bootstrap.</li>
    </ul>
  </body>
</html>

Let's preview what our site looks like before we add Bootstrap. Load your .html file into the browser:

example-site-without-bootstrap

Adding Bootstrap

Then, as described in the Bootstrap: Downloading & Installing lesson, let's download a copy of Bootstrap and place the boostrap.css stylesheet the download includes into our project's css folder.

Our project directory should be organized like this:

week-in-review
├── css
│   └── bootstrap.css
└── index.html

Then, we'll link this Bootstrap stylesheet in the <head> tags of our HTML file:

index.html
...
  <head>
    <title>My First Week at Epicodus</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  </head>
...

(Note: When you see ... in a code snippet this simply means that we've omitted code from the file we're depicting, in order to make it clearer to see where changes have occurred.)

Bootstrap should now be successfully integrated into our project!

Bootstrap Styles

We can refresh our page, and see it already looks different:

example-site-with-bootstrap

We haven't even done anything special yet, and our site already looks pretty good. Isn't this cool? Let's add more Bootstrap to style our site.

Containers

One of the most commonly-used Bootstrap elements is a container. Containers wrap our content nicely, and add padding that dynamically increases or decreases in size depending on the user's viewport.

We can add a container to our HTML like this:

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>My First Week at Epicodus</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="container">

     ...

    </div>
  </body>
</html>

Here, we've simply placed a div directly inside our <body> tags with a class of container.

Bootstrap is essentially a really big CSS stylesheet. Earlier, we learned how to add classes to HTML elements to style our pages. Adding Bootstrap's built-in container class is very similar. But instead of manually defining CSS rules that style anything with the container class in our own stylesheet, the Bootstrap stylesheet we included in our project already has CSS rules for the container class defined. All we need to do is add this class in order to make use of the CSS in the bootstrap.css file!

If you refresh the page you should notice padding has been added around the edges of our content:

added-container

Also, if we resize the width of the browser window, we can see that the amount of padding automatically changes depending on the size of the viewport! Bootstrap also has media queries built right in. So, when we integrate a Bootstrap element or component into our own page, they're automatically responsive.

Jumbotron

Another commonly-used Bootstrap element is something called a Jumbotron. Jumbotrons are primarily used to add emphasis to content on a page. Oftentimes, they're placed at the top of the page to act as a header.

Just like the container, we can add a Jumbotron by including a div with the jumbotron class wherever we'd like it to appear. Let's place ours at the top of the page, directly within our container:

index.html
...

  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>My First Week at Epicodus</h1>
        <p>
          I've almost finished my first week at Epicodus. Here are some of the things I've learned so far:
        </p>
      </div>

...

We can refresh the page and see our new Jumbotron:

site-with-jumbotron

Again, notice it is also automatically responsive! The Jumbotron should re-center itself and its text as the width of the viewport changes.

Typography

Blockquotes

Bootstrap also includes many easy ways to style text! For instance, we can add blockquotes to display nicely-formatted quotes on our page.

Let's add another section to our site. We'll call it "Partnering" and it will contain a quote from one of our partners this week:

index.html
...

      <h2>Bootstrap</h2>
      <ul>
        <li>What front-end frameworks do.</li>
        <li>Downloading and installing Bootstrap.</li>
        <li>Adding Bootstrap styles to a website.</li>
        <li>Navigating Bootstrap documentation.</li>
        <li>Creating websites with Bootstrap.</li>
      </ul>
      <h2>Partnering</h2>
      <blockquote>
        <p>"It's been really good working with you!"</p>
        <footer>My partner the first day</footer>
      </blockquote>
    </div>
  </body>
</html>

With only a few additions to our HTML, we have a polished-looking quote block:

bootstrap-blockquote

Helper Classes

Another great feature of Bootstrap is the wide variety of helper classes we can add to almost any element. As the name implies, these classes "help out" by adding additional styles to Bootstrap elements.

Let's highlight a few concepts we found enjoyable this week in green. We can do this by adding the bg-success class to various <li> tags on our page.

bg stands for "background", and success is a name used throughout Bootstrap to refer to a particular shade of green:

index.html
...

      <h2>Git and GitHub</h2>
      <ul>

         ...

        <li class="bg-success">Publishing a website on GitHub pages.</li>

         ...

      </ul>
      <h2>CSS</h2>
      <ul>

        ...

        <li class="bg-success">How to use media queries to dynamically change the appearance of a site based on the user's viewport.</li>
      </ul>
      <h2>Bootstrap</h2>
      <ul>

        ...

        <li class="bg-success">Adding Bootstrap styles to a website.</li>
...

background-color-helpers

Similarly, we could use the bg-info class on our existing blockquote to add some color. Like success, info is another nickname for a color used throughout many Bootstrap elements:

index.html
...

      <h2>Partnering</h2>
      <blockquote class="bg-info">
        <p>"It's been really good working with you!"</p>
        <footer>My partner the first day</footer>
      </blockquote>

...

bg-helper-class-on-blockquote

Wells

Another simple effect that can easily organize a page is a well. It makes content within it appear inset into the page.

Like many Bootstrap components, adding a well is as simple as including a class on a div:

index.html
...
      <div class="well">
        <h2>Command Line</h2>
        <ul>
          <li>Navigating my documents through the command line.</li>
          <li>Creating new files and folders through the command line.</li>
          <li>Moving and deleting files and folders through the command line.</li>
          <li>Retrieving my current location from the command line.</li>
        </ul>
      </div>
...

well

And, like other elements, it's automatically responsive, and will resize automatically as the user's viewport changes in size.

Panels

Another similar organizational element is a panel. In addition to wrapping content in a box, it also offers a section for a title and a body. We can create a panel like this:

index.html
...

      <div class="panel panel-default">
        <div class="panel-body">
          <h2>Git and GitHub</h2>
          <ul>
            <li>Initializing local Git repository, and create remote GitHub repositories.</li>
            <li>Tracking and committing changes with Git.</li>
            <li>Pushing a local Git repository to a remote GitHub repository.</li>
            <li>Branching a project to make multiple copies.</li>
            <li>Merging multiple Git branches back together.</li>
            <li>Cloning down a project from GitHub to my local machine.</li>
            <li class="bg-success">Publishing a website on GitHub pages.</li>
          </ul>
        </div>
      </div>

...

panel

We can also add a title section to a panel like this:

index.html
...

      <div class="panel panel-default">
        <div class="panel-heading">
          <h2 class="panel-title">Git and GitHub</h2>
        </div>
        <div class="panel-body">
          <ul>
            <li>Initializing local Git repository, and create remote GitHub repositories.</li>
            <li>Tracking and committing changes with Git.</li>
            <li>Pushing a local Git repository to a remote GitHub repository.</li>
            <li>Branching a project to make multiple copies.</li>
            <li>Merging multiple Git branches back together.</li>
            <li>Cloning down a project from GitHub to my local machine.</li>
            <li class="bg-success">Publishing a website on GitHub pages.</li>
          </ul>
        </div>
      </div>

  ...

panel-with-title-section

Right now, our main panel div has two classes: panel and panel-default.

  • The first class, panel is a base class describing what type of Bootstrap element this is.

  • The second class, panel-default is a helper class describing its colors. We could change out the panel-default class for other helper classes, like panel-primary, panel-success, panel-info, panel-warning or panel-danger. Notice the words like success and info are the same we used to denote certain colors earlier too. These keywords appear throughout many different Bootstrap classes, but always refer to the same set of colors.

Let's use the panel-info class in our own site:

index.html
...

       <div class="panel panel-info">
        <div class="panel-heading">
          <h2 class="panel-title">Git and GitHub</h2>
        </div>
        <div class="panel-body">
          <ul>
            <li>Initializing local Git repository, and create remote GitHub repositories.</li>
            <li>Tracking and committing changes with Git.</li>
            <li>Pushing a local Git repository to a remote GitHub repository.</li>
            <li>Branching a project to make multiple copies.</li>
            <li>Merging multiple Git branches back together.</li>
            <li>Cloning down a project from GitHub to my local machine.</li>
            <li class="bg-success">Publishing a website on GitHub pages.</li>
          </ul>
        </div>
      </div>

...

And look! It turned blue:

blue-panel

As you can see, Bootstrap is a pretty powerful tool! With only a few extra classes, divs, and other HTML tags we can quickly transform the style and format of our pages. In the next few lessons, we'll explore additional Bootstrap elements, how to integrate our own CSS stylesheets with Bootstrap styles, and more.

As we move forward in the course, begin taking advantage of Bootstrap to quickly make professional, polished pages for all your projects.

Overview


Here's a brief overview of the Bootstrap elements covered in this lesson:

Container

A container wraps content and adds padding. We can implement a container like this:

<div class="container">
  ...
</div>

It's generally recommended to house the entirety of your <body> in a container, to provide padding to all content.

Jumbotron

A Jumbotron is a large box that can help draw emphasis to certain areas of your site. They're often used at the top of the page. We can add a Jumbotron like this:

<div class="container">
   <div class="jumbotron">
        ...
   </div>
</div>

Blockquotes

Blockquotes are used to create nicely-formatted quote blocks. We can implement them like this:

<blockquote>
   <p>"Quote here!"</p>
   <footer>Speaker here</footer>
</blockquote>

Helper Classes

Helper classes can be used to add formatting to almost any Bootstrap element. There are many different helper classes. One example is adding background color, which we can do like this:

<p class="bg-success">This text has a green background!</p>
<p class="bg-danger">This text has a red background!</p>

See the helper class documentation for more details.

Wells

Wells add a visual effect that makes content appear inset or embossed into the page. We can create a well like this:

<div class="well">
   ...
</div>

Panel

A panel wraps content in a box and offers a section for a title and a body. We can add one that doesn't include a title section like this:

 <div class="panel panel-default">
    <div class="panel-body">
    </div>
</div>

Or one that does include a title section like this:

 <div class="panel panel-default">
    <div class="panel-heading"> 
        <p class="panel-title">Title</h2>
    </div>
    <div class="panel-body">
        <p>Body content</p>
    </div>
</div>