Bootstrap 4 Layouts in Depth

Through interactive lessons, you will learn Bootstrap 4. It gives you a quick and easy way to grasp the features of Bootstrap 4.

Beginner

96 Lessons

28h

Certificate of Completion

Through interactive lessons, you will learn Bootstrap 4. It gives you a quick and easy way to grasp the features of Bootstrap 4.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

89 Playgrounds

8 Quizzes

This course includes

89 Playgrounds

8 Quizzes

Course Overview

This course provides detailed guidance of the web layout design process using the Bootstrap 4 framework. You’ll begin with an in-depth overview of layout design using Bootstrap 4 framework. Then, you’ll learn to build layouts using the Bootstrap grid, utilizing the Bootstrap rows and responsive columns. Next, you’ll use Bootstrap components like breadcrumb, carousel, card, and jumbotron as well as copy features from one layout and use them in another. Then, you’ll customize a layout with the help of CSS pr...Show More

What You'll Learn

A working knowledge of creating web layouts using Bootstrap 4 framework

Familiarity with Bootstrap grids and Bootstrap components, including breadcrumb, carousel, card, and jumbotron

The ability to modularize the layouts using the Angular framework

Hands-on experience of creating layout clones of popular websites like Airbnb and Shopify

What You'll Learn

A working knowledge of creating web layouts using Bootstrap 4 framework

Course Content

✨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

6 Lessons

Typography-Focused Layout

15 Lessons

Modularize Bootstrap Layouts

11 Lessons

Optimizing Official Bootstrap's Incline Theme

9 Lessons

Airbnb Clone Layout in Bootstrap 4

10 Lessons

Shopify Clone Layout in Bootstrap 4

10 Lessons

Conclusion

1 Lesson

Appendix

4 Lessons

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Looking for something else?

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath