Bootstrap extension
Everything that may be usefulbut missing from the Bootstrap 5.x
Use it simple after the Bootstrap 5.x css and js:
<link rel="stylesheet" href="//bootstrap-extension.com/bootstrap-extension-5.1.0/css/bootstrap-extension.min.css" type="text/css">
<script src="//bootstrap-extension.com/bootstrap-extension-5.1.0/js/bootstrap-extension.min.js"></script>
Or download the full package that includes the developer version.
The new components and classes are in alphabetical order.
The .border-{size} classes allow you to set a stronger border than before. The size is from 6 to 10.
With .carousel-indicators-circle and .carousel-caption-readable classes you get a nicer shaped carousel.
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.
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.
Our website uses cookies for a better user experience...
You can create counters with the .counter class and the data-target parameter.
Bootstrap Extension
release
In more than
countries
More than
downloads
By using the .image-for-input class, you can click on the image to choose another image.
Add placeholder to the select form element. Use the require parameter and the ph-light or ph-dark classes in the select tag.
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.
Photo: Bill Jones, jr
With the Bootstrap extension classes, you can easily set divs to pull together.
Easily change the order of built-in grid columns with .col-{breakpoint}-push-* and .col-{breakpoint}-pull-* modifier classes.
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.
Use the .grayscale, .hover-color and .hover-grayscale classes to the grayscale images.
Photo: Boris Smokrovic
Photo: Kirushanthan Krishnapillai
Photo: Sergee-Bee
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
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:
Photo: Boris Smokrovic
Photo: Kirushanthan Krishnapillai
Photo: Sergee-Bee
Use the .monochrome-{color} class if you want a monochrome image.
Photo: Kirushanthan Krishnapillai
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.
Use the CSS variables below to set the spacing of menu items and the background color of Offcanvas.
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.
Easily make an element as wide (relative to its parent) with our width utilities.
Spacing utilities that apply to all breakpoints, from xs to xxl, 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:
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).
The Bootstrap extension supports the toTop button. Use the toTop id in the div tag and the toTop button scrolls up the page.
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
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 class, you can easily and quickly create photo galleries. Click on the images below for the galleries.