Helper page header description goes here...
Borders
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. Please read the official documentation for the full list of options.
<!-- additive example -->
<span class="border"></span>
<!-- subtractive example -->
<span class="border-0"></span>
<!-- border color example -->
<span class="border border-primary"></span>Border-radius
Add classes to an element to easily round its corners. official documentation for the full list of options.
<!-- border-radius example -->
<img src="" alt="" class="rounded" />
<!-- border-radius sizes example -->
<img src="" alt="" class="rounded-sm" />
Text color
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too. Please read the official documentation for the full list of options.
<!-- example -->
<p class="text-primary"></p>Text transparent color
We are now support text transparent from 10% to 90% opacity. It is also applicable for any other text class as well .text-teal-transparent-*.
<!-- example -->
<p class="text-primary-transparent-1"></p>Background color
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. Please read the official documentation for the full list of options.
<!-- example -->
<div class="bg-primary width-30 height-30 rounded"></div>Background gradient color
We have created every single color gradient based on the color variable defined in scss files /scss/_variables.scss. You may add more color code and class that you want as well.
<!-- example -->
<div class="bg-gradient-primary width-30 height-30 rounded"></div>Background gradient fancy color
We have create different fancy yet beautiful linear gradient based on the color variable that we have. You may add more combination in /scss/_helper.scss
<!-- example -->
<div class="bg-gradient-orange-red width-30 height-30 rounded "></div>Display property
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing. Please read the official documentation for the full list of options.
Display utility classes that apply to all breakpoints, from xs to xl. As such, the classes are named using the format:
.d-{value}forxs.d-{breakpoint}-{value}forsm,md,lg, andxl.
Where {value} is one of:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
<!-- example -->
<div class="d-none d-md-block"></div>Embed
Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device. Please read the official documentation for the full list of options.
The aspect ratios for the modifier classes will be: .embed-responsive-21by9, .embed-responsive-16by9, .embed-responsive-4by3 and .embed-responsive-1by1.
<!-- example -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/3Kf-FlECN7M?rel=0" allowfullscreen></iframe>
</div>Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary. Please read the official documentation for the full list of options.
| Flex | Align items | Fill / Grow / Wrap |
|---|---|---|
.d-flex.d-inline-flex.d-sm-flex.d-sm-inline-flex.d-md-flex.d-md-inline-flex.d-lg-flex.d-lg-inline-flex.d-xl-flex.d-xl-inline-flex |
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch.align-content-start.align-content-end.align-content-center.align-content-between.align-content-around.align-content-stretch |
.flex-fill.flex-grow-0.flex-shrink-0.flex-nowrap.flex-wrap.flex-wrap-reverse.order-{1|2|3|4|5|6 |
<!-- example -->
<div class="d-flex align-items-center">
<div class="flex-fill"></div>
</div>Float / Position / Overflow
Toggle floats on any element, across any breakpoint, using our responsive float utilities.
| Float | Position | Overflow |
|---|---|---|
.float-left.float-sm-left.float-md-left.float-lg-left.float-xl-left.float-right.float-sm-right.float-md-right.float-lg-right.float-xl-right.float-none.float-sm-none.float-md-none.float-lg-none.float-xl-none |
.position-static.position-relative.position-absolute.position-fixed.position-sticky.fixed-top.fixed-bottom.desktop-sticky-top.top-0.right-0.bottom-0.left-0.top-auto.right-auto.bottom-auto.left-auto |
.overflow-auto.overflow-hidden |
Shadows
Add or remove shadows to elements with box-shadow utilities. Please read the official documentation for the full list of options.
<!-- example -->
<div class="shadow-none"></div>Width and height
Easily make an element as wide or as tall with our width and height utilities. Please read the official documentation for the full list of options.
| Width | Height |
|---|---|
.w-25.w-50.w-75.w-100.w-auto.mw-100.width-{10|20|30|40|50}.width-{60|70|80|50|90|100}.width-{100|150|200|250|300|350}.width-{400|450|500|550|600} |
.h-25.h-50.h-75.h-100.h-auto.mh-100.height-{10|20|30|40|50}.height-{60|70|80|50|90|100}.height-{100|150|200|250|300|350}.height-{400|450|500|550|600} |
<!-- example -->
<img src="" class="mw-100 mh-100" />Margin and padding
Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. Please read the official documentation for the full list of options.
| Margin | Padding |
|---|---|
.mt-{1|2|3|4|5}.mr-{1|2|3|4|5}.mb-{1|2|3|4|5}.ml-{1|2|3|4|5}.mx-{1|2|3|4|5}.my-{1|2|3|4|5}.mt-{1~20}px.mr-{1~20}px.mb-{1~20}px.ml-{1~20}px |
.pt-{1|2|3|4|5}.pr-{1|2|3|4|5}.pb-{1|2|3|4|5}.pl-{1|2|3|4|5}.px-{1|2|3|4|5}.py-{1|2|3|4|5}.pt-{1~20}px.pr-{1~20}px.pb-{1~20}px.pl-{1~20}px |
<!-- example -->
<div class="mr-3"></div>Text
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. Please read the official documentation for the full list of options.
| Alignment & Decoration | Wrapping & transform | Font style |
|---|---|---|
.text-justify.text-left.text-center.text-right.text-reset.text-decoration-none.text-decoration-underline.text-gradient.line-height-1 |
.text-wrap.text-nowrap.text-truncate.text-break.text-lowercase.text-uppercase.text-capitalize |
.font-weight-bold.font-weight-bolder.font-weight-normal.font-weight-light.font-weight-lighter.font-italic.font-weight-100.font-weight-200.font-weight-300.font-weight-400.font-weight-500.font-weight-600.font-weight-700.font-weight-800 |
<!-- example -->
<div class="font-weight-bold"></div>Opacity / Visibility / Vertical align
Control the visibility, opacity and vertical align by using bootstrap utilities. Please read the official documentation for the full list of options.
| Opacity | Visibility | Vertical align |
|---|---|---|
.opacity-10.opacity-9.opacity-8.opacity-7.opacity-6.opacity-5.opacity-4.opacity-3.opacity-2.opacity-1.opacity-0 |
.visible.invisible |
.align-baseline.align-top.align-middle.align-bottom.align-text-top.align-text-bottom |
<!-- example -->
<div class="opacity-5"></div>