Demo: A Bootstrappy Smile

A very basic demo on using the Bootstrap grid system.

Scroll down...




Bootstrap is very straightforward at its core. This demo will prove that fact once and for all -- we're going to build a simple "smile" like the one in the mockup below.

The code for this is located on Github here

Bootstrap Smile Demo Mockup

The Video (32:00)


  • The pattern is always the same -- class="container" to wrap everything, then nesting pairs of class="row" and class="col-xx-yy" within.
  • Don't fight Bootstrap on margin or padding directly. If you want to reposition a column left/right yourself, either enclose the class="col-xx-yy" in a new div or put that div inside the column, then target your CSS to the new div.
Octocat 300

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Test Yourself: Bootstrap