Bootstrap 4 Essential Training

Course details

Bootstrap—a front-end framework using HTML, CSS, and jQuery—is designed to help developers quickly and easily build responsive, mobile-ready websites that are cross-browser compatible. An open-source framework, Bootstrap features a 12-column grid and components that are ready to use. In this course, Ray Villalobos helps you get started with Bootstrap 4, providing an overview of all of the goodies in this popular framework. Ray covers the installation options, and walks through the basic styles that normalize how your content is displayed on different platforms and browsers. He also explains how to use the flexbox grid system to build nearly any kind of layout you can dream up, use different classes to easily get around your project, work with interactive components like dropdowns and carousels, and more.

Learning objectives
Creating a basic template
Reviewing basic styles and typography
Using colors with Bootstrap
Working with classes that help you deal with images
Working with grid containers
Offsetting columns
Using list groups to style lists, buttons, and links
Using breadcrumbs
Reviewing layout components
Using form styles
Working with interactive components

Concepts

0. Introduction

01 - Welcome
02 - What you should know
03 - Use the exercise files

1. Getting Started

04 - Introduction
05 - Installation options
06 - Creating a basic template

2. Using Basic Styles

07 - Basic styles overview
08 - Basic typography
09 - Typographic utilities
10 - Blockquotes and lists
11 - Using colors with Bootstrap
12 - Work with images
13 - CSS variables
14 - Text selection

3. Mastering Layout with Bootstrap

15 - Layout overview
16 - Using containers
17 - Working with rows and columns
18 - Multiple column classes
19 - Offset columns
20 - Nested columns
21 - Custom order
22 - Grid alignment options
23 - Display properties
24 - Flexbox container options
25 - Individual flex elements
26 - Floating elements
27 - Margin and padding
28 - Visibility
29 - Sizing utilities
30 - Using borders

4. Using Navs and Navbar Components

31 - Navbar overview
32 - Create basic navigation
33 - Create a navbar
34 - Use branding and text
35 - Add a dropdown to navigation
36 - Add form elements
37 - Control positioning
38 - Create collapsible content

5. Style Element Overview

39 - Basic style element overview
40 - Create buttons
41 - Button groups
42 - Use badges
43 - Progress bar styles
44 - List groups
45 - Breadcrumbs
46 - Shadows

6. Using Layout Component

47 - Layout components overview
48 - Add a jumbotron
49 - Table styles
50 - Basic card layouts
51 - Card content classes
52 - Card layouts
53 - Use the media object

7. Using Form Styles

54 - Form styles overview
55 - Create a basic form
56 - Checkboxes and radio classes
57 - Style options
58 - Multicolumn forms
59 - Create input groups
60 - Custom form components

8. Working with Interactive Components

61 - Interactive component overview
62 - Add tooltips
63 - Display popovers
64 - Create alerts
65 - Use dropdowns
66 - Add collapse accordions
67 - Use modals
68 - Build carousels
69 - Use scrollspy
70 - Toasts
71 - Spinners
72 - Pagination
73 - Stretched links
74 - Embeds

Conclusion

75 - Next steps