Standard Grid
Tornado Standard Grid Based on Flex Box Property Flexible and Mobile First Responsive
Containers
Containers ar a containing element to wrap and centering site contents and is required for the grid system.
You may choose one of three containers to use in your projects.
for standard normal usage use (container) class name will gave you container with max width 1200px ,
for Large Clean Designs usage use (container-xl) class name will gave you container with max width 1400px and
for Full Width use (container-fluid) class name will gave you container with width 100%
<!-- Standard Container --> <div class="container"> <!-- Site Content --> <div> <!-- Large Container --> <div class="container-xl"> <!-- Site Content --> <div> <!-- Full Width Container --> <div class="container-fluid"> <!-- Site Content --> <div>
Container Code Example
Default Grid
Tornado using a standard 12 column Flexible mobile first responsive grid system scales up to the device or viewport size increases. It includes predefined classes for easy layout options , the columns elements must be placed into a .row Wrap and Rows must be placed within a container element for proper alignment and padding. except in one case that you use class .no-gutter with the .row container scroll down to see example of all columns cases
Standard Grid Usage
in order to use grid system first of all you create a container element then add a row wraper inside of your container element.
<!-- Standard Container --> <div class="container"> <!-- Row Wraper --> <div class="row"> <!-- Columns Elements --> <div> <div>
Container and Row Structure for Grid System
Auto/Adaptive Equal Columns Width
By using class col-auto you can easly create equal width columns depending on there number thats meen when puting x5 columns they will automaticly take an equal width on a row line.
<!-- Standard Container --> <div class="container"> <!-- Row Wraper --> <div class="row"> <!-- Columns Elements --> <div class="col-auto"></div> <div class="col-auto"></div> <div class="col-auto"></div> <div class="col-auto"></div> <div class="col-auto"></div> <div> <div>
Automatice Equal Columns Code
Responsive Columns
Grid Responsive Works and Depending on Specefic Size in Each Screen Size by Using Breakpoint Prefixed Class in the Table Below You Will See List of the Columns Breakpoint Class.
Options | Extra small | small | Medium | Large | Extra Large |
---|---|---|---|---|---|
Screen Size | <== 576px | 576px ==> | 768px ==> | 1024px ==> | 1366px ==> |
Class prefix's | col-#number | col-s-#number | col-m-#number | col-l-#number | col-xl-#number |
Default # of columns | 12 columns and can be change via sass. | ||||
Default Columns Gutter | 30px (15px on each side of a column) | ||||
Nesting Support | Fully Support |
Responsive Grid Example
Resize to see the Next Responsive Columns in Action.
<!-- Columns Wraper --> <div class="row"> <!-- Column Element --> <div class="col-12 col-m-6 col-l-4"> 12/12 in mobile 6/12 in tablets 4/12 in Desktop's </div> <!-- Column Element --> <div class="col-12 col-m-6 col-l-4"> 12/12 in mobile 6/12 in tablets 4/12 in Desktop's </div> <!-- Column Element --> <div class="col-12 col-m-6 col-l-4"> 12/12 in mobile 6/12 in tablets 4/12 in Desktop's </div> </div>
Responsive Grid Example Code.