Introduction to Bootstrap Training

This Introduction to Bootstrap 4 course teaches students how to use the world's most popular framework for building responsive, mobile-first sites.

Goals
  1. Learn the benefits of mobile first responsive design.
  2. Learn how to use Bootstrap's predefined classes.
  3. Understand how to use Bootstrap's grid system.
  4. Learn to create responsive navbars.
  5. Learn to style typography with Bootstrap.
  6. Learn to style tables with Bootstrap.
  7. Learn to style forms with Bootstrap.
  8. Learn to use images with Bootstrap.
  9. Learn to use the most popular Bootstrap components.
  10. Learn to use an array of Bootstrap Utilities.
  11. Learn to use Bootstrap Flex.
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. Popover
    11. Tooltip
    12. Exercise: Build a Single-Page Website, Part 1
  9. Bootstrap Utilities
    1. Borders
    2. Position
    3. Shadows
    4. Misc. Helpful Utilities
      1. clearfix
      2. close icon
      3. embed
      4. screenreaders
      5. visibility
  10. Bootstrap Flex
    1. What is Flexbox?
      1. Create a Flexbox Container
      2. The Two Axes
      3. Flex Directions
    2. Flexbox Utilities
      1. Justify content
      2. Alignment
      3. Grow and Shrink
      4. Margins
      5. Order
    3. Exercise: Build a Single-Page Website, Part 2
Class Materials

Each student in our Live Online and our Onsite classes receives 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:

Preparing for Class

Training for your Team

Length: 2 Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors

What people say about our training

You couldn't ask for a better online class for SharePoint End User Training. I highly recommend Webucator and will definitely use them again.
Erin Loza
Granite Construction
Trained to Last!
LCDR Brinston (Edward) Brinston
Naval Hospital Lemoore
Webucator lifted my veil of ignorance that has hung over Microsoft Excel for years.... and I even had fun!
Kevin Martin
InnerSea Discoveries
The instructor was super-friendly and willing to help those who were struggling with syntax.
Amber Schaefer
Basin Electric Power Cooperative

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

61,490

Students who have taken Instructor-led Training

11,769

Organizations who trust Webucator for their Instructor-led training needs

100%

Satisfaction guarantee and retake option

9.29

Students rated our trainers 9.29 out of 10 based on 29,331 reviews

Contact Us or call 1-877-932-8228