Utility

Align elements on the right, left or center

Example of alignment:

left alignment .float-left
center alignment .box-center
right alignment .float-right

Align text to the right, left or center

Example of alignment:

text to the left.text-left

text to the center.text-center

text to the right.text-right

Transformation of text

Esempio:

text in upper case.uppercase

TEXT IN TINY.lowercase

text with the first letter of the word in capital letters.capitalize

Change the text size

Example:

small text.size-small

normal text

large text.size-large

extra text.size-extra

Note

With these classes, you can also change the size of the elements such as the examples below.

extra button

Common utility classes

There are some common utility classes that allow you to remove the border.no-border or add a border .border, remove the padding .no-padding or remove the margins .no-margin, round off the corners .round to enter the shadow .box-shadow

Example.no-border:

original edge
without board.no-border

Example .border:

without board
with board.border

Example.no-margin:

Example.round:

original edges normal
edited rounded edges

Example .box-shadow:

original box without shadow
modified with box shadow

Example padding:

.padding-10

.padding-20

.padding-30

.padding-40

.padding-50

Different colors

With classes .default .info .success .danger .warning you can change the background color of the elements

Example:

Button Button .info Button .success Button .danger Button .warning
Text
Text

Additional classes

.hide hides the element
.show shows the element
.desktop-show the element is visible only on the desktop is not visible on mobile devices
.desktop-hidethe item is not visible on desktop devices
.tablet-hide the item is not visible on tablet devices
.tablet-show the item is visible on tablet devices
.mobile-hide the item is not visible on mobile devices
.mobile-show the item is visible on mobile devices
.print-hide hide print
.print-show show print
.fixed-topfixing the element on top
.fixed-bottomfixing an element in the bottom