Search⌘ K
AI Features

Building a Layout with Bootstrap 4

Explore how to build a simple yet responsive layout using Bootstrap 4. Understand adding HTML structure, applying Bootstrap classes, stretching content vertically, and using Bootstrap components like the navbar to create professional designs efficiently.

In this lesson, we’ll try to build this simple CSS layout by using the Bootstrap framework.

Adding the HTML structure

We’ll begin with the HTML structure:

HTML
<div>
<header>This is the header.</header>
<div>
<aside>This is the sidebar.</aside>
<main>This is the main content area.</main>
</div>
<footer>This is the footer.</footer>
</div>

Adding the Bootstrap 4.3.1 styles

Here’s our updated HTML code:

Here, we added ...