Bootstrap 4 Layouts: Responsive Single-Page Design

Bootstrap 4 Layouts: Responsive Single-Page Design

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 3h 13m | 664 MB

Find out how Bootstrap 4 can transform your standard HTML websites into inspired single-page designs. This course takes a project-based approach to explaining how to manipulate website layouts with the Bootstrap framework. Throughout the course, instructor Ray Villalobos works through popular layout patterns, helping to acquaint you with concepts that are key to creating a cohesive layout with Bootstrap. Ray tackles Bootstrap layout classes and shows what it takes to customize its CSS, addressing layout challenges like multiple grids and columns. Learn how to leverage the Scrollspy plugin to track navigation, how to create an image carousel, and how to build animations. Plus, this course provides you with a ready-to-go template with which to start new projects.

Topics include:

  • Building a header and footer
  • Adding styles to your project
  • Making your navigation responsive
  • Bootstrap layout components
  • Using a multicolumn format
  • Creating carousels
  • Adding interactivity
  • Creating animations
Table of Contents

Introduction
1 Creating a Bootstrap 4 layout

Building a Header and Footer
2 Layout principles
3 Coding Bootstrap navigation
4 Adding styles to our project
5 Making our navigation responsive
6 Using spacing classes and icons
7 Creating a header layout
8 Using columns in our layout

Bootstrap Layout Components
9 Using a multicolumn format
10 Working with the media component
11 Creating a grid of photos
12 Working with carousels
13 Nesting a layout
14 Creating an icon layout
15 Floating layout elements
16 Using the card layout classes

Adding Interactivity
17 Reusable modal templates
18 Using Scrollspy
19 Scrolling to a location

Creating Animations
20 Animating our menu
21 Keyframe animation
22 Animating with Scrollspy

Conclusion
23 Next steps