Duration: 2 days

Overview:

Our Bootstrap training course is aimed at web developers who want to be able to rapidly create and deploy responsive, engaging and beautifully laid-out websites and web applications using the Bootstrap framework.

Bootstrap consists of HTML and CSS-based templates covering forms, buttons, navigation and typography, and has played a major part in the design principles of the current wave of cutting-edge websites.

Prerequisites:

Delegates should be comfortable with the fundamental principles of web design / development using HTML and CSS.

Topics:

1 - Introduction to Bootstrap

  • Goals of Bootstrap
  • Obtaining Bootstrap
  • Overview of how to use Bootstrap in a Web app

2 - The Bootstrap Grid System

  • Overview of Grids in Bootstrap
  • The role of Media Queries
  • Grid options
  • Targeting different devices (Desktop / Mobile)
  • Column techniques

3 - CSS Techniques

  • HTML5 doctype and viewport meta-tags
  • Containers
  • Responsive images
  • Normalization

4 - Typography

  • Headings
  • Inline Headings
  • Emphasis
  • Abbreviations
  • Lists
  • Additional techniques

5 - Tables

  • Displaying basic Tables
  • Striped Tables
  • Hover Tables
  • Condensed Tables
  • Contextual Tables
  • Responsive Tables
  • Additional techniques

6 - Forms

  • Overview
  • Vertical Forms
  • Inline Forms
  • Horizontal Forms
  • Form Input Controls
  • Form Control States
  • Panels

7 - Additional UI Techniques

  • Labels
  • Badges
  • Buttons and Button Groups
  • Dropdowns
  • Button Dropdowns
  • Images and Thumbnails
  • Alerts
  • Progress bars
  • Input Groups
  • List Groups

8 - Navigation

  • Tabular Navigation
  • Tabs
  • Pills
  • Dropdowns
  • Navbar
  • Breadcrumbs