Additional utility classes

Bootstrap already comes with a bunch of utility classes. Blue Web adds some additional to them.

.m-last-0:last-child

Sets margin: 0 to last child. Useful for creating a gap between items together with mb-3. Inspired by Tailwind CSS class last:m-0.

.blue-empty-message

Shows empty message if the element has no children. Can be used for lists and such. For localization you should override CSS variable --message dynamically.

Code

<div class="blue-empty-message"></div>

.blue-contain-paint

Fixing border radius clipping.

Child background destroys border radius of parent. ☹️
Much better! 🥳

Code

<div class="border border-primary rounded-5 mb-3">
    <div class="text-bg-danger p-3">Child background destroys border radius of parent. ☹️</div>
</div>
<div class="border border-primary rounded-5 blue-contain-paint">
    <div class="text-bg-success p-3">Much better! 🥳</div>
</div>

We automatically add it to Bootstrap’s .card.

My card

Code

<div class="card">
    <header class="card-header">My card</header>
    <div class="text-bg-success p-3"></div>
</div>

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/_utils.scss
Edit post on GitHub