Bootstrap Development

Contact Us for Dates
2 days practical workshop for up to 12 people.
Only £790
Bootstrap provides an extremely powerful set of HTML and CSS templates that makes it almost trivial to create fluid and adaptive Web user interfaces that look great on any device. Bootstrap also promotes cross-browser compatibility, so you can focus on the UI and leave Bootstrap worry about browser nuances.

Layout

This course is a mixture of lectures and hands on exercises designed to reinforce the topics learnt

Training Course Objectives

  • How to use the Bootstrap grid system
  • Using Bootstrap CSS techniques
  • Creating adaptive HTML content
  • Bootstrap best practices

Training Course Prerequisites

  • Familiarity with HTML and JavaScript programming

Chapters

Chapter 1 Introduction to Bootstrap

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

Chapter 2 The Bootstrap Grid System

  • Overview of grids in Bootstrap
  • The role of media queries
  • Grid options
  • Recommendations for different types of device
  • Column techniques

Chapter 3 CSS Techniques

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

Chapter 4 Typography

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

Chapter 5 Tables

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

Chapter 6 Forms

  • Overview
  • Vertical forms
  • Inline forms
  • Horizontal forms
  • Form input controls
  • Form control states
  • Panels

Chapter 7 Additional UI Techniques

  • Labels
  • Badges
  • Buttons and button groups
  • Dropdowns
  • Button dropdowns
  • Images and thumbnails
  • Alerts
  • Progress bars
  • Input groups
  • List groups

Chapter 8 Navigation

  • Tabular navigation
  • Tabs
  • Pills
  • Dropdowns
  • Navbar
  • Breadcrumbs

Chapter 9 Additional Techniques

  • Helpers
  • Responsive utilities
  • Glyphicons
  • Pagination
  • Media objects
  • Using the modal plugin