Bootstrap 4.0

Responsive, mobile-first framework

What you need today:

  • Directions -
  • Browser - Chrome today please
  • Text Editor -

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"


Alternatives to Bootstrap


An alternate to Bootstrap


UI Kit



  • Requires jQuery
  • Minimalist look & feel

  • Pro version to build WP and Joomla sites


Erika Lee


Let's get started.

Bootstrap Workshop

By Erika Lee

Bootstrap Workshop

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

  • 640
Loading comments...

More from Erika Lee