Bootstrap 4.0

Responsive, mobile-first framework

What you need today:

  • Directions - https://getbootstrap.com/
  • Browser - Chrome today please
  • Text Editor - https://atom.io/

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"

Framework
Responsive
Mobile-First

Flexible grid

 

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

Responsive

 

  • 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

Foundation

An alternate to Bootstrap

 

UI Kit

Lightweight

 

  • Requires jQuery
     
  • Minimalist look & feel
     

  • Pro version to build WP and Joomla sites
     

  • https://getuikit.com/

Erika Lee

ebigalee@indiana.edu

@ebigalee

Let's get started.

http://getbootstrap.com/

Bootstrap Workshop

By Erika Lee

Bootstrap Workshop

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

  • 562
Loading comments...

More from Erika Lee