Change log

What's new in the Bootstrap extension 5.3.1? Febr 11, 2024

  • WARNING! In the Cookie Alert component, there is a .alert-cookie class instead of #alert-cookie identifier.
  • New data-xs-img-src parameter in .parallax class for mobile phones.
  • Two bugs fixed. One for the carousel indicators, the other for the Multi Navbar submenu.

What's new in the Bootstrap extension 5.3.0? Jan 5, 2023

What's new in the Bootstrap extension 5.2.1? Aug 7, 2022

  • New class
    • .border-20
  • Others
    • Submenu in the Multi Navbar component

What's new in the Bootstrap extension 5.2.0? Aug 1, 2022

  • New classes
    • .multi-navbar-aside (Multi Navbar in the sidebar)
    • .horizontal-parallax and .horizontal-parallax-{breakpoint}
    • .bg-night, .btn-night, .text-night, .border-night, .dividered-night (new color instead of black)
    • .font-{name} (to access web safe fonts)
    • .g-6 (6rem)
    • .rounded-6 (3rem)
  • Others
    • zindex of components re-indexed
    • new css variables for better customization
    • .bg-black, .btn-black, .text-black, .border-black classes removed (Built into Bootstrap)
    • .dividered-black class removed

What's new in the Bootstrap extension 5.1.0? May 13, 2022

  • New components
  • New classes
    • .hover-zoom-sm, .hover-zoom-lg
    • .monochromatic-{color}
  • WARNING! Off Canvas Menu component removed (Built into Bootstrap)
  • 1 bug fixed in the Cookie Alert

Bootstrap extension 5.0.0 has been released Jun 6, 2021

Documentation

The new components and classes are in alphabetical order.

Borders

Simple borders

The .border-{size} classes allow you to set a stronger border than before. The size is from 6 to 10, and 20. With the .rounded-6 class you can set even larger roundings.

.border-6, .rounded-6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum, sem ut sollicitudin cursus, urna ex bibendum nulla, ut commodo neque sapien id dolor.
.border-7
.border-8
.border-9
.border-10
.border-20

<div class="border border-6 border-fresh rounded-6 p-3 bg-cream">.border-6, .rounded-6</div>
<div class="border-start border-7 border-primary p-3 bg-cream">.border-7</div>
<div class="border-end border-8 border-secondary p-3 bg-cream">.border-8</div>
<div class="border-top border-9 border-info p-3 bg-cream">.border-9</div>
<div class="border-bottom border-10 border-warning p-3 bg-cream">.border-10</div>
<div class="border-start border-20 border-danger p-3 m-3 col-11 col-md-4 col-lg-3 bg-cream">.border-20</div>
Offset border

You can set offset borders with the .offset-border class and the data-border parameter.
Parameters of the data-border parameter in order: {relative left position} {relative top position} {relative width change} {relative height change} {border width in pixels} {color}

offset borders

Photo: Kirushanthan Krishnapillai

offset borders
offset borders 

<div class="row">
    <div class="col-12 col-lg-4">
        <div class="hover-zoom">
            <img class="offset-border" data-border="20 20 -40 -40 1 #fff" src="img/pic2.jpg" alt="offset borders">
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="hover-zoom w-80 mx-auto mt-5">
            <img class="offset-border" data-border="-20 -20 0 0 6 #f33" src="img/pic2.jpg" alt="offset borders">
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="hover-zoom w-80 mx-auto mt-5">
            <img class="offset-border" data-border="-20 -20 0 0 6 #f33" src="img/pic2.jpg" style="position: relative; z-index: 1000;" alt="offset borders">
        </div>
    </div>
</div>

If you need reliable, precise professionals, you are in the right place!

Search with confidence!

If you need reliable, precise professionals, you are in the right place!

Search with confidence!

If you need reliable, precise professionals, you are in the right place!

Search with confidence! 


<div class="row">
    <div class="col-12 col-lg-4">
        <div class="w-80 bg-dark p-5 mt-5 mx-auto mx-lg-0 offset-border" data-border="20 20 -40 -40 1 #fff">
            <div style="position: relative; z-index: 1000;">
                <p class="text-light mb-4">If you need reliable, precise professionals, you are in the right place!</p>
                <p class="text-center fs-4">
                    <a class="btn btn-primary btn-lg rounded-0" href="">Search with confidence!</a>
                </p>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="w-80 bg-dark p-5 mt-5 mx-auto mx-lg-0 offset-border" data-border="30 -30 0 0 2 #0d6efd">
            <div style="position: relative; z-index: 1000;">
                <p class="text-light mb-4">If you need reliable, precise professionals, you are in the right place!</p>
                <p class="text-center fs-4">
                    <a class="btn btn-primary btn-lg rounded-0" href="">Search with confidence!</a>
                </p>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="w-80 bg-dark p-5 mt-5 mx-auto mx-lg-0 offset-border" data-border="30 -30 0 0 2 #0d6efd" style="position: relative; z-index: 1000;">
            <p class="text-light mb-4">If you need reliable, precise professionals, you are in the right place!</p>
            <p class="text-center fs-4">
                <a class="btn btn-primary btn-lg rounded-0" href="">Search with confidence!</a>
            </p>
        </div>
    </div>
</div>
Underlines

Left aligned simply divider

Left aligned animated divider

Simply divider in center

Animated divider in center

Right aligned simply divider

Right aligned animated divider

Left / center aligned simply divider
(Resize the window!)

Left / center aligned animated divider
(Resize the window!)


<h3 class="dividered dividered-sky">Left aligned simply divider</h3>
<h3 class="dividered dividered-animated dividered-danger">Left aligned animated divider</h3>
<h3 class="text-center dividered dividered-center dividered-sky">Simply divider in center</h3>
<h3 class="text-center dividered dividered-animated dividered-center dividered-danger">Animated divider in center</h3>
<h3 class="text-end dividered dividered-end dividered-sky">Right aligned simply divider</h3>
<h3 class="text-end dividered dividered-end dividered-animated dividered-danger">Right aligned animated divider</h3>
<h3 class="text-md-center dividered dividered-md-center dividered-sky">Left / center aligned simply divider<br>(Resize the window!)</h3>
<h3 class="text-md-center dividered dividered-md-center dividered-animated dividered-danger">Left / center aligned animated divider<br>(Resize the window!)</h3>

Use the CSS variables below to set the divider width and top margin.


<style>
    :root {
        --dividered-Width: 140px;
        --dividered-MarginTop: 20px;
    }
</style>

With .carousel-indicators-circle and .carousel-caption-readable classes you get a nicer shaped carousel.

Carousel in new window

Copy to clipboard 


<section id="carousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="3000">
    <ol class="carousel-indicators carousel-indicators-circle">
        <li data-bs-target="#carousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#carousel" data-bs-slide-to="2"></li>
        <li data-bs-target="#carousel" data-bs-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/slide1.jpg" class="d-block" alt="alternative text">
            <div class="carousel-caption carousel-caption-readable d-none d-md-block">
                <h2 class="display-4">First slide label</h2>
                <p class="fs-5">Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/slide2.jpg" class="d-block" alt="alternative text">
            <div class="carousel-caption carousel-caption-readable d-none d-md-block">
                <h2 class="display-4">Second slide label</h2>
                <p class="fs-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/slide3.jpg" class="d-block" alt="alternative text">
            <div class="carousel-caption carousel-caption-readable d-none d-md-block">
                <h2 class="display-4">Third slide label</h2>
                <p class="fs-5">Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/slide4.jpg" class="d-block" alt="alternative text">
            <div class="carousel-caption carousel-caption-readable d-none d-md-block">
                <h2 class="display-4">Fourth slide label</h2>
                <p class="fs-5">Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </a>
</section>

Use the CSS variables below to set the background color of the carousel caption and the circle size of the indicator buttons.


<style>
    :root {
        --carousel-caption-readable-BgColor: rgba(0, 0, 0, 0.3);
        --carousel-indicators-circle-Size: 18px;
    }
</style>

Colors

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

.bg-chocolate
.bg-velvet
.bg-dream
.bg-night
.bg-sky
.bg-fresh
.bg-rose
.bg-cream

<div class="p-3 mb-2 bg-chocolate text-white">.bg-chocolate</div>
<div class="p-3 mb-2 bg-velvet text-white">.bg-velvet</div>
<div class="p-3 mb-2 bg-dream text-white">.bg-dream</div>
<div class="p-3 mb-2 bg-night text-white">.bg-night</div>
<div class="p-3 mb-2 bg-sky text-white">.bg-sky</div>
<div class="p-3 mb-2 bg-fresh text-white">.bg-fresh</div>
<div class="p-3 mb-2 bg-rose text-white">.bg-rose</div>
<div class="p-3 mb-2 bg-cream text-chocolate">.bg-cream</div>

