Home About Courses Schedule Services Webinars Contact Search

Introduction to Bootstrap

SEE SCHEDULE

Duration: 2 Days

Method: Instructor led, Hands-on workshops

Price: $1125.00

Course Code: AN1030


Audience

Web page designers who wish to use Bootstrap to enhance their websites.

Description

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

Objectives

Upon successful completion of this course, the student will be able to:

  • 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.

Prerequisites

Experience in the following is required for this Bootstrap class: •HTML •CSS •JavaScript

Topics

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