Introduction to Bootstrap 3

  This document has been deprecated in favor of Bootstrap v4.0.0-beta. This document has been retained for archival purposes.

What is Bootstrap?

Bootstrap is a framework that is designed to make front-end development easier and faster. It is used for projects of all sizes, is cross-browser compatible and fully responsive out of the box, and is designed with a mobile-first approach.

Bootstrap contains pre-built CSS and JavaScript files and uses the jQuery library. All you need to do is to write your HTML markup keeping some Bootstrap structural considerations in mind, and use the predefined Bootstrap CSS classes.

Bootstrap is open source under the MIT license, which means it's free for you to use in your projects. If interested, take a closer look at the licence here: http://getbootstrap.com/getting-started/#license-faqs

"A super small group of developers and I got together to design and build a new internal tool and saw an opportunity to do something more. Through that process, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to document and share common design patterns and assets within the company."

Mark Otto - Twitter Developer

What are Frameworks?

A framework, in the web development world, is a pre-written package of files, folders and standardized code that are used as a foundation upon which a site or app can be built. Frameworks provide a standardized, pre-built structure so developers don't have to build everything from scratch each time, and can reuse the code provided. Frameworks allow us to cut out much repetitive work and save time.

There are back-end and front-end frameworks. Back-end frameworks address the application layer - the logic, data, and operation of the site/app. Laravel is a PHP framework, for example. Ruby on Rails is a Ruby framework. Django is a Python framework.

Front-end frameworks address the presentation layer of a project - the HTML, CSS, and JavaScript. Bootstrap is a front-end framework.

How to Add Bootstrap to your Project

The simplest way to load Bootstrap into a project is to link to the Bootstrap files via a CDN - a Content Delivery Network. A CDN is a large, distributed network of servers that will deliver web content to your end-users for you. When using a CDN to load Bootstrap, you do not need to download and host the required Bootstrap files inside your project.

Use CDN links for loading Bootstrap on your PWP. For our capstone projects we will be managing all of our dependencies, including Bootstrap and jQuery, using NPM and Webpack.

Basic Template

Use this template as a starting point for building your Bootstrap pages. The example below includes all the required files, libraries, and dependencies that you need to get started using Bootstrap for your PWP and other simple projects.

Refer to the Bootstrap documentation here: http://getbootstrap.com/

Copy/pastable links to the Bootstrap CDN files can be found here: BootstrapCDN

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 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">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Font Awesome -->
    <link type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

    <!-- Custom CSS Goes HERE -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery - required for Bootstrap Components -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous""></script>

    <title>Bootstrap 3.3.7 Basic Template</title>
  </head>
  <body>
    <h1>Hai Bootstrap!</h1>
  </body>
</html>

The Bootstrap Template Tags in Detail

<html lang="en">

Declares the language of the web page (English in this case). This assists search engines and browsers. Change this if necessary.

<meta charset="utf-8" />

Tells the browser that the page is written in UTF-8 unicode. This is for internationalization.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

This tag is for Internet Explorer, and it allows us to specify what version of IE to render page in. "IE=edge" tells IE to display our content in the highest mode available, which avoids "IE Compatibility Mode" bugs.

<meta name="viewport" content="width=device-width, initial-scale=1" />

This is the responsive meta tag. This is used to scale and size our content relative to the "viewport" - which is essentially is the visible portion of screen itself. This tag also sets the inital zoom scale to 1:1. This <meta> tag is required when creating a responsive web site.

<!-- Bootstrap 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" />

This loads our Bootstrap CSS file directly from maxcdn.

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />

This tag is optional. It loads the default Bootstrap theme directly from maxcdn.

<!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

This is an HTML Conditional Comment. These are conditional statements that are read and executed only by Internet Explorer versions 5 - 9, and are now officially deprecated. We use this block of code to serve up a couple fo specific JavaScript files just for users of older versions of IE. Here, we will load html5shiv.js and respond.js in IE 8 and below. Respond.js enables CSS media query support for IE 6-8. HTML5 shiv enables styling of HTML5 elements in IE8 and below. (IE8 and below does not allow unknown elements to be styled without JavaScript.)

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