Cookie Alert

Bootstrap extension includes a cookie alert. The "class" parameter must be "alert-cookie" and the data-cookie parameter must be any cookie name required for the alert-cookie.

Our website uses cookies for a better user experience...


<div class="alert alert-warning alert-cookie" data-cookie="be-okCookie">
    <p>Our website uses cookies for a better user experience...</p>
    <button class="btn btn-warning">Accept</button>
</div>

Counter

You can create counters with the .counter class and the data-target parameter.

Bootstrap Extension

release

In more than

countries

More than

downloads 


<span class="display-1 counter" data-target="5"></span>
<span class="display-1 counter" data-target="150"></span>
<span class="display-1 counter" data-target="127000"></span>

Use the --counter-TimeSeconds CSS variable to set the counters' time.


<style>
    :root {
        --counter-TimeSeconds: 3; /* value: 1 - 10 */
    }
</style>

Forms

Image for file form item

By using the .image-for-input class, you can click on the image to choose another image.


<form class="col-6 col-push-3" enctype="multipart/form-data">
    <div class="row">
        <div class="col-md">
            <label for="anyImage1">Your profile photo 1</label>
            <input type="file" class="image-for-input" name="anyImage1" id="anyImage1" accept="image/jpg, image/jpeg">
            <img class="w-100" src="img/profile.png" alt="...">
        </div>
        <div class="col-md">
            <label for="anyImage2">Your profile photo 2</label>
            <input type="file" class="image-for-input" name="anyImage2" id="anyImage2" accept="image/jpg, image/jpeg">
            <img class="w-100" src="img/profile.png" alt="...">
        </div>
    </div>
</form>
Placeholder for select form item

Add placeholder to the select form element. Use the require parameter and the ph-light or ph-dark classes in the select tag.


<form class="col-6 col-push-3">
    <div class="my-3">
        <input type="text" class="form-control ph-light" name="name" placeholder="Your name" required>
    </div>
    <div class="my-3">
        <select class="form-control form-select ph-dark bg-dark" name="subject" required>
            <option value="">Subject</option>
            <option value="1">Question</option>
            <option value="2">Remark</option>
            <option value="3">Other</option>
        </select>
    </div>
    <div class="my-3">
        <select class="form-control form-select ph-light" name="city" required>
            <option value="">City</option>
            <option value="1">Budapest</option>
            <option value="2">London</option>
            <option value="3">New York</option>
        </select>
    </div>
    <div class="my-3">
        <textarea class="form-control ph-light" name="message" placeholder="Message" rows="8" required></textarea>
    </div>
    <div class="my-3 text-center">
        <button class="btn btn-secondary">Send</button>
    </div>
</form>

Grid system

Gutter

Use the .g-{breakpoint}-6 class for larger spaces (6rem).

Article 1

flowers

Article 2

flowers

Article 3

flowers

Article 4

flowers 

<div class="row g-lg-6">
    <article class="col-md-3">
        <h3>Article 1</h3>
        <img src="img/photo21.jpg" alt="flowers">
    </article>
    <article class="col-md-3">
        <h3>Article 2</h3>
        <img src="img/photo21.jpg" alt="flowers">
    </article>
    <article class="col-md-3">
        <h3>Article 3</h3>
        <img src="img/photo21.jpg" alt="flowers">
    </article>
    <article class="col-md-3">
        <h3>Article 4</h3>
        <img src="img/photo21.jpg" alt="flowers">
    </article>
</div>
Column push and pull

Use col-{breakpoint}-push-* or col-{breakpoint}-pull-* classes to push or pull the elements in grid system. The col-{breakpoint}-push-* classes also shift the other elements to the right.

monkey

Photo: Bill Jones, jr

With the Bootstrap extension classes, you can easily set divs to pull together.


<div class="row">
    <div class="col-md-6 col-md-push-1">
        <img class="w-100" src="img/monkey.jpg" alt="monkey">
    </div>
    <div class="col-md-6 col-md-pull-2 mt-5">
        <p class="bg-fresh text-light p-3">With the Bootstrap extension classes, you can easily set divs to pull together.</p>
    </div>
</div>
Column ordering

