Scaffolding

What is Bootstrap

Bootstrap is an Open Source product from Mark Otto and Jacob Thornton who, when initially released were both employees at Twitter. There was a need to standardize the front end toolsets of engineers across the company. In the launch blog post, Mark Otto introduces the project like this:

In the earlier days of Twitter, engineers used almost any library they were familiar with to meet front-end requirements. Inconsistencies among the individual applications made it difficult to scale and maintain them. Bootstrap began as an answer to these challenges and quickly accelerated during Twitter’s first Hackweek. By the end of Hackweek, we had reached a stable version that engineers could use across the company.

— Mark Otto
https://dev.twitter.com/blog/bootstrap-twitter

Since Bootstrap launched in August, 2011 it has taken off in popularity. It has evolved away from being an entirely CSS drivin project to include a host of Javascript plugins, and icons that go hand in hand with forms and buttons. At its base, it allows for responsive web design, and features a robust 12 column, 940px wide grid. One of the highlights is the build tool on [Bootstrap’s](http://getbootstrap.com) website where you can customize the build to suit your needs, choosing what CSS and Javascript features that you want to include on your site. All of this, allows front-end web developement to be catapulted forward, building on a stable foundation of forward-looking design, and developement. Getting started with Bootstrap is as simple as dropping some CSS and Javascript into the root of your site.

Starting a project new, Bootstrap comes comes with a handful of useful elements to get you started. Normally, when I start a project, I start with tools like Eric Meyer’s CSS reset, and get going on my web project. With Bootstrap, you just need to include the bootstrap.css CSS file, and optionally the bootstrap.js Javascript file into your website and you are ready to go.

Bootstrap File Structure

 bootstrap/
	├── css/
	│   ├── bootstrap.css
	│   ├── bootstrap.min.css
	├── js/
	│   ├── bootstrap.js
	│   ├── bootstrap.min.js
	├── img/
	│   ├── glyphicons-halflings.png
	│   ├── glyphicons-halflings-white.png
	└── README.md

The Bootstrap download includes three folders: css, js, and img. For simplicity, add these to the root of your project. Included are also minified versions of the CSS and Javascript. Both the uncompressed and the minified versions do not need to be included. For the sake of brevity, I use the uncompressed during development, and then switch to the compressed version in production.

Basic HTML Template

Normally, a web project looks something like this:

Basic HTML Layout

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 101 Template</title>
	</head>
	<body>
		<h1>Hello, world!</h1>
	</body>
</html>

With Bootstrap, we simply include the link to the CSS stylesheet, and the Javascript.

Basic Bootstrap Template

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 101 Template</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<h1>Hello, world!</h1>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

Note	NOTE Don’t forget the HTML 5 Doctype. By including <!DOCTYPE html>, all modern browsers are put into standards mode.

Global Styles

With Bootstrap, a number of items come prebuilt. Instead of using the old reset block that was part of the Bootstrap 1.0 tree, Bootstrap 2.0 uses Normalize.css, a project from Nicolas Gallagher that is part of the HTML5 Boilerplate. This is included in the Bootstrap.css file.

In particular, these default styles give special treatment to typography and links.

margin has been removed from the body, and content will snug up to the edges of the browser window.
background-color: white; is applied to the body
Bootstrap is using the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographic base. This allows the height of headings, and other content around the site to maintain a similar line height.
Bootstrap sets the global link color via @linkColor and applies link underlines only on :hover

Note	Remember, if you don’t like the colors, or want to change a default, this can be done in the you can change globals in any of the .less files. For this, update the scaffolding.less file, or overwrite colors in your own stylesheet that have on the site.

Default Grid System

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, for example, on tablets and smaller devices the columns become fluid and stack vertically. At the default width, each column is 60 pixels wide, offset 20 pixels to the left.

Figure 1. Default Grid

Basic grid HTML

To create a simple layout, create a container with a div that has a class of '.row', and add the appropriate amount of '.span*' columns. Since we have 12-column grid, we just need to have the amount of '.span*' columns add up to twelve. We could use a 3-6-3 layout, 4-8, 3-5-4, 2-8-2, we could go on and on, but I think you get the gist.

Basic Grid Layout

<div class="row">
  <div class="span8">...</div>
  <div class="span4">...</div>
</div>

In the above example, we have '.span8', and a '.span4' adding up to 12.

jsfiddle::http://jsfiddle.net/whyisjake/b3X7n/embedded/result/[width="100%", height="300px"]

Offsetting Columns

You can move columns to the right using the '.offset*' class. Each class moves the span over that width. So an '.offset2' would move a '.span7' over two columns.

Offsetting Columns

<div class="row">
  <div class="span2">...</div>
  <div class="span7 offset2">...</div>
</div>

Figure 2. Offset Grid

Nesting columns

To nest your content with the default grid, inside of a '.span*', simply add a new '.row' with enough '.span*' that add up the number of spans of the parent container.

So, let’s say that you have a two columns layout, with a span8, and a span4, and you want to embed a two column layout inside of the layout, what spans would you use? For a four column layout?

Excercise 1

Create a table that looks like this:

Table 1. ORM Employees

First	Last
Sanders	Kleinfeld
Karen	Tripp
Adam	Zaremba

Write your solution here:

First Last
Sanders Kleinfeld
Karen Tripp
Adam Zaremba

Solution

Your markup should look something like this:

.ORM Employees
[options="header"]
|=======================
|First   | Last
|Sanders | Kleinfeld
|Karen   | Tripp
|Adam    | Zaremba
|=======================

Nesting Columns

<div class="row">
  <div class="span9">
    Level 1 column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span3">Level 2</div>
    </div>
  </div>
</div>

Figure 3. Nesting Grid

jsfiddle::http://jsfiddle.net/whyisjake/EEWQ2/embedded/result/[width="100%", height="300px"]

Fluid Grid System

The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices. You can make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids. To offset, you operate in the same way as the fixed grid system works by adding .offset* to any column to shift by your desired number of columns.

jsfiddle::http://jsfiddle.net/whyisjake/327R3/embedded/result/[width="100%", height="600px"]

Fluid Column Layout

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

Nesting a fluid grid is a little different. Since we are using percentages, each '.row' resets the column count to 12. For example, If you were inside a '.span8', instead of two '.span4' elements to divide the content in half, you would use two '.span6' divs. This is the case for responsive content, as we want the content to fill 100% of the container.

Nesting Fluid Column Layout

<div class="row-fluid">
  <div class="span8">
		<div class="row">
			<div class="span6">...</div>
			<div class="span6">...</div>
		</div>
  </div>
</div>

Figure 4. Nesting Fluid Grid

Container Layouts

To add a fixed width, centered layout to your page, simply wrap the content in '<div class="container">…</div>'. If you would like to use a fluid layout, but want to wrap everything in a container, use the following: '<div class="container-fluid">…</div>'. Using a fluid layout is great when you are building applications, administration screens and other related projects.

Responsive Design

To turn on the responsive features of Bootstrap, you need to add a meta tag to the '<head>' of your webpage. If you haven’t downloaded the compiled source, you will also need to add the responsive CSS file. An example of required files looks like this:

Responsive Meta Tag and CSS

<!DOCTYPE html>
<html>
	<head>
		<title>My amazing Bootstrap site!</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="/css/bootstrap.css" rel="stylesheet">
		<link href="/css/bootstrap-responsive.css" rel="stylesheet">
	</head>

Note

Heads up! If you get started and are finding that the Bootstrap responsive features aren’t working, make sure that you have these tags. The responsive features aren’t added by default at this time because not everything needs to be responsive. Instead of encouraging developers to remove this feature, the authors of Bootstrap opted that it was best to enable it as needed.

What is Responsive Design?

Responsive design is a method for taking all of the existing content that is on the page, and optimizing it for the device that is viewing it. For example, the desktop not only gets the normal version of the website, but might get also get a widescreen layout, optimized for the larger displays that many people have attached to their computers. Tablets get an optimized layout, taking advantage of the portrait or landscape layouts of those devices. And then with phones, you can target the much narrower width of phones. To target these different widths, Bootstrap uses CSS media queries to measure the width of the browser viewport, and then using conditionals, change which parts of the stylesheets are loaded. Using the width of the browser viewport, Bootstrap can then optimize the content using a combination of ratios, widths, but mostly falls on 'min-width' and 'max-width' properties..

At the core, Bootstrap supports five different layouts, each relying on CSS media queries. The largest layout has columns that are 70 pixels wide, contrasting the 60 pixels of the normal layout. The tablet layout brings the columns to 42 pixels wide, and when narrower then that, each column goes fluid, meaning the columns are stacked vertically and each column is the full width of the device.

Table 2. Responsive Media Queries

Label	Layout width	Column width	Gutter width
Large display	1200px and up	70px	30px
Default	980px and up	60px	20px
Portrait Tablets	768px and above	42px	20px
Phones to Tablets	767px and below	Fluid columns, no fixed widths
Phones	480px and below	Fluid columns, no fixed widths

To add custom CSS based on the media query, you can either include all rules in one CSS file, via the media queries below, or use entirely different CSS files.

CSS media queries in the CSS stylesheet

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

For a larger site, you might want to separate them into separate files. In the HTML file, you can call them with the link tag in the head of your document. This is useful for keeping file sizes smaller, but does potentially increase the HTTP requests if being responsive.

CSS media queries via the link tag in the HTML <head>

<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" media="(min-width:1200px)" href="large.css" />
<link rel="stylesheet" media="(min-width:768px) and (max-width: 979px)" href="tablet.css" />
<link rel="stylesheet" media="(max-width: 767px)" href="tablet.css" />
<link rel="stylesheet" media="(max-width: 480px)" href="phone.css" />

Helper Classes

Bootstrap also includes a handful of helper classes for doing responsive development. It would be best practice to use these sparingly. A couple of use cases that I have seen involve loading custom elements based on certain layouts. Perhaps you have a really nice header on the main layout, but on mobile you want to pare it down, leaving only a few of the elements. In this scenario, you could use the .hidden-phone class to hide either parts, or entire dom elements from the the header.

Table 3. Media Queries Helper Classes

Class	Phones	Tablets	Desktops
.visible-phone	Visible	Hidden	Hidden
.visible-tablet	Hidden	Visible	Hidden
.visible-desktop	Hidden	Hidden	Visible
.hidden-phone	Hidden	Visible	Visible
.hidden-tablet	Visible	Hidden	Visible
.hidden-desktop	Visible	Visible	Hidden

Regarding mobile development, there are two major ways that you could look at doing development. The mantra that a lot of people are shouting now, is that you should start with mobile, build to that platform, and let the desktop follow. Bootstrap almost forces the opposite, where you would create a full featured desktop site that "just works".

If you are looking for a strictly mobile framework, Bootrap is still a great resource.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ch01.asciidoc

ch01.asciidoc

Scaffolding

What is Bootstrap

Bootstrap File Structure

Basic HTML Template

Global Styles

Default Grid System

Basic grid HTML

Offsetting Columns

Nesting columns

Excercise 1

Fluid Grid System

Container Layouts

Responsive Design

What is Responsive Design?

Helper Classes

Files

ch01.asciidoc

Latest commit

History

ch01.asciidoc

File metadata and controls

Scaffolding

What is Bootstrap

Bootstrap File Structure

Basic HTML Template

Global Styles

Default Grid System

Basic grid HTML

Offsetting Columns

Nesting columns

Excercise 1

Fluid Grid System

Container Layouts

Responsive Design

What is Responsive Design?

Helper Classes