This loads the jQuery JavaScript library from Google's CDN. jQuery required for many of Bootstrap's built-in functionality.

<!-- Latest compiled and minified Bootstrap JavaScript, all compiled plugins included -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

This is Bootstrap's JavaScript file, which is required if you want to feature many of Bootstrap's built-in components such as modal windows, dropdown menus, and transitions. This file, which is being directly loaded from maxcdn, includes all the Bootstrap components.

Using Bootstrap

Getting Started

Start with the Basic Bootstrap Template we provided above. Be sure your content is wrapped in a <div> (or other semantic HTML5 element such as a <main> tag) that has a class of "container" or "container-fluid". Do not nest an element with a container class inside one with a container class. Bootstrap container classes already have padding applied to them, so nesting these "containers" can throw your layout off.

Bootstrap Container Classes:

  • .container A responsive fixed-width container.
  • .container-fluid A responsive full-width container, that spans the width of the viewport.

Intro to the Grid System

Bootstrap Official Documentation: Bootstrap Grid System

Using pre-defined Bootstrap CSS classes, you can lay out your page elements based upon a 12-column grid. The 12 columns span the width of the Bootstrap container (either .container-fluid or .container), and the column sizes will scale based upon the size of the viewport. Bootstrap columns also automatically include margins and padding, so as long as your HTML is well-structured and Bootstrap classes have been applied appropriately, your layout process should be easy. The Bootstap grid system is CSS driven, fully responsive, and cross-browser compatible.

Bootstrap Grid Method Simplified:

  1. Inside your container, create a row. <div class="row"></div> creates a horizontal group of columns. Up to 12 "columns" can fit in a "row".
  2. Inside this row, place some columns. Columns are containers for content that can span 1-12 vertical divisions of the container.
  3. Create additional rows, inside the same container, that house your content going down the page.

Example:

<body>
  <div class="container">

    <div class="row">
      <div class="col-md-6"> Column One: 6/12 columns, 50% of container width. </div>
      <div class="col-md-6"> Column Two: 6/12 columns, 50% of container width. </div>
    </div>

    <div class="row">
      <div class="col-md-4"> Column Three: 4/12 columns, 33.33% of container width. </div>
      <div class="col-md-4"> Column Four: 4/12 columns, 33.33% of container width. </div>
      <div class="col-md-4"> Column Five: 4/12 columns, 33.33% of container width. </div>
    </div>

  </div>
</body>

Here are the Bootstrap Grid System Rules:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Pre-defined grid classes like .row and .col-md-4 are available for quickly making grid layouts.
  • Columns create gutters (gaps between column content) via padding.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-md-4.
  • More than one Grid Class can be applied to an element.
  • If more than 12 columns are placed within a single row, extra columns will, as one unit, wrap onto a new line. (This is not desirable.)

@media Queries and Breakpoints

Media (or @media) queries are a part of CSS3, and allow you to filter CSS rules based on viewport size, among other criteria. Bootstrap's responsive behavior is driven by @media queries written in the bootstrap.min.css file.

Media queries do not "sniff" for a type of device, but rather detect the capabilities or attributes of a device, such as viewport width. We need the <meta> viewport tag in our HTML <head> to ensure that the @media queries work correctly.

Media queries can check for things like:

  • browser width and height
  • device width and height
  • orientation: landscape or portrait
  • screen resolution
  • ...and more.

@media queries consist of a media type followed by an expression. See the basic syntax below:

@media screen and (min-width:768px) {
   // Your CSS rules go here...
}

All the necessary @media queries for a fully responsive site are pre-defined and included with Bootstrap.

There are four key "breakpoints" built into Bootstrap that contain rules governing how the grid system should be displayed for each screen size:

/* XS - Extra small devices (phones, less than 768px) */
/* No media query is written for this size because it's the Bootstrap default. Our starting point. */

