Bootstrap extension

Change log

What's new in Bootstrap extension 4.6.1? Jun 11, 2020

1 bug fixed

What's new in Bootstrap extension 4.6.0? May 31, 2020

be-formcheck class
WARNING! Placeholder for select form item has changed!
WARNING! The lp-* classes have changed to ls-* classes
1 bug fixed

What's new in Bootstrap extension 4.5.1? Dec 30, 2019

2 bugs fixed

Documentation

The new classes are in topic alphabetical order.

Accordion

We made a new accordion that you only need to use the be-accordion class. The example below shows how it works. Below you can see the source code.

BE Accordion in new window


<div class="be-accordion" id="accordion1">
    <div class="card bg-transparent border-0">
        <div class="card-header bg-transparent border-0 p-0" id="heading11">
            <h3>
                <a class="display-7" data-toggle="collapse" data-target="#collapse11" aria-expanded="true" aria-controls="collapse11">Food 1</a>
            </h3>
        </div>
        <div id="collapse11" class="collapse show" aria-labelledby="heading11" data-parent="#accordion1">
            <div class="card-body px-1 pt-0 pb-5">
                ...
            </div>
        </div>
    </div>

    <div class="card bg-transparent border-0">
        <div class="card-header bg-transparent border-0 p-0" id="heading12">
            <h3>
                <a class="display-7" data-toggle="collapse" data-target="#collapse12" aria-expanded="false" aria-controls="collapse12">Food 2</a>
            </h3>
        </div>
        <div id="collapse12" class="collapse" aria-labelledby="heading12" data-parent="#accordion1">
            <div class="card-body px-1 pt-0 pb-5">
                ...
            </div>
        </div>
    </div>

    <div class="card bg-transparent border-0 text-danger">
        <div class="card-header bg-transparent border-0 p-0" id="heading13">
            <h3>
                <a class="display-7 text-primary" data-toggle="collapse" data-target="#collapse13" aria-expanded="false" aria-controls="collapse13">Colorful Food 3</a>
            </h3>
        </div>
        <div id="collapse13" class="collapse" aria-labelledby="heading13" data-parent="#accordion1">
            <div class="card-body px-1 pt-0 pb-5 text-success">
                ...
            </div>
        </div>
    </div>

    <div class="card bg-transparent border-0">
        <div class="card-header bg-transparent border-0 p-0" id="heading14">
            <h3>
                <a class="display-7" data-toggle="collapse" data-target="#collapse14" aria-expanded="false" aria-controls="collapse14">Food 4</a>
            </h3>
        </div>
        <div id="collapse14" class="collapse" aria-labelledby="heading14" data-parent="#accordion1">
            <div class="card-body px-1 pt-0 pb-5">
                ...
            </div>
        </div>
    </div>
</div>

<div class="be-accordion" id="accordion2">
    <div class="card bg-transparent border-0">
        <div class="card-header bg-transparent border-0 p-0" id="heading21">
            <h3>
                <a class="display-7" data-toggle="collapse" data-target="#collapse21" aria-expanded="true" aria-controls="collapse21">Drink 1</a>
            </h3>
        </div>
        <div id="collapse21" class="collapse show" aria-labelledby="heading21" data-parent="#accordion2">
            <div class="card-body px-1 pt-0 pb-5">
                ...
            </div>
        </div>
    </div>

    <div class="card bg-transparent border-0">
        <div class="card-header bg-transparent border-0 p-0" id="heading22">
            <h3>
                <a class="display-7" data-toggle="collapse" data-target="#collapse22" aria-expanded="false" aria-controls="collapse22">Drink 2</a>
            </h3>
        </div>
        <div id="collapse22" class="collapse" aria-labelledby="heading22" data-parent="#accordion2">
            <div class="card-body px-1 pt-0 pb-5">
                ...
            </div>
        </div>
    </div>

    <div class="card bg-transparent border-0">
        <div class="card-header bg-transparent border-0 p-0" id="heading23">
            <h3>
                <a class="display-7" data-toggle="collapse" data-target="#collapse23" aria-expanded="false" aria-controls="collapse23">Drink 3</a>
            </h3>
        </div>
        <div id="collapse23" class="collapse" aria-labelledby="heading23" data-parent="#accordion2">
            <div class="card-body px-1 pt-0 pb-5">
                ...
            </div>
        </div>
    </div>

    <div class="card bg-transparent border-0">
        <div class="card-header bg-transparent border-0 p-0" id="heading24">
            <h3>
                <a class="display-7" data-toggle="collapse" data-target="#collapse24" aria-expanded="false" aria-controls="collapse24">Drink 4</a>
            </h3>
        </div>
        <div id="collapse24" class="collapse" aria-labelledby="heading24" data-parent="#accordion2">
            <div class="card-body px-1 pt-0 pb-5">
                ...
            </div>
        </div>
    </div>
