Introduction to Bootstrap
Overview
This Introduction to Bootstrap 4 course teaches students how to use the world's most popular framework for building responsive, mobile-first sites.
Audience
Those who want to learn Bootstrap 4 from the ground up.
Prerequisites
Experience in HTML, CSS and JavaScript.
Course duration
2 Days
Course outline
1. 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
- Exercise 1: Creating a Basic HTML Template with Bootstrap
- Exercise 2: How to Download Bootstrap
- Applying Styles and Functions with Class
2. Bootstrap Layout
- What Is the Viewport?
- Understanding Breakpoints
- Bootstrap's Breakpoints
- Introducing Bootstrap's Grid System
- Using Responsive Classes
- Containers
- Rows and Columns
- Exercise 3: Making Grids
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
- Exercise 5: Create a Responsive Navigation Header
4. Bootstrap Typography
- How Bootstrap Updates Browser Defaults
- Introducing Reboot
- Bootstrap Default Styles
- Understanding rem and em
- em
- rem
- Headings and Paragraphs
- Exercise 6: Styling Blocks with rem
- 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
- Grid Layout
- Horizontal Forms
- Sizing
- Exercise 8: Styling a Form
7. Images
- Making Images Responsive
- Responsive CSS
- Using the Picture Element
- Aligning Images
- Float Classes
- Centering Images
- Figures
- Exercise 9: Create a Page with Images
8. Bootstrap Components
- Styling Buttons
- Outline Buttons
- Button Sizes
- Carousel
- Exercise 10: Make a Carousel
- Jumbotron
- Alerts
- Collapse
- Modal
- Pagination
- Card
- Tooltip
- Popover
9. Bootstrap Utilities
- Borders
- Border Colors
- Border Width
- Rounded Corners
- Position
- Shadows
- Spacing Utilities
- Misc. Helpful Utilities
- Clearfix
- Close Icon
- Embed
- Screenreaders
- Visibility
- Exercise 11: Build a Single-page Website, Part 1
10. Bootstrap Flex
- What is Flexbox?
- Create a Flexbox Container
- Inline Flexbox
- Responsive Flexboxes
- The Two Axes
- Flex Directions
- Justify Content
- Alignment
- Order
- Exercise 12: Build a Single-page Website, Part 2