Easily change the order of built-in grid columns with .col-{breakpoint}-push-* and .col-{breakpoint}-pull-* modifier classes.

First
Second

<div class="row">
    <div class="col-6 col-md-push-6 bg-primary text-light py-3">First</div>
    <div class="col-6 col-md-pull-12 bg-secondary text-light py-3">Second</div>
</div>
Content rotate

You can rotate the contents 0 to 90 degrees left or right. Use the .rotate-{breakpoint}-l-{degree} class to rotate left or the .rotate-{breakpoint}-r-{degree} class to rotate right.

Where degree is one of: 0, 5, 10, 15, 20, 25, ... , 90.

Content rotate in new window


<div class="container o-hidden">
    <div class="row">
        <div class="col-12 col-sm-6 col-sm-push-4 rotate-sm-l-90">
            <p class="display-6">New York</p>
            <hr class="bg-dark">
        </div>
        <div class="col-12 col-sm-6 col-sm-pull-4">
            <img class="w-100 mt-5 grayscale" src="img/new-york.jpg" alt="New York">
            <p class="display-9 text-secondary bm-5">Photo: Dorothee Hübner</p>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-sm-6 col-sm-push-2 rotate-sm-r-90">
            <p class="display-6">On a lake in Michigan</p>
            <hr class="bg-dark">
        </div>
        <div class="col-12 col-sm-6 col-sm-pull-8">
            <img class="w-100 mt-5 grayscale" src="img/on-boat.jpg" alt="New York">
            <p class="display-9 text-secondary mb-5">Photo: Andrew Montgomery</p>
        </div>
    </div>
</div>

Images

Grayscale images

Use the .grayscale, .hover-color and .hover-grayscale classes to the grayscale images.

Photo: Boris Smokrovic

Photo: Kirushanthan Krishnapillai

Photo: Sergee-Bee


<div class="row">
    <div class="col-md grayscale">
        <img class="w-100" src="img/pic1.jpg">
        <p>...</p>
    </div>
    <div class="col-md hover-color">
        <img class="w-100" src="img/pic2.jpg">
        <p>...</p>
    </div>
    <div class="col-md hover-grayscale">
        <img class="w-100" src="img/pic3.jpg">
        <p>...</p>
    </div>
</div>
Hover zoom

Drag the mouse over the images and the .hover-zoom-sm, .hover-zoom and .hover-zoom-lg classes will magnify them.

Photo: Boris Smokrovic

Photo: Kirushanthan Krishnapillai

Photo: Sergee-Bee


<div class="row">
    <div class="col-md hover-zoom-sm">
        <img class="w-100" src="img/pic1.jpg">
        <p>...</p>
    </div>
    <div class="col-md hover-zoom">
        <img class="w-100" src="img/pic2.jpg">
        <p>...</p>
    </div>
    <div class="col-md hover-zoom-lg">
        <img class="w-100" src="img/pic3.jpg">
        <p>...</p>
    </div>
</div>
Fade in overlay

Hover over the image to see the effect. Just use the .hover-fade-in-overlay class and the .overlay-{visibility} classes for this effect. Use the .from-t and .from-b classes to specify the direction of the sliding content.

Where visibility is one of:

  • 25 - for class that set opacity 25%
  • 50 - for class that set opacity 50%
  • 75 - for class that set opacity 75%
  • 100 - for class that set opacity 100%
butterfly

It is a butterfly!

Photo: Boris Smokrovic

tulip

It is a rose!

Photo: Kirushanthan Krishnapillai

rose

It is a tulip!

It is a paragraph!

Button

Photo: Sergee-Bee


<div class="row">
    <div class="col-md">
        <div class="hover-fade-in-overlay">
            <img src="img/pic1.jpg" alt="butterfly">
            <div class="overlay-100">
                <p class="display-7 text-light">It is a butterfly!</p>
            </div>
        </div>
        <p class="text-secondary">Photo: Boris Smokrovic</p>
    </div>
    <div class="col-md">
        <div class="hover-fade-in-overlay">
            <img src="img/pic2.jpg" alt="tulip">
            <div class="overlay-100 from-t bg-rose">
                <p class="display-7 text-light">It is a rose!</p>
            </div>
        </div>
        <p class="text-secondary">Photo: Kirushanthan Krishnapillai</p>
    </div>
    <div class="col-md">
        <div class="hover-fade-in-overlay hover-zoom hover-grayscale">
            <img src="img/pic3.jpg" alt="rose">
            <div class="overlay-75 from-b bg-black">
                <p class="display-7 text-light">It is a tulip!</p>
                <p class="text-light">It is a paragraph!</p>
                <p><a class="btn btn-warning" href="#">Button</a></p>
            </div>
        </div>
        <p class="text-secondary">Photo: Sergee-Bee</p>
    </div>
