Bootstrap: An Intro to Responsive Web Frameworks


Planning Information

The duration of this course is 2 Days.
Classes are priced from $790.00. See individual sessions for details.


Description

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

Prerequisites

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

Pin It on Pinterest

Share This