/* SM - Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* MD - Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* LG - Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Bootstrap Grid Classes

Recall that the built-in Bootstrap Grid System will provide the structure in which we will lay out our pages.

container
   ⤷ row
      ⤷ column
         ⤷ content

Also recall that by applying pre-defined Bootstrap classes to our HTML elements, we can set them to a specific column width.

For Example:

<div class="row">
   <div class="col-md-6"> Column One: 6/12 columns, 50% of container width. </div>
   <div class="col-md-6"> Column Two: 6/12 columns, 50% of container width. </div>
</div>

The pre-defined Bootstrap grid classes used to set column widths are prefixed as follows:

  • .col-xs-*
  • .col-sm-*
  • .col-md-*
  • .col-lg-*

Replace the * with the number of columns, 1-12, that you want the element to span. Bear in mind that an element can have more than one grid class applied to it.

In the above prefixes, you can also see a two-letter reference to a Bootstrap breakpoint: xs, sm, md, and lg. This way, you can create elements that have varying column widths for different Bootstrap breakpoints. Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes.

This means that <div class="col-sm-12 col-md-6"></div> will be 12 columns wide on XS and SM screens, and will be 6 columns wide on MD and LG screens. Bootstrap always scales up from the smallest breakpoint (screens less than 768px wide).

Simple Responsive Layouts

Using just the .col-md-* grid classes, you can create a basic responsive layout where columns start out full-width and stacked vertically on mobile devices and tablets (the XS-SM breakpoints), then becoming horizontal on desktop screens (MD - LG breakpoints, 992px wide and up). See the following example: Bootstrap Basic Grid Example.

Refer to the official Bootstrap documentation here: Bootstrap Grid Options

Contextual Classes

Bootstrap has classes available that are contextual, and can be applied to many elements such as tables, alerts messages, and list groups.

For Text:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger

For Buttons:

For Tables:

Contextual classes can be applied to <tr> and <td> tags.

.active .success .warning .danger .info

Tables

Be sure to add the base class of .table to the <table> tag, to enable the built-in Bootstrap table styles. Other available Bootstrap table classes include:

  • .table-striped
  • .table-bordered
  • .table-hover
  • .table-condensed

Responsive Tables:

Create tables that scroll horizontally on xs screens by wrapping any table in a <div> with a class of .table-responsive

Fancy Bootstrap Table
Column One These are the voyages of the Starship Enterprise. Its continuing mission, to explore strange new worlds, to seek out new life and new civilizations...
Column Two These are the voyages of the Starship Enterprise. Its continuing mission, to explore strange new worlds, to seek out new life and new civilizations...
Column Three These are the voyages of the Starship Enterprise. Its continuing mission, to explore strange new worlds, to seek out new life and new civilizations...

Images

Add the class .img-responsive to images to make them responsive.

placekitten

You can create rounded, circular, and thumbnail images using the classes: .img-rounded, .img-circle, and .img-thumbnail. Documentation here: Bootstrap Image Shapes.

Video & Responsive Embeds

Apply the classes .embed-responsive and .embed-responsive-item to <iframe>, <video>, <embed>, and <object> tags to scale these items to the size of their container. You can also set a specific aspect ratio that will automatically scale on any device. Examine the source code for the video embed below. Documentation: Bootstrap Responsive Embed

<div class="row">
  <div class="col-md-4 col-md-offset-4">
    <p class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/dQw4w9WgXcQrel=0" allowfullscreen></iframe>
    </p>
  </div>
</div>

Navigation Bars

Navigation menus generally consist of a list of specifically styled links inside a <ul>.

Here is some simple boilerplate code to help you get started in creating a main navigation bar using Bootstrap. This navbar automatically collapses and hides the links under a mobile toggle menu on small screens. For a more detailed example, with additional functionality, refer to the documentation here: Bootstrap Navbar

Additional navbar examples: Bootstrap Navbars in Action

Example:

Code:

<nav class="navbar navbar-inverse">
  <!-- logo and mobile toggle button get grouped together for better mobile display -->
  <div class="navbar-header">
    <!-- this is the mobile menu button -->
    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-menu">
      <span class="sr-only">main menu</span>
      <span class="glyphicon glyphicon-menu-hamburger"></span>
    </button>
    <a class="navbar-brand" href="#">Your Logo/Text Here</a>
  </div>

  <!-- here are your main nav links, grouped for toggling -->
  <div class="collapse navbar-collapse" id="main-menu">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Home</a></li>
      <li><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
    </ul>
  </div>
</nav>