HomeCoursesBootstrap 4 Layouts in Depth

Beginner

28h

Updated 1 month ago

Bootstrap 4 Layouts in Depth
Save

Gain insights into Bootstrap 4 layout design, explore grid systems, responsive columns, and components. Learn about CSS preprocessors and modular layouts with Angular to create professional designs.

Join 2.7 million developers at

Overview

Content

Reviews

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 preprocessors using the Koala app. After this, you’ll modularize the layout building process using Angular. You’ll then create Airbnb and Shopify layouts using the knowledge and experience gained in the course. By the end of this course, you’ll become an expert in creating web layouts using Bootstrap 4 and know about best practices in layout designing.

This course provides detailed guidance of the web layout design process using the Bootstrap 4 framework. You’ll begin with an i...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

A working knowledge of creating web layouts using Bootstrap 4 framework

Content

96 Lessons8 Quizzes

✨Getting Started

1 Lessons

Get familiar with Bootstrap 4 fundamentals, responsive web layouts, and Angular integration.

Course Overview

Introduction to Bootstrap

8 Lessons

Look at Bootstrap's foundational layout elements like container classes and styling utilities.

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

7 Lessons

Work your way through creating responsive Bootstrap 4 layouts using grid, utility classes, and contextual elements.

Challenge: Link Line Puzzle

Solution: Link Line Puzzle

Components of Bootstrap 4

8 Lessons

Enhance your skills in using Bootstrap 4 components to create responsive, interactive web layouts.

Introduction

Layout with Primary Components

Challenge: The Shoeroom

Solution: The Shoeroom

Official Bootstrap Example

6 Lessons

Take a closer look at customizing Bootstrap 4 layouts through practical examples and challenges.

Challenge: Wallpaper Factory

Solution: Wallpaper Factory

Cloning CSS Theme

6 Lessons

Tackle copying and optimizing CSS, updating layouts, and mastering DevTools for efficient design.

Track the Main CSS File

Copying the Main CSS File

Creating an Online CV with HTML and CSS

Project

Typography-Focused Layout

15 Lessons

Build on typography-focused layouts in Bootstrap 4 with SCSS, Koala app, and Google Fonts.

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

11 Lessons

Try out building modular Bootstrap layouts with Angular for improved efficiency and speed.

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

Build a Music Player Application Using Angular

Project

Optimizing Official Bootstrap's Incline Theme

9 Lessons

Walk through optimizing Bootstrap's Incline theme to enhance web layouts and interactivity.

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

10.

Airbnb Clone Layout in Bootstrap 4

10 Lessons

Work your way through creating an Airbnb clone layout with Bootstrap 4, emphasizing cards, forms, and responsive design.

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

11.

Shopify Clone Layout in Bootstrap 4

10 Lessons

Grasp the fundamentals of creating a Shopify clone layout using Bootstrap 4's components.

Merchant and Signup Section

Footer Section

Chapter Overview

Challenge: Bakery Store

Solution: Bakery Store

12.

Conclusion

1 Lessons

Reflect on the skills to create dynamic, responsive web layouts using Bootstrap 4.

What's Next?

13.

Appendix

4 Lessons

Follow the process of registering, tracking, publishing, and committing changes to a GitHub repository.

Track a Repository

Publish the Repository

Committing to the Repository

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Ajdin Imsirovic

Developed by MAANG Engineers

Every Educative resource is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators — subject matter experts who’ve shipped production code at scale and taught the theory behind it. The goal is to get you hands-on with the skills you need to stay ahead in today's constantly evolving tech landscape. No videos, no fluff — just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

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 Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

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!

Course

Mastering Angular Reactive Forms

The course is completely focused on practical scenarios and real-life project challenges that will teach step-by-step how to fully master Angular forms.

6 h

beginner

Course

Angular: Designing and Architecting Web Applications

Gain insights into designing scalable Angular applications. Learn about components, directives, routing, RXJS, forms, and Firebase authentication to develop rich, interactive web solutions.

20 h

beginner

Course

React Deep Dive: From Beginner to Advanced

Gain insights into React from basics to advanced, explore its ecosystem, and delve into best practices and the latest straightforward methods for efficient use.

16 h 40 m

beginner

Course

Web Development: Unraveling HTML, CSS, and JavaScript

Explore HTML, CSS, and JavaScript fundamentals. Gain insights into forms, controls, OOP in JavaScript, and key CSS patterns. Create responsive, stylized, and performant web applications.

20 h

beginner

Course

The Complete Beginner’s Guide to CSS

Gain insights into CSS to tailor web styles, layout, text, and images. Discover core CSS fundamentals, adding colors, controlling layouts, and exploring essential CSS animation functions to create professional web pages.

4 h 55 m

beginner

Course

The Complete Guide to jQuery

Gain insights into jQuery for interactive web pages with animations, event-handling, AJAX, and DOM manipulation. Explore core concepts and apply your knowledge in an interactive project with quizzes.

6 h

beginner

Course

Mastering Angular Reactive Forms

beginner

6 hour

Course

Angular: Designing and Architecting Web Applications

beginner

20 hour

Course

React Deep Dive: From Beginner to Advanced