General Settings

Base Font Size

Theme Settings

Default
Material
Material Design Soon

Grid Systems

  • Home
  • UI Elements
  • Grids

Bootstrap Grid System

Basic Layout

.col-lg-1
.col-lg-1
.col-md-1
.col-sm-1
.col-xs-1
.col-lg-11
.col-lg-11
.col-md-11
.col-sm-11
.col-xs-11
.col-lg-2
.col-lg-2
.col-md-2
.col-sm-2
.col-xs-2
.col-lg-10
.col-lg-10
.col-md-10
.col-sm-10
.col-xs-10
.col-lg-3
.col-lg-3
.col-md-3
.col-sm-3
.col-xs-3
.col-lg-9
.col-lg-9
.col-md-9
.col-sm-9
.col-xs-9
.col-lg-4
.col-lg-4
.col-md-4
.col-sm-4
.col-xs-4
.col-lg-8
.col-lg-8
.col-md-8
.col-sm-8
.col-xs-8
.col-lg-5
.col-lg-5
.col-md-5
.col-sm-5
.col-xs-5
.col-lg-7
.col-lg-7
.col-md-7
.col-sm-7
.col-xs-7
.col-lg-6
.col-lg-6
.col-md-6
.col-sm-6
.col-xs-6
.col-lg-6
.col-lg-6
.col-md-6
.col-sm-6
.col-xs-6

2 Column Example

No .col-xl-... column
.col-lg-7
.col-md-6
.col-sm-8
.col-xs-3
in Bootstrap
.col-lg-5
.col-md-6
.col-sm-4
.col-xs-9

3 Column Examples

.col-lg-2
.col-lg-2
.col-md-5
.col-sm-6
.col-xs-3
.col-lg-5
.col-lg-5
.col-md-6
.col-sm-4
.col-xs-5
.col-lg-5
.col-lg-5
.col-md-1
.col-sm-2
.col-xs-4
.col-lg-6
.col-lg-6
.col-md-12
.col-sm-6
.col-xs-12
.col-lg-6
.col-lg-6
.col-md-6
.col-sm-6
.col-xs-12
.col-lg-12
.col-lg-12
.col-md-6
.col-sm-12
.col-xs-12

4 Column Example

.col-lg-6
.col-lg-6
.col-md-7
.col-sm-6
.col-xs-3
.col-lg-6
.col-lg-6
.col-md-5
.col-sm-6
.col-xs-3
.col-lg-6
.col-lg-6
.col-md-8
.col-sm-12
.col-xs-6
.col-lg-6
.col-lg-6
.col-md-4
.col-sm-12
.col-xs-12

Ason Grid System with Gutter

Basic Layout

.l-col-xl-1
.l-col-lg-1
.l-col-md-1
.l-col-sm-1
.l-col-xs-1
.l-col-xl-11
.l-col-lg-11
.l-col-md-11
.l-col-sm-11
.l-col-xs-11
.l-col-xl-2
.l-col-lg-2
.l-col-md-2
.l-col-sm-2
.l-col-xs-2
.l-col-xl-10
.l-col-lg-10
.l-col-md-10
.l-col-sm-10
.l-col-xs-10
.l-col-xl-3
.l-col-lg-3
.l-col-md-3
.l-col-sm-3
.l-col-xs-3
.l-col-xl-9
.l-col-lg-9
.l-col-md-9
.l-col-sm-9
.l-col-xs-9
.l-col-xl-4
.l-col-lg-4
.l-col-md-4
.l-col-sm-4
.l-col-xs-4
.l-col-xl-8
.l-col-lg-8
.l-col-md-8
.l-col-sm-8
.l-col-xs-8
.l-col-xl-5
.l-col-lg-5
.l-col-md-5
.l-col-sm-5
.l-col-xs-5
.l-col-xl-7
.l-col-lg-7
.l-col-md-7
.l-col-sm-7
.l-col-xs-7
.l-col-xl-6
.l-col-lg-6
.l-col-md-6
.l-col-sm-6
.l-col-xs-6
.l-col-xl-6
.l-col-lg-6
.l-col-md-6
.l-col-sm-6
.l-col-xs-6

2 Column Example

.l-col-xl-2
.l-col-lg-7
.l-col-md-6
.l-col-sm-8
.l-col-xs-3
.l-col-xl-10
.l-col-lg-5
.l-col-md-6
.l-col-sm-4
.l-col-xs-9