</div>

Background 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-black

.bg-chocolate

.bg-velvet

.bg-purple

.bg-sky

.bg-fresh

.bg-rose

.bg-cream

.bg-transparent


<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
<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-purple text-white">.bg-purple</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-white">.bg-cream</div>
<div class="p-3 mb-2 bg-transparent text-white">.bg-transparent</div>

Borders

The .border-strong class allows you to set a thicker border than before. The border thickness is 8px.

border-strong

border-strong-top

border-strong-right

border-strong-bottom

border-strong-left


<div class="border-strong border-primary p-3 m-3 bg-cream">border-strong</div>
<div class="border-strong-top border-secondary p-3 m-3 bg-cream">border-strong-top</div>
<div class="border-strong-right border-success p-3 m-3 bg-cream">border-strong-right</div>
<div class="border-strong-bottom border-danger p-3 m-3 bg-cream">border-strong-bottom</div>
<div class="border-strong-left border-warning p-3 m-3 bg-cream">border-strong-left</div>

Buttons

Bootstrap extension includes several predefined button styles, each serving its own semantic purpose.

Capsule buttons


<button type="button" class="btn btn-primary btn-capsule px-4">Primary</button>
<button type="button" class="btn btn-secondary btn-capsule px-4">Secondary</button>
<button type="button" class="btn btn-success btn-capsule px-4">Success</button>
<button type="button" class="btn btn-danger btn-capsule px-4">Danger</button>
<button type="button" class="btn btn-warning btn-capsule px-4">Warning</button>
<button type="button" class="btn btn-info btn-capsule px-4">Info</button>
<button type="button" class="btn btn-light btn-capsule px-4">Light</button>
<button type="button" class="btn btn-dark btn-capsule px-4">Dark</button>

Capsule button tags

Link


<a class="btn btn-primary btn-capsule px-4" href="#" role="button">Link</a>
<button class="btn btn-primary btn-capsule px-4" type="submit">Button</button>
<input class="btn btn-primary btn-capsule px-4" type="button" value="Input">
<input class="btn btn-primary btn-capsule px-4" type="submit" value="Submit">
<input class="btn btn-primary btn-capsule px-4" type="reset" value="Reset">

Outline capsule buttons


<button type="button" class="btn btn-outline-primary btn-capsule px-4">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-capsule px-4">Secondary</button>
<button type="button" class="btn btn-outline-success btn-capsule px-4">Success</button>
<button type="button" class="btn btn-outline-danger btn-capsule px-4">Danger</button>
<button type="button" class="btn btn-outline-warning btn-capsule px-4">Warning</button>
<button type="button" class="btn btn-outline-info btn-capsule px-4">Info</button>
<button type="button" class="btn btn-outline-light btn-capsule px-4">Light</button>
<button type="button" class="btn btn-outline-dark btn-capsule px-4">Dark</button>

Carousel

The Bootstrap extension supports a new responsive carousel called Alpha Slider.

Alpha Slider

Paste images into a container by alpha-slider ID. The alpha-slider-caption class allows you to associate any content with each image. The optional zoom-auto class allows you to enlarge images. In the data-interval option, you can specify the time of the image change. If no data interval is specified, the Alpha Slider will switch the images every 5 seconds.

Alpha Slider in new window


<div class="zoom-auto mt-5" id="alpha-slider" data-interval="6000">
    <div class="alpha-slider-item">
        <img src="img/slide1.jpg" alt="pizza1">
        <div class="alpha-slider-caption d-none d-md-block">
            <h2 class="text-center display-4 text-white">Quattro piccolo pomodoro<br>Pizzeria</h2>
            <p class="text-center lead text-white">Sed vestibulum et lectus sit amet tincidunt.<br>In fringilla et ipsum vel porta.</p>
            <p class="text-center"><a class="btn btn-warning" href="#">Show it</a></p>
        </div>
    </div>
    <div class="alpha-slider-item">
        <img src="img/slide2.jpg" alt="pizza2">
        <div class="alpha-slider-caption d-none d-md-block">
            <h2 class="text-center display-4 text-white">Title 2</h2>
            <p class="text-center lead text-white">Sed vestibulum et lectus sit amet tincidunt.<br>In fringilla et ipsum vel porta.</p>
            <p class="text-center"><a class="btn btn-warning" href="#">Show it</a></p>
        </div>
    </div>
    <div class="alpha-slider-item">
        <img src="img/slide3.jpg" alt="pizza3">
        <div class="alpha-slider-caption d-none d-md-block">
            <h2 class="text-center display-4 text-white">Title 3</h2>
            <p class="text-center lead text-white">Sed vestibulum et lectus sit amet tincidunt.<br>In fringilla et ipsum vel porta.</p>
            <p class="text-center"><a class="btn btn-warning" href="#">Show it</a></p>
        </div>
    </div>
    <div class="alpha-slider-item">
        <img src="img/slide4.jpg" alt="pizza4">
        <div class="alpha-slider-caption d-none d-md-block">
            <h2 class="text-center display-4 text-white">Title 4</h2>
            <p class="text-center lead text-white">Sed vestibulum et lectus sit amet tincidunt.<br>In fringilla et ipsum vel porta.</p>
            <p class="text-center"><a class="btn btn-warning" href="#">Show it</a></p>
        </div>
    </div>
