Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4/

...

/

Building a Layout with Our Micro CSS Framework

Building a Layout with Our Micro CSS Framework

Learn to build a layout with our CSS microframework.

We'll cover the following...

We’ll build a simple HTML5 and CSS3 layout using the CSS microframework we’ve built.

Adding the HTML structure

Press + to interact
<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>

Now, we need to use the CSS framework we built.

Which classes should we use to align the header, footer, and the main area?

An obvious choice would be to use our column grid and some background coloring classes to make it easy to see what’s going on with our HTML elements.

Adding the column grid and background color CSS classes to our HTML

Let’s update our HTML to this code:

At mobile resolutions, our web page will look as follows:

As we can see, a few things are missing from our layout.

The problem with the ...