Global CSS

Class name Description
light Add the class to any component to convert to white all the colors of the content inside it. Useful with dark backgrounds.
text-uppercase Convert all texts to uppercase.
boxed-area Add the class to a <div> </div> element to convert apply padding and white background.
boxed-layout Add the class to the <body> to display all the content into a centered container.
align-left
align-center
align-right
Global class to align the contents to left.
Global class to align the contents to center.
Global class to align the contents to right.
text-xs
text-sm
text-md
text-lg
Extra small 12px text size.
Small 16px text size.
Medium 25px text size.
Large 50px text size.
text-light
text-normal
text-bold
text-black
Set the font weight to light (100).
Set the font weight to normal (400).
Set the font weight to bold (600).
Set the font weight to extra bold (900).
space-xs
space-sm
space
space-md
space-lg
Extra small 15px space.
Small 30px space.
Default 60px space.
Medium 75px space.
Large 100px space.
Use this class with the <hr class="" /> element for vertical spacing and with the <span class=""></span> element for horizontal spacing.

Grid system

col-lg-6
col-lg-6
col-lg-4
col-lg-4
col-lg-4
col-lg-3
col-lg-3
col-lg-3
col-lg-3
col-lg-2
col-lg-2
col-lg-2
col-lg-2
col-lg-2
col-lg-2
col-lg-4
col-lg-8
col-lg-4
col-lg-5
col-lg-3
col-lg-6
col-lg-4
col-lg-4
col-lg-4
<div class="row">
    <div class="col-lg-6">

    </div>
    <div class="col-lg-6">

    </div>
</div> 

<div class="row">
    <div class="col-lg-4">

    </div>
    <div class="col-lg-4">

    </div>
    <div class="col-lg-4">

    </div>
</div>  

<div class="row">
    <div class="col-lg-3">
        
    </div>
    <div class="col-lg-3">
       
    </div>
    <div class="col-lg-3">
      
    </div>
    <div class="col-lg-3">
      
    </div>
</div>

<div class="row">
    <div class="col-lg-2">

    </div>
    <div class="col-lg-2">

    </div>
    <div class="col-lg-2">

    </div>
    <div class="col-lg-2">

    </div>
    <div class="col-lg-2">

    </div>
    <div class="col-lg-2">

    </div>
</div>

<div class="row">
    <div class="col-lg-4">

    </div>
    <div class="col-lg-8">

    </div>
</div>

<div class="row">
    <div class="col-lg-4">

    </div>
    <div class="col-lg-5">

    </div>
    <div class="col-lg-3">

    </div>
</div>

<div class="row justify-content-center">
    <div class="col-lg-6">

    </div>
</div>

<div class="row align-items-center">
    <div class="col-lg-4">
        
    </div>
    <div class="col-lg-4">
  
    </div>
    <div class="col-lg-4">
 
    </div>
</div>
Name Description
Centered Add the class justify-content-center to align the columns to center.
Horizontal centered Add the class align-items-center to center horizontally the columns.
Responsive Add the class col-md-* to set the column width for medium screens (< 992px) and the class col-sm-* to set the column width on small screens (< 768px).
Inverted columns Add the class order-md-first or order-sm-first to the last column and order-md-last or order-sm-last to the first column to invert the columns order on medium screens (< 992px) or small screens (< 768px).
Grid system documentation

Responsive CSS

Class name Description
no-margin-md Remove the margins only on medium screens.
no-margin-sm Remove the margins only on small screens.
no-margin-xs Remove the margins only on extra small screens.
full-width-md Full width only on medium screens.
full-width-sm Full width only on small screens.
visible-md Show the element only on medium screens.
visible-sm Show the element only on small screens.
visible-xs Show the element only on extra small screens.
hidden-md Hide the element only on medium screens.
hidden-sm Hide the element only on small screens.
hidden-xs Hide the element only on extra small screens.
hidden-xs Hide the element only on extra small screens.
align-left-md Left alignment only on medium screens.
align-left-sm Left alignment only on small screens.
align-right-md Right alignment only on medium screens.
align-right-sm Right alignment only on small screens.
align-center-md Center alignment only on medium screens.
align-center-sm Center alignment only on small screens.
Grid system
Global JS
Getting started