Pro

Bootstrap Glow

Add color glow around an element

Overview

Add stylish glow around an element by adding .glow class to element with background-color. Glow color will be automatically inherited from the element’s background color. Or add .glow-{color} to set color manually.

Examples

Inherited glow color

Examples of .glow where the color is inherited from elements background color. Because the .glow class uses ::before pseudo element to create a glow, any background color can be used.

Primary Secondary Success Danger Warning Info Light Dark Grey Olive Maroon Navy
<span class="p-2 bg-primary glow">Primary</span>
<span class="p-2 bg-secondary glow">Secondary</span>
<span class="p-2 bg-success glow">Success</span>
<span class="p-2 bg-danger glow">Danger</span>
<span class="p-2 bg-warning glow">Warning</span>
<span class="p-2 bg-info glow">Info</span>
<span class="p-2 bg-light glow">Light</span>
<span class="p-2 bg-dark glow">Dark</span>
<span class="p-2 bg-grey glow">Grey</span>
<span class="p-2 bg-olive glow">Olive</span>
<span class="p-2 bg-maroon glow">Maroon</span>
<span class="p-2 bg[navy] glow">Navy</span>

Glow color

Add .glow-{theme-color} class to element that doesn’t have a background color.

Primary Secondary Success Danger Warning Info Light Dark Grey
<span class="p-2 glow-primary">Primary</span>
<span class="p-2 glow-secondary">Secondary</span>
<span class="p-2 glow-success">Success</span>
<span class="p-2 glow-danger">Danger</span>
<span class="p-2 glow-warning">Warning</span>
<span class="p-2 glow-info">Info</span>
<span class="p-2 glow-light">Light</span>
<span class="p-2 glow-dark">Dark</span>
<span class="p-2 glow-grey">Grey</span>