Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Bootstrap 4 Essential Training

via LinkedIn Learning

Overview

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.

Syllabus

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

Taught by

Ray Villalobos

Related Courses

Reviews

Start your review of Bootstrap 4 Essential Training

Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free