Tornado Logo

Standard Grid - Tornado UI v2

Tornado Standard Grid Based on Flex Box Property Flexible and Mobile First Responsive

Containers

Containers are 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%

Class : container
Container 1200px
Class : container-xl
Container 1400px
Class : container-fluid
Container 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

12/12 columns
6/12 columns
6/12 columns
4/12 columns
4/12 columns
4/12 columns
3/12 columns
3/12 columns
3/12 columns
3/12 columns
2/12 columns
2/12 columns
2/12 columns
2/12 columns
2/12 columns
2/12 columns
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12

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.

col-12 col-m-6 col-l-4
col-12 col-m-6 col-l-4
col-12 col-m-6 col-l-4
<!-- 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>

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.