Twitter Bootstrap

Responsive, mobile-first framework

What you need today:

It's all about the phones.

Got Bootstrap?

  • Provides all the basics
    Translation: "Quick start"
  • Popular 
    Translation: "Huge support network"
  • Project Jumpstarter
    Translation: "Especially useful for projects that will need to exist outside of your CMS"


Flexible grid


  • 12 columns
  • Columns adjust to fit within the responsive framework
  • because hand-coding columns sucks



  • Media queries with mobile, tablet, laptop and desktop breaks
  • Images set to width: 100%;
    will change size with the grid
  • Encourages design to be built as the mobile version first, then increase in complexity for wider designs


Common components

& functionality


  • Drop-down Navigation
  • Buttons
  • Pop-ups
  • Slideshow / carousel
  • Font icons
    Also try "Font Awesome"


Let's get started.

Other Options


An alternate to Bootstrap


  • Foundation provides core functionality - no extras
  • Smaller community
  • Mobile first

  • Built with SASS


Lightweight CSS Modules 


  • CSS modules, no JS
  • Vertical default menus
  • Minimalist look & feel

  • Released 2013


By Erika Lee


Getting started with Bootstrap: an HTML5, responsive, mobile-first framework.

  • 5,288
Loading comments...

More from Erika Lee