</div>

You can colorize the background of .alpha-slider-caption class with custom css.


<style>
    .alpha-slider-caption {
        background-color: rgba(100,50,0,0.5);
    }
</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="form-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 title parameter in the select form item and the ph-light class in the form tag.


<form class="col-6 col-push-3 ph-light">
    <div class="form-group">
        <input type="text" class="form-control" name="name" placeholder="Your name" required>
    </div>
    <div class="form-group">
        <select class="form-control" 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="form-group">
        <select class="form-control" 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="form-group">
        <textarea class="form-control" name="message" placeholder="Message" rows="8" required></textarea>
    </div>
    <div class="form-group text-center">
        <button class="btn btn-secondary">Send</button>
    </div>
</form>

Check the validity of the form

Description coming soon... :)

I accept the terms of service!


<form class="be-formcheck ph-light col-6 col-push-3" name="anyForm" data-msg-empty="This field is required!" data-msg-invalid="Field value is invalid!">
    <div class="form-group">
        <input class="form-control" type="email" name="email" placeholder="Email" required>
    </div>
    <div class="form-group">
        <input class="form-control" type="password" name="password" placeholder="Password" required>
    </div>
    <div class="form-group">
        <input class="form-control" type="text" name="text" placeholder="Optional">
    </div>
    <div class="form-group">
        <select class="form-control" name="placeOfBirth" required>
            <option value="">Place of birth</option>
            <option value="1">Budapest</option>
            <option value="2">London</option>
            <option value="3">New York</option>
        </select>
    </div>
    <div class="form-group">
        <textarea class="form-control" name="message" rows="6" placeholder="Message" required></textarea>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="accept" id="accept" required>
        <label for="accept"> I accept the terms of service!</label>
    </div>
    <div class="form-group">
        <input type="hidden" name="event" value="send">
        <button class="btn btn-primary">Send</button>
    </div>
</form>

Grid system

Breakpoint

The Bootstrap Extension grid system has a class: .col-xxl-* (xxlarge devices - screen width equal to or greater than 1600px)

Grid system in new window


<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4 col-xxl-2 my-3">
            <div class="card card-body bg-primary text-white">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xxl-2 my-3">
            <div class="card card-body bg-primary text-white">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xxl-2 my-3">
            <div class="card card-body bg-primary text-white">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xxl-2 my-3">
            <div class="card card-body bg-primary text-white">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xxl-2 my-3">
            <div class="card card-body bg-primary text-white">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xxl-2 my-3">
            <div class="card card-body bg-primary text-white">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
    </div>
</div>

Column push and pull

Use col-{breakpoint}-push-* or col-{breakpoint}-pull-* classes to push or pull div tags in grid system.

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-1 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-6 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">
            <img class="w-100 mt-5 grayscale" src="img/dorothee-hubner.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-6">
            <img class="w-100 mt-5 grayscale" src="img/andrew-montgomery.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>

Fade in overlay

Hover over the image to see the effect. Just use the .hover-fade-in-overlay class and the .overlay-{visibility} classes and the .overlay-container class for this effect.

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%

It is a butterfly!

Photo: Boris Smokrovic

It is a rose!

Photo: Kirushanthan Krishnapillai

It is a tulip!

It is a paragraph!

Button

Photo: Sergee-Bee


