Grid System Utilities
The Grid Utilities is a bunch of assets class that help you to align your elements change gutter space and much more...
Grid Columns Gutters
Gutter is The space between columns and box's it has 30px gutter by default you can increase or decrease The space by prefixed class's given to The row element see The table below to know all available class's.
| Class Name | Gutter Size |
|---|---|
| no-gutter | Remove Gutters [0px] Space Between Columns |
| gutter-small | Resize Gutters to [15px] Between Columns 7.5px on each side |
| gutter-medium | Resize Gutters to [20px] Between Columns 10px on each side |
| gutter-large | Duplicate Gutter Size [60px] Between Columns 30px on each side |
Columns Alignment
Grid System Uses The Flexbox Alignment Options To Align Columns Vertically and Horizontally with class's , self element align and all elements at once you will see in The table below The class's for alignment with an explanation of what They do.
| Class Name | element | description |
|---|---|---|
| align-center-z | row | Align All columns to The Center Vertically and Horizontally. |
| Horizontally Alignment | ||
| align-center-x | row | Align All Columns to The Center Horizontally. |
| align-start-x | row | Align All Columns Horizontally to The Start Point of The Row. |
| align-end-x | row | Align All Columns Horizontally to The End Point of The Row. |
| align-around | row | Align All Columns Horizontally to The Center and Make The Remaining Space Around Them. |
| align-between | row | Align All Columns Horizontally to The Center and Make The Remaining Space Between Them. |
| Vertically Alignment | ||
| align-center-y | row | Align All Columns to The Center Vertically. |
| align-start-y | row | Align All Columns Vertically to The Top of The Row. |
| align-end-y | row | Align All Columns Vertically to The Bottom of The Row. |
| Single Column Alignment | ||
| align-self-start | column | Align Column Vertically to The Top of The Row. |
| align-self-center | column | Align Column Vertically to The Center of The Row. |
| align-self-end | column | Align Column Vertically to The Bottom of The Row. |
Display Utilities
Use our display utilities for responsively toggling Show/Hide values of the display property. Mix it with our grid system, content, or components to show or hide them across specific viewports.
| Class Name | Breakpoint |
|---|---|
| Hide Elements | |
| hidden | Hide The Element Across All Screen Sizes. |
| hidden-s-up | Hide The Element From 576px Small Screen's and up. |
| hidden-s-down | Hide The Element From 640px Small Screen's and Down. |
| hidden-m-up | Hide The Element From 768px Medium Screen's and up. |
| hidden-m-down | Hide The Element From 980px Medium Screen's and Down. |
| hidden-l-up | Hide The Element From 1024px Large Screen's and up. |
| hidden-l-down | Hide The Element From 1200px Large Screen's and Down. |
| hidden-xl-up | Hide The Element From 1366px Large Screen's and up. |
| hidden-xl-down | Hide The Element From 1600px Large Screen's and Down. |
| Displaying Elements | |
| show-s-up | Show The Element From 576px Small Screen's and up. |
| show-s-down | Show The Element From 640px Small Screen's and Down. |
| show-m-up | Show The Element From 768px Medium Screen's and up. |
| show-m-down | Show The Element From 980px Medium Screen's and Down. |
| show-l-up | Show The Element From 1024px Large Screen's and up. |
| show-l-down | Show The Element From 1200px Large Screen's and Down. |
| show-xl-up | Show The Element From 1366px Large Screen's and up. |
| show-xl-down | Show The Element From 1600px Large Screen's and Down. |