</div>
Monochromatic images

Use the .monochrome-{color} class if you want a monochrome image.

Photo: Kirushanthan Krishnapillai


<div class="row">
    <div class="col-md-4 col-xl-3 monochromatic-blue">
        <img class="w-100" src="img/pic2.jpg">
        <p>...</p>
    </div>
    <div class="col-md-4 col-xl-3 monochromatic-brown">
        <img class="w-100" src="img/pic2.jpg">
        <p>...</p>
    </div>
    <div class="col-md-4 col-xl-3 monochromatic-fresh">
        <img class="w-100" src="img/pic2.jpg">
        <p>...</p>
    </div>
    <div class="col-md-4 col-xl-3 monochromatic-gold">
        <img class="w-100" src="img/pic2.jpg">
        <p>...</p>
    </div>
    <div class="col-md-4 col-xl-3 monochromatic-gray">
        <img class="w-100" src="img/pic2.jpg">
        <p>...</p>
    </div>
    <div class="col-md-4 col-xl-3 monochromatic-green">
        <img class="w-100" src="img/pic2.jpg">
        <p>...</p>
    </div>
    <div class="col-md-4 col-xl-3 monochromatic-red">
        <img class="w-100" src="img/pic2.jpg">
        <p>...</p>
    </div>
    <div class="col-md-4 col-xl-3 monochromatic-purple">
        <img class="w-100" src="img/pic2.jpg">
        <p>...</p>
    </div>
</div>

Multi Navbar

With the Multi Navbar component, you can easily create a responsive menu.

Multi Navbar in new window


<header class="multi-navbar multi-navbar-expand-lg">
    <nav class="bg-success justify-content-between">
        <a class="multi-navbar-brand" href="index.html">BRAND'S PLACE</a>
        <ul>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </nav>
</header>

In the example below, the Multi Navbar is supplemented with a Topbar. Without the .collapsable class, Topbar will not close when the page is scrolled. You can also place a submenu in the multi navbar.

Multi Navbar in new window


<header class="multi-navbar multi-navbar-expand-lg">
    <div class="topbar bg-black collapsable justify-content-between">
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
    <nav class="bg-success justify-content-between">
        <a class="multi-navbar-brand" href="index.html">BRAND'S PLACE</a>
        <ul>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a class="dropdown-toggle">Products</a>
                <ul>
                    <li><a href="#product-1">Product 1</a></li>
                    <li><a href="#product-2">Product 2</a></li>
                    <li><a href="#product-3">Another product</a></li>
                </ul>
            </li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </nav>
</header>

With the .multi-navbar-aside class, the Navbar appears as a Sidebar.

Multi Navbar in new window


<header class="multi-navbar multi-navbar-aside multi-navbar-expand-lg">
    <div class="topbar bg-black justify-content-between">
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
    <nav class="bg-success text-center justify-content-between">
        <a class="multi-navbar-brand d-flex justify-content-center align-items-center" style="line-height: 100px;" href="index.html">
            <img class="me-2" style="width: auto; filter: brightness(1000%) grayscale(100%);" src="img/favicon.png" alt="brand">Brand's place
        </a>
        <ul>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </nav>
</header>

Use the CSS variables below to set the spacing of menu items and the background color of Offcanvas.


<style>
    :root {
        --multinavbar-a-Color: rgba(255, 255, 255, 0.9);
        --multinavbar-offcanvas-BgColor: rgba(0, 0, 0, 0.9);
        --multinavbar-offcanvas-Width: 300px;
        --multinavbar-aside-Width: 300px;
        --multinavbar-hamburger-Color: #fff;
        --multinavbar-brand-FontSize: 27px;
        --multinavbar-menu-FontSize: 18px;
        --multinavbar-menu-PaddingX: 20px;
        --multinavbar-menu-PaddingY: 20px;
        --multinavbar-menu-MinPaddingY: 20px;
        --multinavbar-menu-MaxPaddingY: 40px;
        --multinavbar-submenu-BgColor: #53c01d;
        --multinavbar-zIndex: 8500;
    }
