Log In
Join
for free
Log In
Join
for free
Back To Course Home
Bootstrap 4 Layouts in Depth
0% completed
✨Getting Started
Course Overview
Introduction to Bootstrap
Add Bootstrap to an HTML Page
Style the Interface
Container Classes
Containers at Various Resolutions
Chapter Overview
Quick Quiz
Challenge: Couple the Containers
Solution: Couple the Containers
Grid in Bootstrap 4
Rows and Columns
Creating a Grid
Utility Classes
Chapter Overview
Quick Quiz
Challenge: Link Line Puzzle
Solution: Link Line Puzzle
Components of Bootstrap 4
Introduction
Layout with Primary Components
Hero Section
Style the Layout
Chapter Overview
Quick Quiz
Challenge: The Shoeroom
Solution: The Shoeroom
Official Bootstrap Example
Album Layout
Improve the Layout
Chapter Overview
Quick Quiz
Challenge: Wallpaper Factory
Solution: Wallpaper Factory
Cloning CSS Theme
Track the Main CSS File
Copying the Main CSS File
Trim the Unused CSS
Update the Layout
Chapter Overview
Quick Quiz
Typography-Focused Layout
Working with SCSS
Compiling SCSS with the Koala App
The Mockup and the Starter Layout
Navigation Bar
Update the Navbar
Embed Fonts into the Layout
Structure the Layout
Style the Layout
Adding Images and Text
Polishing Up Our Layout
Improving the Typography
Chapter Overview
Quick Quiz
Challenge: Coffee Café
Solution: Coffee Café
Modularize Bootstrap Layouts
Introduction to Angular
How Angular Works
Component’s Class File
Structure of an Angular Application
Angular's App Folder Operation
Inspecting the App Folder
Angular 8 Layout Completed
Chapter Overview
Quick Quiz
Challenge: Coffee Café in Angular
Solution: Coffee Café in Angular
Optimizing Official Bootstrap's Incline Theme
Building the Landing Page
Adding a Background Image
An Image is Worth a Thousand Words
Adding the Carousel Example's Main Element
Upgrade the Layout
Chapter Overview
Quick Quiz
Challenge: Styled Watch
Solution: Styled Watch
Airbnb Clone Layout in Bootstrap 4
Planning Our Layout’s Structure
Cards with Input Fields
Datepickers, Dropdowns, and Host Card
The Testimonials Section
Rebuilding the Traveling with Airbnb Section
Home page
Traveling and Footer Section
Chapter Overview
Challenge: Drone Store
Solution: Drone Store
Shopify Clone Layout in Bootstrap 4
The Navbar
Hero Section
Signup Form
Showcase Section
Support Section
Merchant and Signup Section
Footer Section
Chapter Overview
Challenge: Bakery Store
Solution: Bakery Store
Conclusion
What's Next?
Appendix
Register a New Account on GitHub
Track a Repository
Publish the Repository
Committing to the Repository
Solution: Drone Store
The solution to the challenge.
We'll cover the following
Solution
Source code
Explanation
Solution
Get hands-on with 1200+ tech skills courses.
Start Free Trial