Introduction to Bootstrap Training

Course duration

  • 2 days

Course Benefits

  • Learn the benefits of mobile first responsive design.
  • Learn how to use Bootstrap's predefined classes.
  • Understand how to use Bootstrap's grid system.
  • Learn to create responsive navbars.
  • Learn to style typography with Bootstrap.
  • Learn to style tables with Bootstrap.
  • Learn to style forms with Bootstrap.
  • Learn to use images with Bootstrap.
  • Learn to use the most popular Bootstrap components.
  • Learn to use an array of Bootstrap Utilities.
  • Learn to use Bootstrap Flex.
Available Delivery Methods
Public Class
Public expert-led online training from the convenience of your home, office or anywhere with an internet connection. Guaranteed to run .
Private Class
Private classes are delivered for groups at your offices or a location of your choice.
Self-Paced
Learn at your own pace with 24/7 access to an On-Demand course.

Course Outline

  1. Getting Started with Bootstrap Basics
    1. Introduction to Bootstrap 4
      1. What Is Bootstrap?
      2. What Is a Framework?
      3. What Is Responsive Design?
      4. What Is Mobile-first Design?
      5. Major Changes in Bootstrap 4
    2. Creating a Basic HTML Template with Bootstrap
    3. How to Download Bootstrap
    4. Applying Styles and Functions with Class
  2. Bootstrap Layout
    1. What Is the Viewport?
    2. Understanding Breakpoints
      1. Bootstrap's Breakpoints
      2. Introducing Bootstrap's Grid System
    3. Using Responsive Classes
      1. Containers
      2. Rows and Columns
    4. Making Grids
  3. Creating Responsive Navigation
    1. Using the nav Component
      1. nav Modifiers
      2. HTML data- Attributes
      3. The role Attribute
    2. Working with nav Modifier Classes
    3. Using the navbar Component
    4. Create a Responsive Navigation Header
  4. Bootstrap Typography
    1. How Bootstrap Updates Browser Defaults
      1. Introducing Reboot
      2. Bootstrap Default Styles
    2. Understanding rem and em
      1. em
      2. rem
      3. Headings and Paragraphs
    3. Styling Blocks With rem
    4. Styling Text Inside Blocks
      1. Inline Elements
      2. Text Utilities
  5. Tables
    1. Responsive Tables
      1. Breakpoint-specific Responsive Tables
    2. Overall Table Styles
    3. Styling Tables
    4. Table Headers
      1. The scope Attribute
    5. Contextual Classes
  6. Bootstrap Forms
    1. Browser Input Inconsistencies
      1. Form Controls
      2. Input Types
    2. Form Layout
      1. Form Groups
      2. Grid Layout
      3. Horizontal Forms
      4. Sizing
    3. Styling a Form
  7. Images
    1. Making Images Responsive
      1. Responsive CSS
      2. Using the Picture Element
    2. Aligning Images
      1. Float Classes
      2. Centering Images
    3. Figures
    4. Create a Page with Images
  8. Bootstrap Components
    1. Styling Buttons
      1. Outline Buttons
      2. Button Sizes
    2. Carousel
    3. Make a Carousel
    4. Jumbotron
    5. Alerts
    6. Collapse
    7. Modal
    8. Pagination
    9. Card
    10. Tooltip
    11. Popover
  9. Bootstrap Utilities
    1. Borders
      1. Border Colors
      2. Border Width
      3. Rounded Corners
    2. Position
    3. Shadows
    4. Spacing Utilities
    5. Misc Helpful Utilities
      1. Clearfix
      2. Close Icon
      3. Embed
      4. Screenreaders
      5. Visibility
    6. Build a Single-page Website, Part 1
  10. Bootstrap Flex
    1. What is Flexbox?
    2. Create a Flexbox Container
      1. Inline Flexbox
      2. Responsive Flexboxes
    3. The Two Axes
      1. Flex Directions
    4. Justify Content
      1. Alignment
      2. Order
    5. Build a Single-page Website, Part 2

Class Materials

Each student will receive a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this Bootstrap class:

  • HTML
  • CSS
  • JavaScript
Prerequisite Courses

Courses that can help you meet these prerequisites:

Since its founding in 1995, InterSource has been providing high quality and highly customized training solutions to clients worldwide. With over 500 course titles constantly updated and numerous course customization and creation possibilities, we have the capability to meet your I.T. training needs.
Instructor-led courses are offered via a live Web connection, at client sites throughout Europe, and at our Geneva Training Center.