Make stuff!

Jumbotron

Give your page an attention-grabbing header.

  • Find the header div (it has id="header").
  • Add class="jumbotron" to it.
  • Reload the page. BOOM! Done. Gold star for you:

But wait, there's more...

Make the jumbotron stretch the full width of the page (like it does on this page).

  • Move the header div to the outside of the container div.
  • Reload the page. BOOM! Done.

Give it a pretty background color.

  • Add a style section to the head of the base template (<style type="text/css">...</style>).
  • (Of course on a production web site you'd have a link to a additional external stylesheet, say custom.css, but this is nice for just playing around.)
  • Add a background rule for .jumbotron { ... }. (#7d3c75 is a nice color.)
  • You might also need to change the text color for adequate contrast with your new background (color: white;, say).
  • Reload the page.

Or give it a fancy background image.

  • Add a style section, as above.
  • Add a rule for .jumbotron like background-image: url('http://www.zastavki.com/pictures/originals/2013/Animals___Cats_Maine_coon_cat_on_a_black_background_045533_.jpg');. (Substitute in your fave image as desired.)
  • You may need to add a rule like color: white; to keep your header text readable.
  • You may also want to add a background-size: 100%; rule, or play around with the height of your jumbotron.

Having trouble? Put a sticky note on your computer!

All done? Help people with sticky notes.

Page navigation

Because everyone needs navigation menus.

  • Add an unordered list.
  • Add class="nav nav-tabs" to your list..
  • Add some links to your list.
  • Make sure the link text in each <li>...</li> item is actually a link (<a href="#">linktext</a>). The link doesn't have to go anywhere, but it needs to be an <a> element or the styles won't apply.
  • Add class="active" to the menu item representing your current page.

Need some inspiration, or a reminder of the HTML syntax for lists? You can copy-paste this: 

<ul class="nav nav-tabs">
  <li>
    <a href="#">
      Shazam
    </a>
  </li>
  <li class="active">
    <a href="#">
      Vesper
    </a>
  </li>
  <li>
    <a href="#">
      All other cats on earth
    </a>
  </li>
</ul>

But wait, there's more...

  • Use class="nav-pills" instead of class="nav-tabs".
  • Add class="nav-stacked" to either tabs or pills for a vertical menu.
  • Add class="nav-justified" to make your nav bar take the full width of the screen at desktop sizes (will stack vertically on smaller screens).
  • Add an on-click dropdown menu (see Bootstrap documentation).
  • Turn it into a nav bar (see Bootstrap documentation).

Having trouble? Put a sticky note on your computer!

All done? Help people with sticky notes.

Grid system

Orderly yet customizable layout makes everything look professional.

Bootstrap is built on a twelve-column grid system. Its responsive magic takes care of how wide each column should be on each device, including padding. It also decides when sections should be stacked vertically vs. placed side-by-side. You just decide how many columns wide each of your sections should be.

If you can count to twelve, you can make good-looking layouts.

Post-it note exercise time!

Layout examples

FYI, these will only properly explain what I mean at desktop widths - the columns need to be able to stretch horizontally so you can see how the post-its align with the sections.

Two equal-width sections

Half of 12 is 6, so each section is 6 columns across. 6 + 6 = 12.

section 1 (col-md-6)
section 2 (col-md-6)

One-quarter-width sidebar, three-quarter main content

1/4 of 12 is 3, so the sidebar is 3 columns wide. The other section is 9 columns wide. 3 + 9 = 12.

section 1 (col-md-3)
section 2 (col-md-9)

One-third-width sidebar, two-thirds-width main content

Your turn! You figure this one out. Compare notes with your neighbors and make sure you agree.

Three-section layout

Your turn again! Let's do a three-section layout. Your left and right sidebars should each be 1/4 width; your main content area should be 1/2. Compare notes with your neighbors and make sure you agree.

Central content area plus big margins

You can also add offset classes, in case you'd like wide whitespace. Offsets will add X columns of white space to the left of their element.

This presentation has a 1-column offset, then a 10-column content area. 1 + 10 = 11; the 1 column we haven't accounted for yet is white space off to the right. It works out like this:

section 1 (col-md-10 col-md-offset-1)

Extra credit: Fibonacci madness!

The golden ratio has been celebrated since antiquity as a way to make things look harmonious. All you math nerds know that the Fibonacci sequence is intimately entwined with the golden ratio. That means you can make things look cool by using Fibonacci numbers for their width!

Try altering the base template so it has five sections, whose widths are (respectively) 1, 1, 2, 3, and 5 columns. (1 + 1 + 2 + 3 + 5 = 12. Hooray!) Make sure each section has some content so you can see how they relate to the whole.

Try it yourself:

  • Find the divs with id="text" and id="image".
  • Add class="col-md-6" to each div.
  • Reload the page.
  • Resize the browser window, so you can see the layout change at different sizes.
  • Try some of the other options from our layout examples, too!.

Having trouble? Put a sticky note on your computer!

All done? Help people with sticky notes.

Responsive images

Now that you have a responsive layout, wouldn't it be sweet if your images scaled to fit, automatically?

  • Add class="img-responsive" to the image element.
  • Reload the page. Resize your browser to see the responsiveness happen.

But wait, there's more...

  • Try also adding class="img-thumbnail".
  • Or class="img-rounded" (won't work on IE8).
  • Or class="img-circle" (won't work on IE8).
  • Reload the page. Don't you look all designy?

Having trouble? Put a sticky note on your computer!

All done? Help people with sticky notes.

Back home On to more stuff