Bootstrap: An Intro to Responsive Web Frameworks

Planning Information

The duration of this course is 2 Days.


Bootstrap is a free, open source responsive design framework. Bootstrap has become the tool for many web developers to built mobile-first, responsive web sites.

Web developers can save time by building onto Bootstrap’s CSS and JavaScript-based design templates for typography, forms, buttons, navigation and other interface components. 

Course Outline

1. Getting Started with Bootstrap Basics.

  • Introduction to Bootstrap
  • What Is a Framework?
  • What is responsive design?

 2. Bootstrap Layouts

  • Understanding Breakpoints
  • Introducing Bootstrap's Grid System
  • Responsive Classes
  • Containers
  • Rows and Columns

 3. Creating Responsive Navigation

  • Using the nav Component
  • nav Modifiers
  • HTML data- Attributes
  • The role Attribute
  • Exercise 4: Working with nav Modifier Classes
  • Using the navbar Component

 4. Bootstrap Typography

  • How Bootstrap Updates Browser Defaults
  • Introducing Reboot
  • Bootstrap Default Styles
  • Understanding rem and em
  • Headings and Paragraphs
  • Styling Text Inside Blocks
  • Inline Elements
  • Text Utilities

 5. Tables

  • Responsive Tables
  • Breakpoint-specific Responsive Tables
  • Overall Table Styles
  • Exercise 7: Styling Tables
  • Table Headers
  • The scope Attribute
  • Contextual Classes

 6. Bootstrap Forms

  • Browser Input Inconsistencies
  • Form Controls
  • Input Types
  • Form Layout
  • Form Groups

 7. Images

  • Making Images Responsive
  • Responsive CSS
  • Using the Picture Element
  • Aligning Images
  • Float Classes
  • Centering Images
  • Figures

 8. Bootstrap Components

  • Styling Buttons
  • Carousel
  • Jumbotron
  • Alerts
  • Collapse
  • Modal
  • Pagination
  • Card
  • Tooltip
  • Popover

 9. Bootstrap Utilities

  • Borders
  • Position
  • Shadows
  • Spacing Utilities
  • Helpful Utilities
  • Clearfix
  • Close Icon
  • Embed
  • Screenreaders
  • Visibility

 10. Bootstrap Flex

  • What is Flexbox?
  • The Flexbox Container
  • The Two Axes
  • Flex Directions
  • Justify Content
  • Alignment and Order

Intended Audience

This course is for students who are already working with HTML and CSS and want to develop a responsive, mobile ready web site using a framework.

At Completion

Upon successful completion of this course, the student will have covered the following topics:

  • Downloading and Installing Bootstrap on a local environment for testing
  • Creating a basic theme with Bootstrap
  • Using and customizing a Bootstrap navigation
  • Using Bootstrap forms, components and utilities


Before taking this course, students should be familiar with basic HTML5 and CSS3 languages.

This course is also available for private training. Please contact us at 610-321-3500 to learn more.
Register your interest now

Pin It on Pinterest