Bootstrap 4 Essential Training

Bootstrap 4 Essential Training
Bootstrap 4 Essential Training

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 6h 32m | 2.03 GB
eLearning | Skill level: All Levels

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.

Topics include:

  • 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
+ Table of Contents

1 Welcome
2 What you should know
3 Use the exercise files

Getting Started
4 Introduction
5 Installation options
6 Creating a basic template

Using Basic Styles
7 Basic styles overview
8 Basic typography
9 Typographic utilities
10 Blockquotes and lists
11 Using colors with Bootstrap
12 Work with images
13 CSS variables

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

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

Style Element Overview
38 Basic style element overview
39 Create buttons
40 Button groups
41 Use badges
42 Progress bar styles
43 List groups
44 Breadcrumbs
45 Shadows

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

Using Form Styles
53 Form styles overview
54 Create a basic form
55 Checkboxes and radio classes
56 Size and validation styles
57 Multicolumn forms
58 Create input groups
59 Custom form components

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

74 Next steps