Bootstrap 4 Essential Training

Learn the essentials of Bootstrap 4. Discover how to use this popular front-end framework to quickly and easily build responsive, mobile-ready websites.

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.

Introduction

• Welcome
• What you should know
• Use the exercise files

1. Getting Started

• Introduction
• Installation options
• Creating a basic template

2. Using Basic Styles

• Basic styles overview
• Basic typography
• Typographic utilities
• Blockquotes and lists
• Using colors with Bootstrap
• Work with images
• CSS variables
• Text selection

3. Mastering Layout with Bootstrap

• Layout overview
• Using containers
• Working with rows and columns
• Multiple column classes
• Offset columns
• Nested columns
• Custom order
• Grid alignment options
• Display properties
• Flexbox container options
• Individual flex elements
• Floating elements
• Margin and padding
• Visibility
• Sizing utilities
• Using borders

4. Using Navs and Navbar Components

• Navbar overview
• Create basic navigation
• Create a navbar
• Use branding and text
• Add a dropdown to navigation
• Add form elements
• Control positioning
• Create collapsible content

5. Style Element Overview

• Basic style element overview
• Create buttons
• Button groups
• Use badges
• Progress bar styles
• List groups
• Breadcrumbs
• Shadows

6. Using Layout Component

• Layout components overview
• Add a jumbotron
• Table styles
• Basic card layouts
• Card content classes
• Card layouts
• Use the media object

7. Using Form Styles

• Form styles overview
• Create a basic form
• Checkboxes and radio classes
• Style options
• Multicolumn forms
• Create input groups
• Custom form components

8. Working with Interactive Components

• Interactive component overview
• Add tooltips
• Display popovers
• Create alerts
• Use dropdowns
• Add collapse accordions
• Use modals
• Build carousels
• Use scrollspy
• Toasts
• Spinners
• Pagination
• Stretched links
• Embeds

Conclusion

• Next steps