Bootstrap

Bootstrap Scaffolding

  • Mobile first design
  • Why Bootstrap?
  • Including Bootstrap
  • Customizing install
  • Responsive Design
  • The “container” class
  • How Grids work in Bootstrap
    • Grid classes (.col-xs-, .col-sm-, .col-md-, .col-lg-)
    • Adding offsets to columns
    • Pushing and pulling columns
    • Nesting columns
  • Navigation components
    • Navs
    • Navbars
  • Jumbotron component

Page Components

  • Headers
  • Panels
  • ListGroup
  • Breadcrumbs
  • Labels
  • Buttons
  • Glyphicons (with buttons, toolbars and form inputs)
  • Wells

Page Components: Forms

  • Creating forms
  • Inline and horizontal forms
  • Form validation

Bootstrap Plugins

  • Alert Messages
  • Buttons and button groups
  • ScrollSpy
  • Tabs
  • Collapse
  • Carousel
  • Modal

Extending Bootstrap with Custom Plugins

  • Bootbox.js
  • DateTime Picker
  • Font Awesome
  • Off-Canvas
  • Image Gallery
  • Social Buttons
  • SweetAlert
  • Yamm3 Mega Menu

Under the Hood and More Practice

  • Reviewing the Bootstrap CSS source code
  • Building another Bootstrap web page from scratch