<div class="row">
    <div class="col-md-4">
        <div class="hover-fade-in-overlay">
            <img src="img/pic1.jpg">
            <div class="overlay-75 bg-black">
                <div class="overlay-container">
                    <p class="display-7 text-light">It is a butterfly!</p>
                </div>
            </div>
        </div>
        <p class="display-9 text-secondary">Photo: Boris Smokrovic</p>
    </div>
    <div class="col-md-4">
        <div class="hover-fade-in-overlay">
            <img src="img/pic2.jpg">
            <div class="overlay-100">
                <div class="overlay-container">
                    <p class="display-7 text-light">It is a rose!</p>
                </div>
            </div>
        </div>
        <p class="display-9 text-secondary">Photo: Kirushanthan Krishnapillai</p>
    </div>
    <div class="col-md-4">
        <div class="hover-fade-in-overlay">
            <img src="img/pic3.jpg">
            <div class="overlay-100 bg-purple">
                <div class="overlay-container">
                    <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">Button</a></p>
                </div>
            </div>
        </div>
        <p class="display-9 text-secondary">Photo: Sergee-Bee</p>
    </div>
</div>

Hover zoom

Drag the mouse over the images and the .hover-zoom class will magnify them.

Photo: Boris Smokrovic

Photo: Kirushanthan Krishnapillai

Photo: Sergee-Bee


<div class="row">
    <div class="col-md hover-zoom">
        <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">
        <img class="w-100" src="img/pic3.jpg">
        <p>...</p>
    </div>
</div>

Off Canvas Menu

You can create your own Off Canvas Menu with .offcanvas-main, .offcanvas-container, and .offcanvas-menus classes. Instead of using the .offcanvas container, you can use the .offcanvas-container-fixed class. The offcanvas menu width can be set for wide devices with w-5 to w-100 classes.

Off Canvas Menu in new window


<div class="offcanvas-main">
    <div class="offcanvas-container">
        <div class="navbar navbar-dark bg-dark sticky-top">
            <a class="navbar-brand" href="#">Off Canvas Menu</a>
            <button class="offcanvas-toggler" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="container-fluid">
            <h2 id="menu1">Menu 1</h2>
            <p>...</p>
            <h2 id="menu2">Menu 2</h2>
            <p>...</p>
            <h2 id="menu3">Menu 3</h2>
            <p>...</p>
            <h2 id="menu4">Menu 4</h2>
            <p>...</p>
        </div>
    </div>
    <div class="offcanvas-menu bg-danger text-light w-30">
        <div class="navbar navbar-dark bg-danger">
            <a class="navbar-brand" href="#">Off Canvas Menu</a>
            <button class="offcanvas-toggler" type="button">
                <span class="text-light display-7">×</span>
            </button>
        </div>
        <div class="container-fluid">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link text-light rolling" href="#menu1">Menu 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light rolling" href="#menu2">Menu 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light rolling" href="#menu3">Menu 3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light rolling" href="#menu4">Menu 4</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Parallax

With parallax class and data-img-src parameter 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" data-speed="0.3" data-img-src="img/parallax-1.jpg">
    <div class="container py-7 text-white">
        <h2 class="display-4 mb-4">Parallax Website</h2>
        <p class="lead">Lorem ipsum dolor...</p>
    </div>
</section>

Scrollspy

You can scroll the position of the page with the .rolling class.

Scrollspy in new window


<body data-spy="scroll" data-target=".navbar" data-offset="74">
    <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" id="navbar">
        <a class="navbar-brand" href="#">BS4 extension</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="hamburgerbutton">
            <span class="float-left pt-1 pr-2">Menu</span><span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link rolling" href="#menu1">Menu 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link rolling" href="#menu2">Menu 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link rolling" href="#menu3">Menu 3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link rolling" href="#menu4">Menu 4</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container mt-5">
        <h2 id="menu1">Heading 1</h2>
        <p>...</p>
        <h2 id="menu2">Heading 2</h2>
        <p>...</p>
        <h2 id="menu3">Heading 3</h2>
        <p>...</p>
        <h2 id="menu4">Heading 4</h2>
        <p>...</p>
    </div>

    <!-- Optional JavaScript -->

</body>

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" style="background-color: #eee;">Width 5%</div>
<div class="w-10 p-3" style="background-color: #eee;">Width 10%</div>
<div class="w-15 p-3" style="background-color: #eee;">Width 15%</div>
<div class="w-20 p-3" style="background-color: #eee;">Width 20%</div>
<div class="w-30 p-3" style="background-color: #eee;">Width 30%</div>
<div class="w-35 p-3" style="background-color: #eee;">Width 35%</div>
<div class="w-40 p-3" style="background-color: #eee;">Width 40%</div>
<div class="w-45 p-3" style="background-color: #eee;">Width 45%</div>
<div class="w-55 p-3" style="background-color: #eee;">Width 55%</div>
<div class="w-60 p-3" style="background-color: #eee;">Width 60%</div>
<div class="w-65 p-3" style="background-color: #eee;">Width 65%</div>
<div class="w-70 p-3" style="background-color: #eee;">Width 70%</div>
<div class="w-80 p-3" style="background-color: #eee;">Width 80%</div>
<div class="w-85 p-3" style="background-color: #eee;">Width 85%</div>
<div class="w-90 p-3" style="background-color: #eee;">Width 90%</div>
<div class="w-95 p-3" style="background-color: #eee;">Width 95%</div>

