The home pages for sites such as Center for Open Science and Enertiv illustrate a “color blocked” design pattern where the background color is used to separate the sections of the site.
This is simple to implement.
First, create a style.css file with classes similar to this:
.grey-background {
background-color: lightgray;
height: 200px;
}
.white-background {
background-color: whitesmoke;
height: 200px;
}
.black-background {
background-color: black;
color: whitesmoke;
height: 200px;
}
.grad-background {
background: url('gradbackground.png') no-repeat center center fixed;
background-size: cover;
height: 200px;
}
.colorblocktop {
padding-top: 20px;
}
The height attribute is optional but useful if you want a consistent height across all blocks. If you simply want consistent padding around your content with variable heights, you can delete the height attribute and (for example) add a padding-bottom attribute to the colorblocktop class.
In the HTML file, your outermost div elements should set the color. Note that any Bootstrap 5 container classes should be inside these divs. For example:
<div class="grey-background">
<div class="container colorblocktop">
<h1>Bootstrap 5 Color Block</h1>
<p>Welcome to a sample page formatted using Bootstrap 5.</p>
</div>
</div>
<div class="white-background">
<div class="container colorblocktop">
<h1>Bootstrap 5 Color Block</h1>
<p>Welcome to a sample page formatted using Bootstrap 5.</p>
</div>
</div>
<div class="black-background">
<div class="container colorblocktop">
<h1 style="color: whitesmoke">Bootstrap 5 Color Block</h1>
<p>Welcome to a sample page formatted using Bootstrap 5.</p>
</div>
</div>
<div class="grad-background">
<div class="container colorblocktop">
<h1>Bootstrap 5 Color Block</h1>
<p>Welcome to a sample page formatted using Bootstrap 5.</p>
</div>
</div>
Finally, note that when you have a dark background, you may have to manually tweak the font color. For example, the black-background class sets the color attribute to whitesmoke, but this does not affect the h1 text, so a style parameter is added to set the color of the h1 explicitly.
Source code: https://github.com/ics-software-engineering/bootstrap-5-color-blocking
Here’s a short screencast reviewing this approach: