Buy now
Around utilities
Custom Around classes with a purpose to reduce the frequency of highly repetitive declarations.
Around component
Faded background colors
Primary faded background
Secondary background
Info faded background
Success faded background
Warning faded background
Danger faded background
Dark faded background
<!-- Primary faded background -->
<div class="bg-faded-primary">...</div>
<!-- Secondary background -->
<div class="bg-secondary">...</div>
<!-- Info faded background -->
<div class="bg-faded-info">...</div>
<!-- Success faded background -->
<div class="bg-faded-success">...</div>
<!-- Warning faded background -->
<div class="bg-faded-warning">...</div>
<!-- Danger faded background -->
<div class="bg-faded-danger">...</div>
<!-- Dark faded background -->
<div class="bg-faded-dark">...</div>// Primary faded background
.bg-faded-primary
| ...
// Secondary background
.bg-secondary
| ...
// Info faded background
.bg-faded-info
| ...
// Success faded background
.bg-faded-success
| ...
// Warning faded background
.bg-faded-warning
| ...
// Danger faded background
.bg-faded-danger
| ...
// Dark faded background
.bg-faded-dark
| ...
Gradient background
Gradient background
<!-- Gradient background -->
<div class="bg-gradient">...</div>// Gradient background
.bg-gradient
| ...
Background shapes
Slant bottom right
Slant bottom left
Slant top right
Slant top left
Curve bottom center
Curve top center
Curve bottom right
Curve bottom left
Curve top right
Curve top left
Curve right
Curve left
<!-- Slant bottom right -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="shape shape-bottom shape-slant bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 260">
<polygon fill="currentColor" points="0,257 0,260 3000,260 3000,0"></polygon>
</svg>
</div>
</div>
<!-- Slant bottom left -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="shape shape-bottom shape-slant bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 260">
<polygon fill="currentColor" points="0,0 0,260 3000,260 3000,255"></polygon>
</svg>
</div>
</div>
<!-- Slant top right -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="shape shape-top shape-slant bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 260">
<polygon fill="currentColor" points="0,0 0,2.4 3000,260 3000,0"></polygon>
</svg>
</div>
</div>
<!-- Slant top left -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="shape shape-top shape-slant bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 260">
<polygon fill="currentColor" points="0,0 0,260 3000,2.9 3000,0"></polygon>
</svg>
</div>
</div>
<!-- Curve bottom center -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="shape shape-bottom shape-curve bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 185.4">
<path fill="currentColor" d="M3000,0v185.4H0V0c496.4,115.6,996.4,173.4,1500,173.4S2503.6,115.6,3000,0z"></path>
</svg>
</div>
</div>
<!-- Curve top center -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="shape shape-top shape-curve bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 185.4">
<path fill="currentColor" d="M3000,185.4V0H0v185.4C496.4,69.8,996.4,12,1500,12S2503.6,69.8,3000,185.4z"></path>
</svg>
</div>
</div>
<!-- Curve bottom right -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="shape shape-bottom shape-curve-side bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 250">
<path fill="currentColor" d="M3000,0v250H0v-51c572.7,34.3,1125.3,34.3,1657.8,0C2190.3,164.8,2637.7,98.4,3000,0z"></path>
</svg>
</div>
</div>
<!-- Curve bottom left -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="shape shape-bottom shape-curve-side bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 250">
<path fill="currentColor" d="M0,0l0,250h3000v-51c-572.7,34.3-1125.3,34.3-1657.8,0C809.7,164.8,362.3,98.4,0,0z"></path>
</svg>
</div>
</div>
<!-- Curve top right -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="shape shape-top shape-curve-side bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 250">
<path fill="currentColor" d="M3000,250V0H0v51c572.7-34.3,1125.3-34.3,1657.8,0C2190.3,85.2,2637.7,151.6,3000,250z"></path>
</svg>
</div>
</div>
<!-- Curve top left -->
<div class="bg-dark position-relative py-7">
<!-- Content goes here -->
<div class="shape shape-top shape-curve-side bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 250">
<path fill="currentColor" d="M0,250L0,0l3000,0v51c-572.7-34.3-1125.3-34.3-1657.8,0C809.7,85.2,362.3,151.6,0,250z"></path>
</svg>
</div>
</div>
<!-- Curve right -->
<div class="bg-dark position-relative py-7">
<div class="position-relative zindex-2">
<!-- Content goes here -->
</div>
<div class="shape shape-right bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.4 2500">
<path fill="currentColor" d="M228.4,0v2500H0c134.9-413.7,202.4-830.4,202.4-1250S134.9,413.7,0,0H228.4z"></path>
</svg>
</div>
</div>
<!-- Curve left -->
<div class="bg-dark position-relative py-7">
<div class="position-relative zindex-2">
<!-- Content goes here -->
</div>
<div class="shape shape-left bg-body">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.4 2500">
<path fill="currentColor" d="M0,0l0,2500h228.4C93.5,2086.3,26.1,1669.6,26.1,1250S93.5,413.7,228.4,0L0,0z"></path>
</svg>
</div>
</div>// Slant bottom right
.bg-dark.position-relative.py-7
//- Content goes here
.shape.shape-bottom.shape-slant.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 260")
polygon(fill="currentColor", points="0,257 0,260 3000,260 3000,0")
// Slant bottom left
.bg-dark.position-relative.py-7
//- Content goes here
.shape.shape-bottom.shape-slant.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 260")
polygon(fill="currentColor", points="0,0 0,260 3000,260 3000,255")
// Slant top right
.bg-dark.position-relative.py-7
//- Content goes here
.shape.shape-top.shape-slant.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 260")
polygon(fill="currentColor", points="0,0 0,2.4 3000,260 3000,0")
// Slant top left
.bg-dark.position-relative.py-7
//- Content goes here
.shape.shape-top.shape-slant.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 260")
polygon(fill="currentColor", points="0,0 0,260 3000,2.9 3000,0")
// Curve bottom center
.bg-dark.position-relative.py-7
//- Content goes here
.shape.shape-bottom.shape-curve.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 185.4")
path(fill="currentColor", d="M3000,0v185.4H0V0c496.4,115.6,996.4,173.4,1500,173.4S2503.6,115.6,3000,0z")
// Curve top center
.bg-dark.position-relative.py-7
//- Content goes here
.shape.shape-top.shape-curve.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 185.4")
path(fill="currentColor", d="M3000,185.4V0H0v185.4C496.4,69.8,996.4,12,1500,12S2503.6,69.8,3000,185.4z")
// Curve bottom right
.bg-dark.position-relative.py-7
//- Content goes here
.shape.shape-bottom.shape-curve-side.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 250")
path(fill="currentColor", d="M3000,0v250H0v-51c572.7,34.3,1125.3,34.3,1657.8,0C2190.3,164.8,2637.7,98.4,3000,0z")
// Curve bottom left
.bg-dark.position-relative.py-7
//- Content goes here
.shape.shape-bottom.shape-curve-side.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 250")
path(fill="currentColor", d="M0,0l0,250h3000v-51c-572.7,34.3-1125.3,34.3-1657.8,0C809.7,164.8,362.3,98.4,0,0z")
// Curve top right
.bg-dark.position-relative.py-7
//- Content goes here
.shape.shape-top.shape-curve-side.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 250")
path(fill="currentColor", d="M3000,250V0H0v51c572.7-34.3,1125.3-34.3,1657.8,0C2190.3,85.2,2637.7,151.6,3000,250z")
// Curve top left
.bg-dark.position-relative.py-7
//- Content goes here
.shape.shape-top.shape-curve-side.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 3000 250")
path(fill="currentColor", d="M0,250L0,0l3000,0v51c-572.7-34.3-1125.3-34.3-1657.8,0C809.7,85.2,362.3,151.6,0,250z")
// Curve right
.bg-dark.position-relative.py-7
.position-relative.zindex-2
//- Content goes here
.shape.shape-right.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 228.4 2500")
path(fill="currentColor", d="M228.4,0v2500H0c134.9-413.7,202.4-830.4,202.4-1250S134.9,413.7,0,0H228.4z")
// Curve left
.bg-dark.position-relative.py-7
.position-relative.zindex-2
//- Content goes here
.shape.shape-left.bg-body
svg(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 228.4 2500")
path(fill="currentColor", d="M0,0l0,2500h228.4C93.5,2086.3,26.1,1669.6,26.1,1250S93.5,413.7,228.4,0L0,0z")
Translucent image overlay
Black overlay
Primary overlay
Success overlay
Warning overlay
Danger overlay
Info overlay
White overlay
<!-- Black overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-tobg-image);">
<div class="position-absolute top-0 start-0 w-100 h-100 bg-black opacity-50"></div>
<div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-5">Black overlay</div>
</div>
<!-- Primary overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-tobg-image);">
<div class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-70"></div>
<div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-5">Primary overlay</div>
</div>
<!-- Success overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-tobg-image);">
<div class="position-absolute top-0 start-0 w-100 h-100 bg-success opacity-70"></div>
<div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-5">Success overlay</div>
</div>
<!-- Warning overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-tobg-image);">
<div class="position-absolute top-0 start-0 w-100 h-100 bg-warning opacity-70"></div>
<div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-5">Warning overlay</div>
</div>
<!-- Danger overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-tobg-image);">
<div class="position-absolute top-0 start-0 w-100 h-100 bg-danger opacity-70"></div>
<div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-5">Danger overlay</div>
</div>
<!-- Info overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-tobg-image);">
<div class="position-absolute top-0 start-0 w-100 h-100 bg-info opacity-70"></div>
<div class="position-relative fw-medium text-white text-shadow text-center zindex-2 py-5">Info overlay</div>
</div>
<!-- White overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(path-tobg-image);">
<div class="position-absolute top-0 start-0 w-100 h-100 bg-white opacity-70"></div>
<div class="position-relative fw-medium text-center zindex-2 py-5">White overlay</div>
</div>// Black overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(path-to-bg-image);")
.position-absolute.top-0.start-0.w-100.h-100.bg-black.opacity-50
.position-relative.fw-medium.text-white.text-shadow.text-center.zindex-2.py-5 Black overlay
// Primary overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(path-to-bg-image);")
.position-absolute.top-0.start-0.w-100.h-100.bg-primary.opacity-70
.position-relative.fw-medium.text-white.text-shadow.text-center.zindex-2.py-5 Primary overlay
// Success overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(path-to-bg-image);")
.position-absolute.top-0.start-0.w-100.h-100.bg-success.opacity-70
.position-relative.fw-medium.text-white.text-shadow.text-center.zindex-2.py-5 Success overlay
// Warning overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(path-to-bg-image);")
.position-absolute.top-0.start-0.w-100.h-100.bg-warning.opacity-70
.position-relative.fw-medium.text-white.text-shadow.text-center.zindex-2.py-5 Warning overlay
// Danger overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(path-to-bg-image);")
.position-absolute.top-0.start-0.w-100.h-100.bg-danger.opacity-70
.position-relative.fw-medium.text-white.text-shadow.text-center.zindex-2.py-5 Danger overlay
// Info overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(path-to-bg-image);")
.position-absolute.top-0.start-0.w-100.h-100.bg-info.opacity-70
.position-relative.fw-medium.text-white.text-shadow.text-center.zindex-2.py-5 Info overlay
// White overlay
.position-relative.bg-size-cover.bg-position-center.py-5(style="background-image: url(path-to-bg-image);")
.position-absolute.top-0.start-0.w-100.h-100.bg-white.opacity-70
.position-relative.fw-medium.text-center.zindex-2.py-5 White overlay
Opacity
Opacity 25%Opacity 50%Opacity 60%Opacity 70%Opacity 75%Opacity 80%Opacity 90%Opacity 100%
<!-- Opacity -->
<div class="opacity-25"></div>
<div class="opacity-50"></div>
<div class="opacity-60"></div>
<div class="opacity-70"></div>
<div class="opacity-75"></div>
<div class="opacity-80"></div>
<div class="opacity-90"></div>
<div class="opacity-100"></div>// Opacity
.opacity-25
.opacity-50
.opacity-60
.opacity-70
.opacity-75
.opacity-80
.opacity-90
.opacity-100
Image swap on hover
<!-- Image swap on hover -->
<a href="#" class="swap-image">
<img src="path-to-image" class="swap-to" width="176" alt="Alt text">
<img src="path-to-image" class="swap-from" width="176" alt="Alt text">
</a>// Image swap on hover
a(href="#").swap-image
img(src="path-to-image", alt="Alt text", width="176").swap-to
img(src="path-to-image", alt="Alt text", width="176").swap-from
Fancy link
<!-- Default fancy link -->
<a href="#" class="fancy-link">I'm a fancy link</a>
<!-- Light fancy link -->
<a href="#" class="fancy-link text-light">Light fancy link</a>// Default fancy link
a(href="#").fancy-link
| I'm a fancy link
// Light fancy link
a(href="#").fancy-link.text-light
| Light fancy link
Text shadow
Text shadow
<!-- Text shadow -->
<h2 class="text-white text-shadow">Text shadow</h2>// Text shadow
h2.text-white.text-shadow Text shadow