Button1

To use this button you should use the class: btn-1

Button2

To use this button you should use the class: btn-2

Button3

To use this button you should use the class: btn-3

A card is a flexible and extensible content container. It includes options for text, title, image position.

Example of cards classes:

Having easy-to-use navigation is important for any website.

A modal is a dialog box window that is displayed when click the button.

Loading progress bar can be used to show how far along a user is in a process.

Bar1 Bar2

Example:

All utilities below can be responsive. This framework includes three breakpoints: small (<600px), medium (600-800px) and large for default (>800px).

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

For small screen use class d-sm-flex. For large screen use class d-md-flex.

For small screen use class d-sm-inline-flex. For large screen use class d-md-inline-flex.

Flex direction

For the horizontal direction of flex items use fl-row (for small screen fl-sm-row and for large use fl-md-row):

For the horizontal-reverse direction of flex items use fl-row-rev (for small screen fl-sm-row-rev and for large use fl-md-row-rev):

For the vertical direction of flex items use fl-col (for small screen fl-sm-col and for large use fl-md-col). For reverse option add -rev:

Justify content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, around, or evenly. For small and large screens add sm or md, for example .just-sm-start, .just-md-start. This exists with all justify-content options below.

Align items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, or baseline. For small and large screens add sm or md, for example .al-sm-start, .al-md-start. This exists with all align-items options below.

Align self

Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline. For small and large screens add sm or md, for example .als-sm-start, .als-md-start. This exists with all align-self options below.

Flex grow

Use .grow-1,.grow-2,.grow-3 utilities to toggle a flex item’s ability to grow to fill available space (and .sm-grow-1, .sm-grow-2,.sm-grow-3 or .md-grow-1, .md-grow-2,.md-grow-3). In the example below, all elements use equally space with grow-1 parameter.

Box in the middle has parameter .grow-3, while others have parameter .grow-1:

Flex wrap

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .fl-nowrap, wrapping with .fl-wrap. (for small screens use .fl-sm-nowrap, .fl-sm-wrap, for large screens use .fl-md-nowrap, .fl-md-wrap,

Example for .fl-wrap:

Change the items order. Order takes any integer value from 0 to 2. Default order is 0. In example, we reverse order with .order0, .order1, .order2 classes. For small screens use .sm-order*, for large screens use .md-order* (* - 0, 1, 2)

Use background utility classes to change the appearance of box.

Available options for small and large screens - .c-*-night, .c-*-day, .c-*-sun, .c-*-nature (* - sm or md)

Use border utilities to quickly style the border and border color of an element.

Available options for small and large screens - .b-*-none, .b-*-dot, .b-*-grey, .b-*-big (* - sm or md).

Quickly and responsively toggle the display value of components and more with our display utilities.

Display:flex and display:inline examples are above. Other commonly used value is display:none to hide and show elements without deleting and recreating them. We create three elements, second element has class .d-none(available and .d-sm-none and .d-md-none):

The opacity property sets the opacity level for an element.

The opacity level describes the transparency level, where 1 is not transparent at all, .5 is 50% visible, and 0 is completely transparent. Available options for small and large screens - .op-*-20, .op-*-50, .op-*-100 (* - sm or md)

You can add shadow to element: .sh-none - none shadow, .sh-medium - medium shadow and .sh-big - wide shadow (available and .sh-*-none,.sh-*-medium, .sh-*-big (* - sm or md).

Padding is used to create space around an element's content, inside of any defined borders.

.p-none - none padding at all

.pl-5 - 5px padding from left

.p-10 - 10px padding from all sides

.pt-5 - 5px padding from top

.pt-10 - 10px padding from top

Available small and large screens versions: .p-*-none, .pl-*-5, .p-*-10, .pt-*-5, .pt-*-10 (* - sm or md).

Margins are used to create space around elements, outside of any defined borders.

.m-none - none margin at all

.m-auto - margin auto - centered

.m-10 - 10px margin from all sides

.mt-5 - 5px margin from top

.ml-10 - 10px margin from left

Available small and large screens versions: .m-*-none, .m-*-auto, .m-*-10, .mt-*-5, .ml-*-10 (* - sm or md).