Bootstrap 4 Layouts: Responsive Single-Page Design

Find out how Bootstrap can transform your standard HTML websites into inspired single-page designs.

Introduction

• Creating a Bootstrap 4 layout

1. Building a Header and Footer

• Layout principles
• Coding Bootstrap navigation
• Adding styles to our project
• Making our navigation responsive
• Using spacing classes and icons
• Creating a header layout
• Using columns in our layout

2. Bootstrap Layout Components

• Using a multicolumn format
• Working with the media component
• Creating a grid of photos
• Working with carousels
• Nesting a layout
• Creating an icon layout
• Floating layout elements
• Using the card layout classes

3. Adding Interactivity

• Reusable modal templates
• Using Scrollspy
• Scrolling to a location

4. Creating Animations

• Animating our menu
• Keyframe animation
• Animating with Scrollspy

Conclusion

• Next steps