Links

Navigation to come soon, for now, here are some links:

Collapsible Navigation Bar
Pagination

This is the first line inside the JUMBOTRON! Whoo!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At beatae omnis quidem, totam aperiam! Nemo amet voluptas laudantium, praesentium autem ut cupiditate unde molestias? Praesentium voluptates voluptatibus necessitatibus reprehenderit numquam!

Buttons

Let's talk buttons:
btn btn-default btn-lg

Link

Button Notes:

You can get rid of the "btn" if you want a specific size like btn-xs or btn-lg
If you want to style a particular kind of button, style the btn-primary, btn-success, etc, not "btn"
The one that says "Value field" is actually an input tag with type="button"
Each of the buttons are deliberately on a new line

Column 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem deserunt voluptates debitis, id. Tenetur impedit, corporis minus dolorem id a quibusdam voluptatum ducimus voluptates nisi officiis, mollitia, sequi labore nobis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum dolorem sint ipsum quas, porro quibusdam nam esse praesentium, assumenda magnam officiis perferendis et cupiditate totam deleniti numquam saepe nesciunt quis!

Column 2

Column 3

Column 4

Column 1

This div is part of class "collapse in" so that it shows as the default. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, quaerat, magnam. Amet hic vero magni tempora cumque, doloribus tempore natus aliquid, perferendis voluptatem iure! Earum vitae nulla provident aut mollitia.

Column 2

Quisque rutrum augue odio, eu placerat diam bibendum id. Donec at fringilla leo, non varius magna. Vestibulum finibus, lacus at gravida condimentum, tellus mauris imperdiet orci, a pretium justo nulla sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia.

Column 3

Pellentesque vulputate faucibus leo, non blandit ante faucibus maximus. Nunc non neque laoreet, tincidunt nisl et, tristique odio. Nullam imperdiet sollicitudin neque malesuada ornare. Curabitur ultrices urna id gravida lacinia. Nunc eu neque vitae nisi luctus rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac.

Screen < 768px

Screen >= 768px and < 992px

Screen >= 992px and < 1200px

Screen > 1200px

	Average	RBIs	Homeruns
Best Baseball Players
Hank Aaron*	.305	2297	755
Babe Ruth*	.342	2214	714
Barry Bonds	.298	1996	762

Table notes:

all table classes are in the actual table element, not the div.
The table above is in a container with .col-md-6 AND .col-md-offset-6 which pushes the table over 6 columns.

At md or bigger, the table is 6 columns over. At the sm and xs sizes, it takes up the entire 12 columns.

class "table-bordered" puts the border around the table.
class "table-striped" gives it that white and grey alternating look
class "table-hover" highlights the row when hovering over an item in the table
For the "Best Baseball Players" header, use 'colspan="4"' to indicate 4 columns
We can give items the class "text-center" to center the text

Around 22:00, Derek downloads the Bootstrap source and customizes the CSS. Instead of doing that, I created a separate stylesheet and will be changing the styling using that.

H1 Jumbotron

H2 Jumbotron

H3 Jumbotron

H4 Jumbotron

The Carousel

Amazing Backgrounds

Thousands of Backgrounds for Free

Get them Now

Thousands of Colors

Every Color you can Imagine

Amazing Illustrations

And they are All Free

Carousel Notes

Here is the div and element breakdown for the carousel:

Div with id (specific to carousel), classes ('carousel', 'slide'), and data-ride ('carousel'); I don't know what data-ride is.

Ordered List which is the number of slides in your carousel. They each have special properties like 'data-target' which is equal to the id of your carousel div above AND 'data-slide-to' equal to the slide number. Slide 0 is the first slide. You can also add the "active" class to slide 0.
Div with class="carousel-inner"

Div with class="item"

The image. In the above example, it is a Div class="slide#" => slide1, slide2, etc. are class names given by Derek.
Div class="carousel-caption"

Links (<a>) with class="carousel-control" and either left or right classes.

In the above example, slide1, slide2 and slide3 classes are used by Derek, they aren't Bootstrap classes. They contain the background images for my carousel.

Glyphicons

Normal glyphicon:
Link element button with glyphicon: Trash
Button element button with glyphicon:

Wells

In a "well"

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum enim, quod porro tenetur modi quis non ratione iusto saepe, minus praesentium, ut sunt? Consequuntur sint, blanditiis natus commodi quo dicta?

NOT in a "well"

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, obcaecati, inventore. Asperiores ad a hic, maiores, cumque neque quos consequatur numquam adipisci pariatur necessitatibus. Voluptatibus perspiciatis nesciunt tempora cumque atque.

Notes

img-responsive makes it no bigger than the width of the page
img-circle gives it the circular or oval look
img-rounded gives it the rounded borders
you can have it sit left or right depending on "pull-left" or "pull-right"
Q - How do I make pictures smaller if they are huge?

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Duis aute irure dolor

In reprehenderit

In voluptate velit

Esse cillum dolore eu

Fugiat nulla pariatur

Dropdown Menu

Your Name

Menu Bars

Horizontal Menus with Dropdown

Vertically Stacked Menus with Dropdown

Tabbed and Pill Interfaces

Superman is a fictional superhero appearing in American comic books published by DC Comics.

Batman is a fictional superhero appearing in American comic books published by DC Comics.

The Flash is a fictional superhero appearing in American comic books published by DC Comics.

Kid Flash is a fictional superhero appearing in American comic books published by DC Comics.

Collapsible Navigation Bar

Collapsible Nav Notes:

The button, right under navbar-header, is what shows up when the screen width gets small.
I don't necessarily need to be able to do this from memory...he copied and pasted the biggest chunk of that.

Pagination