Text and Icons

.blue-page-header or .page-header

In previous versions of Bootstrap, .page-header was a class that could be used to add a border to the bottom of a page header. Unfortunately his class was removed in Bootstrap 5, so it’s now part of Blue Web CSS.

Example headline

Code

<div class="border rounded p-3">
    <div class="h1 blue-page-header">Example headline</div>
</div>

Heading levels

Combined with h1-h6 elements or .h1-.h6 classes, the border width changes.

Example headline
Example headline
Example headline
Example headline
Example headline
Example headline

Code

<div class="border rounded p-3">
    <div class="h1 blue-page-header">Example headline</div>
    <div class="h2 blue-page-header">Example headline</div>
    <div class="h3 blue-page-header">Example headline</div>
    <div class="h4 blue-page-header">Example headline</div>
    <div class="h5 blue-page-header">Example headline</div>
    <div class="h6 blue-page-header">Example headline</div>
</div>

.blue-label

Code

<label for="my-form-control" class="blue-label">Name</label>
<input id="my-form-control" type="text" class="form-control" />

.blue-icon or .bi

Vertically alignment, especially for Bootstrap Icons.

Grab the code

When you don't use the entire Blue Web library, you can also just copy and paste the required code into your own project.

  1. Copy and paste the following code into your project. Source: @/dist/styles/_text-icons.scss
Edit post on GitHub