Demo: A Bootstrappy Smile

A very basic demo on using the Bootstrap grid system.

Scroll down...

Content

Resources

Comments

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)

Takeaways

  • 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