Introduction to Bootstrap Training
Course Length: 2 days
Delivery Methods:
Multiple delivery options
Course Overview
This Introduction to Bootstrap 5 course teaches students how to use the world's most popular framework for building responsive, mobile-first sites.
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 .
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.
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.
Learn at your own pace with 24/7 access to an On-Demand course.
Course Outline
- Getting Started with Bootstrap Basics
- Introduction to Bootstrap
- Understanding Mobile-first Design
- Creating a Basic HTML Template with Bootstrap
- How to Download Bootstrap
- Downloading and Linking to Bootstrap
- Applying Styles and Functions with Class
- Bootstrap Layout
- What Is the Viewport?
- Understanding Breakpoints
- Breaking Down Bootstrap’s Breakpoints
- Using Responsive Classes
- Making Grids
- Making Responsive Grids
- Creating Responsive Navigation
- Using the nav Component
- Creating Navigation
- Working with nav Modifier Classes
- Using the navbar Component
- Create a Responsive Navigation Header
- Making a Responsive navbar
- nav and navbars
- Bootstrap Typography
- How Bootstrap Updates Browser Defaults
- Understanding rem and em
- Working with rem
- Styling Blocks with rem
- Styling Text Inside Blocks
- Inline Styling
- Tables
- Responsive Tables
- Making a Table Responsive
- Overall Table Styles
- Styling Tables
- How to Style a Table
- Table Headers
- Contextual Classes
- Bootstrap Forms
- Browser Input Inconsistencies
- Viewing a Form in Different Browsers
- Form Layout
- Styling a Form
- Styling Forms with Bootstrap
- Images
- Making Images Responsive
- Using the Picture Element with Bootstrap
- Aligning Images
- Figures
- Create a Page with Images
- Creating a Page with Images
- Bootstrap Components
- Styling Buttons
- Carousel
- Make a Carousel
- Making a Carousel
- Alerts
- Collapse
- Modal
- Pagination
- Card
- Using Bootstrap Cards
- Tooltip
- Popover
- Bootstrap Utilities
- Borders
- Creating Contextual Borders
- Position
- Shadows
- Spacing Utilities
- Misc. Helpful Utilities
- Build a Single-page Website, Part 1
- Using Bootstrap Utilities
- Bootstrap Flex
- What Is Flexbox?
- Flexbox Basics
- Create a Flexbox Container
- The Two Axes
- Justify Content
- Build a Single-page Website, Part 2
- Applying Flexbox
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
Experience in the following would be useful for this Bootstrap class:
- CSS
- JavaScript
Prerequisite Courses
Courses that can help you meet these prerequisites:
Register for a Live Class
$1,150.00
Request a Private Class
- Private Class for your Team
- Online or On-location
- Customizable
- Expert Instructors
Self-Paced Course
$99.90
or 2 coupons
- On Demand 24/7
- Readings
- Presentations
- Exercises
- Quizzes
- Full Year of Access
- Learn more