Spacing

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them.

The classes are named using the format {property}{sides}-{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
l - for classes that set margin-left or padding-left
r - 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


<div class="w-20 p-3 bg-velvet text-white">Any div</div>
<div class="w-20 p-3 ml-6 mt-n3 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="bg-purple text-white rounded" 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 5

Display 6

Display 7

Display 8

Display 9

Display 10


<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
<h1 class="display-7">Display 7</h1>
<h1 class="display-8">Display 8</h1>
<h1 class="display-9">Display 9</h1>
<h1 class="display-10">Display 10</h1>

Letter spacing

Text without 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>

Whitebox

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

Whitebox in new window


<div class="container">

    <h2>Gallery #1</h2>
    <div class="row">
        <div class="col-md-6">
            <a class="wb-link" data-whitebox="#group-1" href="img/photo1.jpg">
                <img class="w-100 my-3" src="img/photo1.jpg" alt="">
            </a>
        </div>
        <div class="col-md-6">
            <a class="wb-link" data-whitebox="#group-1" href="img/photo7.jpg">
                <img class="w-100 my-3" src="img/photo7.jpg" alt="">
            </a>
        </div>
    </div>

    <h2>Gallery #2</h2>
    <div class="row">
        <div class="col-md-6">
            <a class="wb-link" data-whitebox="#group-2" href="img/photo23.jpg">
                <img class="w-100 my-3" src="img/photo23.jpg" alt="">
            </a>
        </div>
    </div>

</div>

<div class="wb-data" id="group-1">
    <a href="img/photo1.jpg"><img src="img/small-photo1.jpg" alt="" title="Photo: Brenan Greene"></a>
    <a href="img/photo2.jpg"><img src="img/small-photo2.jpg" alt="" title="Photo: Carissa Gan"></a>
    <a href="img/photo3.jpg"><img src="img/small-photo3.jpg" alt="" title="Photo: Cel Lisboa"></a>
    <a href="img/photo4.jpg"><img src="img/small-photo4.jpg" alt="" title="Photo: David Nuescheler"></a>
    <a href="img/photo5.jpg"><img src="img/small-photo5.jpg" alt="" title="Photo: Nicolas Perondi"></a>
    <a href="img/photo6.jpg"><img src="img/small-photo6.jpg" alt="" title="Photo: Nirzar Pangarkar"></a>
    <a href="img/photo7.jpg"><img src="img/small-photo7.jpg" alt="" title="Photo: Robert Haverly"></a>
    <a href="img/photo8.jpg"><img src="img/small-photo8.jpg" alt="" title="Photo: Ronaldo de Oliveira"></a>
    <a href="img/photo9.jpg"><img src="img/small-photo9.jpg" alt="" title="Photo: Thomas Schweighofer"></a>
    <a href="img/photo10.jpg"><img src="img/small-photo10.jpg" alt="" title="Photo: Brooke Lark"></a>
    <a href="img/photo11.jpg"><img src="img/small-photo11.jpg" alt="" title="Photo: Casey Lee"></a>
    <a href="img/photo12.jpg"><img src="img/small-photo12.jpg" alt="" title="Photo: Erik Lundqvist"></a>
    <a href="img/photo13.jpg"><img src="img/small-photo13.jpg" alt="" title="Photo: Gianna Ciaramello"></a>
    <a href="img/photo14.jpg"><img src="img/small-photo14.jpg" alt="" title="Photo: Izzy Boscawen"></a>
    <a href="img/photo15.jpg"><img src="img/small-photo15.jpg" alt="" title="Photo: Taylor Kiser"></a>
</div>

<div class="wb-data" id="group-2">
    <a href="img/photo21.jpg"><img src="img/small-photo21.jpg" alt="" title="Photo: Michele Ivani"></a>
    <a href="img/photo22.jpg"><img src="img/small-photo22.jpg" alt="" title="Photo: Juja Han"></a>
    <a href="img/photo23.jpg"><img src="img/small-photo23.jpg" alt="" title="Photo: Andrea Reiman"></a>
</div>