</style>

Parallax

With .parallax class and two additional parameters (data-img-src, data-xs-img-src) you can create simple parallax backgrounds. The data-speed parameter is a number between 0 and 1 that sets the background speed.

Parallax in new window


<section class="parallax py-7" data-speed="0.3" data-xs-img-src="img/parallax-xs-1.jpg" data-img-src="img/parallax-1.jpg">
    <div class="container text-white">
        <h2 class="text-center display-4">Section Title</h2>
        <p class="fs-3">Lorem ipsum dolor...</p>
    </div>
</section>

Parallax (horizontal)

The horizontal parallax utility in the Bootstrap extension allows you to create horizontally scrollable content. Use the .horizontal-parallax class and the .horizontal-parallax-{breakpoint} class.

Horizontal parallax in new window


<div class="horizontal-parallax horizontal-parallax-sm">
    <section>
        ...
    </section>
    <section>
        ...
    </section>
    <section>
        ...
    </section>
    <section>
        ...
    </section>
</div>

Sizing

Easily make an element as wide (relative to its parent) with our width utilities.

Width 5%
Width 10%
Width 15%
Width 20%
Width 30%
Width 35%
Width 40%
Width 45%
Width 55%
Width 60%
Width 65%
Width 70%
Width 80%
Width 85%
Width 90%
Width 95%

<div class="w-5 p-3 bg-cream">Width 5%</div>
<div class="w-10 p-3 bg-cream">Width 10%</div>
<div class="w-15 p-3 bg-cream">Width 15%</div>
<div class="w-20 p-3 bg-cream">Width 20%</div>
<div class="w-30 p-3 bg-cream">Width 30%</div>
<div class="w-35 p-3 bg-cream">Width 35%</div>
<div class="w-40 p-3 bg-cream">Width 40%</div>
<div class="w-45 p-3 bg-cream">Width 45%</div>
<div class="w-55 p-3 bg-cream">Width 55%</div>
<div class="w-60 p-3 bg-cream">Width 60%</div>
<div class="w-65 p-3 bg-cream">Width 65%</div>
<div class="w-70 p-3 bg-cream">Width 70%</div>
<div class="w-80 p-3 bg-cream">Width 80%</div>
<div class="w-85 p-3 bg-cream">Width 85%</div>
<div class="w-90 p-3 bg-cream">Width 90%</div>
<div class="w-95 p-3 bg-cream">Width 95%</div>

Slider

With the .slider, .scroll and .slider-item classes, you can easily create a Slider component.

Pizza 1
Card Title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed posuere leo. Donec dictum fermentum bibendum.

Pizza 2
Card Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed posuere leo. Donec dictum fermentum bibendum.

Pizza 3
Card Title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed posuere leo. Donec dictum fermentum bibendum.

Pizza 4
Card Title 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed posuere leo. Donec dictum fermentum bibendum.

Pizza 5
Card Title 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed posuere leo. Donec dictum fermentum bibendum.


<div class="slider">
    <div class="scroll">
        <div class="slider-item">
            ...
        </div>
        <div class="slider-item">
            ...
        </div>
        <div class="slider-item">
            ...
        </div>
        ...
    </div>
</div>

Spacing

The classes are named using the format {property}{sides}-{breakpoint}-{size}.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • s - for classes that set margin-left or padding-left
  • e - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom

Where size is one of:

  • 6 - (by default) for classes that set the margin or padding to 6rem
  • 7 - (by default) for classes that set the margin or padding to 10rem
  • 8 - (by default) for classes that set the margin or padding to 20rem
Negative margin

In CSS, margin properties can utilize negative values (padding cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., 6, 7, 8).

Any div with .py-6
Any div with .py-7
Any div with .py-8
Any div
Any div

<div class="py-6 bg-primary text-white">Any div with .py-6</div>
<div class="py-7 bg-info text-white">Any div with .py-7</div>
<div class="py-8 bg-primary text-white">Any div with .py-8</div>

<div class="w-20 p-6 bg-velvet text-white">Any div</div>
<div class="w-20 p-6 ms-6 mt-n6 bg-rose text-white">Any div</div>

toTop

The Bootstrap extension supports the toTop button. Use the toTop id in the div tag and the toTop button scrolls up the page.

toTop in new window


