Most web pages use just one of a handful of standard layouts.
However, wouldn’t it be great to have a single place you can go to, where you are able get any base layout you want for the page you’re creating? This is a possibility If you’re using Bootstrap, the most popular framework available, then now you can. Here.
The full source code for each layout is available on GitHub that you can copy and paste right away.
These layouts all use Bootstrap V5
One important aspect of these layouts is that none of them uses CSS beyond the native Bootstrap 5 classes, as minimizing the amount of additional CSS you use will help you in maintaining the style later on.
All layouts are fully responsive, and mobile-first. Each layout is in an iframe, served live from GitHub pages and you can see the full screen versions of each of them with examples here.
Basic Page with Header and Footer
Most pages start with this layout. A simple header at the top, a footer at the bottom and an array of sections in between.
Admin Dashboard
This layout displays a right-hand sidebar navigation suitable for an admin dashboard.
Here’s an example using a navigation toggle to demonstrate how to make the layout responsive.
Depending upon your screen size, you may need to visit the full-screen version in order to see the side bar.
Centered Content
This layout vertically and horizontally centers the main content. The content could be a login form, text banner or image.
Split Screen
The split screen layout is less common than the other layouts, but clearly demonstrates the Bootstrap 5 grid system. This layout is commonly used for login pages or signup forms.
Conclusion
This article lists 4 common layouts for HTML5 pages that you can use as a starting point for your own work. Each layout is shown inside a live iframe and linked to the the source on GitHub for easy use. You may use them however you choose, with or without attribution.
Mailing Address