Bootstrap Basics

What is Bootstrap?

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap is a set of pre-determined styles and media queries that can instantly convert your site to be responsive across mutliple screen types.

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

Bootstrap is a front end framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Getting Started in Bootstrap

To begin a bootstrap page, we start just as we would any other HTML page: with a DOCTYPE and html tag set. To help the Bootstrap framework operate at maximum efficiency, we also need to include 3 meta tags in the head before any other content:

<!DOCTYPE html>
<html lang='en'>
  <head>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

As described above, Bootstrap is a framework. So, to use Bootstrap, we must first access the tools. There are two ways to do this:

  1. Access the online CDN(Content Delivery Network): This is an up to date version of the framework available anywhere with an internet connection. Utilizing the CDN is a great choice for developers who develop on the web and plan on using the basic version of Bootstrap. One upside of using a CDN is decreased page loading times as the CDN version of the framework may already exist in the users cache.

    <!-- Latest compiled and minified CSS -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>

<!-- Latest compiled and minified JavaScript -->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js'></script>
    The CSS link must be included in the head of each page in the site. The JavaScript link is ususally included at the bottom of the page to decrease page loading times.

  2. Download Bootstrap: By downloading the framework, developers have a local version in which they can make changes. A local version also allows programmers to develop without an internet connection. The downside of using a local version is that the loading time of your pages may be longer as the local version, most likely, will not be in the users cache.

    <!-- Latest compiled and minified CSS -->
<link rel='stylesheet' href='local/relative/path/bootstrap.min.css'>

<!-- Latest compiled and minified JavaScript -->
<script src='local/relative/path/bootstrap.min.js'></script>

Themes and Templates

There are many ways to customize your pages, both in design and layout. The optional theme is the fastest way to alter the look/feel of your Bootstrap site. There are many tools available online that will assist developers in creating custom themes that can be downloaded and included.

Templates typically indicate a set of html tags with classes in them that provide a standard layout for a page. When using a template, one typically downloads (or copy/pastes) the full html into a page of their own. This provides a starting point for a page by supplying an unpopulated layout.

Themes are indicitive of a color scheme to be used on a page. Neither are necessary for Bootstrap to work, but do take a lot of the guesswork out. To use a theme, link the online or local .css file following the standard bootstrap stylesheet. Being that the new theme is closer to the content, any styles in the theme will override the standard bootstrap styles. In addition, you can use personally created internal/external style sheets to override the theme as well and really personalize your content. In the example below, the standard bootstrap theme is overridden by the Cerulean theme. Then, the background color of the page is overridden using an internal style. 

<!-- Latest compiled and minified CSS -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

<!-- Optional theme -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/cerulean/bootstrap.min.css'>

<style>
	body{background-color:gray;}
</style>

Breakpoints and Grids


Bootstrap sets its media queries to the following breakpoints:
Containers - All content within a Bootstrap document must be placed in a container. These containers help wrap content and work with the grid system. The class container provides a fixed width container (expanding at break points) while the container-fluid allows the content to span the full width of the window. The easiest way to accomplish this is to create a div inside the body that applies a container class. 

<body>
	<div class='container'>
		...
	</div>
	...
Grid System - The grid system uses classes to allow programmers to develop different looks on different devices. The basic idea is that the grid (think like a table) can have a total of 12 columns across. Columns get delineated by rows, just like in a table, except this is all done through div with class names. So a standard 3 column table may look like this: 

<div class='row'>
	<div class='col-xs-12 col-md-4'>Column 1</div>
        <div class='col-xs-12 col-md-4'>Column 2</div>
        <div class='col-xs-12 col-md-4'>Column 3</div>
</div>
The above code sets the grid up to be evenly split in one row on a desktop, but stacked on a phone.
Note the use of multiple classes within the class attribute. While this may be the first time seeing this type of code, it can be applied on a variety of levels. For example, if a designer has an underline class and a red class, they could turn text underlined and red using 

<div class='underline red'>text</div>
Usage of multiple classes on elements will be a common practice in bootstrap.