<div class="d-none d-md-block">
    <div class="btn btn-sky text-white me-5 mb-5 p-3 rounded-circle" id="toTop"></div>
</div>

Typography / Text Classes

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 7

Display 8


<h1 class="display-7">Display 7</h1>
<h1 class="display-8">Display 8</h1>
Letter spacing

Text without letter spacing

Text with letter spacing

Text with letter spacing

Text with letter spacing

Text with letter spacing

Text with letter spacing

Text with letter spacing

Text with letter spacing

Text with letter spacing


<p class="display-8 text-uppercase">Text without letter spacing</p>
<p class="display-8 text-uppercase ls-1">Text with letter spacing</p>
<p class="display-8 text-uppercase ls-2">Text with letter spacing</p>
<p class="display-8 text-uppercase ls-3">Text with letter spacing</p>
<p class="display-8 text-uppercase ls-4">Text with letter spacing</p>
<p class="display-8 text-uppercase ls-5">Text with letter spacing</p>
<p class="display-8 text-uppercase ls-6">Text with letter spacing</p>
<p class="display-8 text-uppercase ls-7">Text with letter spacing</p>
<p class="display-8 text-uppercase ls-8">Text with letter spacing</p>
Web safe fonts

To access web safe fonts, use the classes below.

Arial

Brush Script MT

Courier New

Garamond

Georgia

Helvetica

Trebuchet MS

Times New Roman

Verdana


<p class="font-arial">Arial</p>
<p class="font-brush-script-mt">Brush Script MT</p>
<p class="font-courier-new">Courier New</p>
<p class="font-garamond">Garamond</p>
<p class="font-georgia">Georgia</p>
<p class="font-helvetica">Helvetica</p>
<p class="font-trebuchet-ms">Trebuchet MS</p>
<p class="font-times-new-roman">Times New Roman</p>
<p class="font-verdana">Verdana</p>

Whitebox

With data-whitebox parameter and .wb-link class, you can easily and quickly create photo galleries. Click on the images below for the galleries.

Whitebox in new window


<h3 class="mt-5">#group-1</h3>
<div class="row g-4">
    <div class="col-6 col-sm-4">
        <a class="wb-link" data-whitebox="#group-1" href="img/gallery/n01.jpg" title="Pizza 1"><img src="img/gallery/k01.jpg" alt="pizza"></a>
    </div>
    <div class="col-6 col-sm-4">
        <a class="wb-link" data-whitebox="#group-1" href="img/gallery/n02.jpg" title="Pizza 2"><img src="img/gallery/k02.jpg" alt="pizza"></a>
    </div>
    <div class="visually-hidden">
        <a class="wb-link" data-whitebox="#group-1" href="img/gallery/n03.jpg" title="Pizza 3"><img src="img/gallery/k03.jpg" alt="pizza"></a>
        <a class="wb-link" data-whitebox="#group-1" href="img/gallery/n04.jpg" title="Pizza 4"><img src="img/gallery/k04.jpg" alt="pizza"></a>
        <a class="wb-link" data-whitebox="#group-1" href="img/gallery/n05.jpg" title="Pizza 5"><img src="img/gallery/k05.jpg" alt="pizza"></a>
        <a class="wb-link" data-whitebox="#group-1" href="img/gallery/n06.jpg" title="Pizza 6"><img src="img/gallery/k06.jpg" alt="pizza"></a>
    </div>
</div>
<h3 class="mt-5">#group-2</h3>
<div class="row g-4">
    <div class="col-6 col-sm-4">
        <a class="wb-link" data-whitebox="#group-2" href="img/gallery/n07.jpg" title="Pizza 7"><img src="img/gallery/k07.jpg" alt="pizza"></a>
    </div>
    <div class="visually-hidden">
        <a class="wb-link" data-whitebox="#group-2" href="img/gallery/n08.jpg" title="Pizza 8"><img src="img/gallery/k08.jpg" alt="pizza"></a>
        <a class="wb-link" data-whitebox="#group-2" href="img/gallery/n09.jpg" title="Pizza 9"><img src="img/gallery/k09.jpg" alt="pizza"></a>
    </div>
</div>

Use the CSS variables below to set the font size and font color and the border of the large image.


<style>
    :root {
        --wb-FontSize: 24px;
        --wb-Color: #ccc;
        --wb-lg-img-Border: solid 6px #fff;
    }
</style>

Our website uses cookies for a better user experience...