3 Column Examples

.l-col-xl-2
.l-col-lg-2
.l-col-md-5
.l-col-sm-6
.l-col-xs-3
.l-col-xl-8
.l-col-lg-5
.l-col-md-6
.l-col-sm-4
.l-col-xs-5
.l-col-xl-2
.l-col-lg-5
.l-col-md-1
.l-col-sm-2
.l-col-xs-4
.l-col-xl-6
.l-col-lg-6
.l-col-md-12
.l-col-sm-6
.l-col-xs-12
.l-col-xl-3
.l-col-lg-6
.l-col-md-6
.l-col-sm-6
.l-col-xs-12
.l-col-xl-3
.l-col-lg-12
.l-col-md-6
.l-col-sm-12
.l-col-xs-12

4 Column Example

.l-col-xl-3
.l-col-lg-6
.l-col-md-7
.l-col-sm-6
.l-col-xs-3
.l-col-xl-3
.l-col-lg-6
.l-col-md-5
.l-col-sm-6
.l-col-xs-3
.l-col-xl-3
.l-col-lg-6
.l-col-md-8
.l-col-sm-12
.l-col-xs-6
.l-col-xl-3
.l-col-lg-6
.l-col-md-4
.l-col-sm-12
.l-col-xs-12

Ason Grid System without Gutter

Basic Layout

.l-span-xl-1
.l-span-lg-1
.l-span-md-1
.l-span-sm-1
.l-span-xs-1
.l-span-xl-11
.l-span-lg-11
.l-span-md-11
.l-span-sm-11
.l-span-xs-11
.l-span-xl-2
.l-span-lg-2
.l-span-md-2
.l-span-sm-2
.l-span-xs-2
.l-span-xl-10
.l-span-lg-10
.l-span-md-10
.l-span-sm-10
.l-span-xs-10
.l-span-xl-3
.l-span-lg-3
.l-span-md-3
.l-span-sm-3
.l-span-xs-3
.l-span-xl-9
.l-span-lg-9
.l-span-md-9
.l-span-sm-9
.l-span-xs-9
.l-span-xl-4
.l-span-lg-4
.l-span-md-4
.l-span-sm-4
.l-span-xs-4
.l-span-xl-8
.l-span-lg-8
.l-span-md-8
.l-span-sm-8
.l-span-xs-8
.l-span-xl-5
.l-span-lg-5
.l-span-md-5
.l-span-sm-5
.l-span-xs-5
.l-span-xl-7
.l-span-lg-7
.l-span-md-7
.l-span-sm-7
.l-span-xs-7
.l-span-xl-6
.l-span-lg-6
.l-span-md-6
.l-span-sm-6
.l-span-xs-6
.l-span-xl-6
.l-span-lg-6
.l-span-md-6
.l-span-sm-6
.l-span-xs-6

2 Column Example

.l-span-xl-2
.l-span-lg-7
.l-span-md-6
.l-span-sm-8
.l-span-xs-3
.l-span-xl-10
.l-span-lg-5
.l-span-md-6
.l-span-sm-4
.l-span-xs-9

3 Column Examples

.l-span-xl-2
.l-span-lg-2
.l-span-md-5
.l-span-sm-6
.l-span-xs-3
.l-span-xl-8
.l-span-lg-5
.l-span-md-6
.l-span-sm-4
.l-span-xs-5
.l-span-xl-2
.l-span-lg-5
.l-span-md-1
.l-span-sm-2
.l-span-xs-4
.l-span-xl-6
.l-span-lg-6
.l-span-md-12
.l-span-sm-6
.l-span-xs-12
.l-span-xl-3
.l-span-lg-6
.l-span-md-6
.l-span-sm-6
.l-span-xs-12
.l-span-xl-3
.l-span-lg-12
.l-span-md-6
.l-span-sm-12
.l-span-xs-12

4 Column Example

.l-span-xl-3
.l-span-lg-6
.l-span-md-7
.l-span-sm-6
.l-span-xs-3
.l-span-xl-3
.l-span-lg-6
.l-span-md-5
.l-span-sm-6
.l-span-xs-3
.l-span-xl-3
.l-span-lg-6
.l-span-md-8
.l-span-sm-12
.l-span-xs-6
.l-span-xl-3
.l-span-lg-6
.l-span-md-4
.l-span-sm-12
.l-span-xs-12