Change log

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

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

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

What's new in the Bootstrap extension 4.5.0? Aug 5, 2019

What's new in the Bootstrap extension 4.4.0? May 28, 2019

What's new in the Bootstrap extension 4.3.1? May 14, 2019

What's new in the Bootstrap extension 4.2.1? Dec 21, 2018


The new components and classes are in alphabetical order.


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.

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.











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



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

Capsule buttons
Capsule button tags
Outline capsule buttons

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.

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


Image for file form item

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

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.

Check the validity of the form

Description coming soon... :)

Grid system


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

Grid System
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.

Column ordering

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

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.


Grayscale images

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

Photo: Boris Smokrovic

Photo: Kirushanthan Krishnapillai

Photo: Sergee-Bee

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:

It is a butterfly!

Photo: Boris Smokrovic

It is a rose!

Photo: Kirushanthan Krishnapillai

It is a tulip!

It is a paragraph!


Photo: Sergee-Bee

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

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.


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.


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


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%


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:

Where sides is one of:

Where size is one of:

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
Any div


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

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

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


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.