Change log

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

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

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

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-12
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!)

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

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

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

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

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

Counter

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

Bootstrap Extension

release

In more than

countries

More than

downloads

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

Forms

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 require parameter and the ph-light or ph-dark classes in the select tag.

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

Column ordering

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

First
Second
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.

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

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

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:

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

Monochromatic images

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

Photo: Kirushanthan Krishnapillai

Multi Navbar

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

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.

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

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

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 (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.

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%

Spacing

The classes are named using the format {property}{sides}-{breakpoint}-{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 with .py-6
Any div with .py-7
Any div with .py-8
Any div
Any 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.

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

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

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

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.

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