color pallete

(Or) Your Color

  2. UI Kit
  3. Grid

Grid

Three Columns

Bootstrap grid system is beatiful and very easy to implement. split .col-sminside .row.

One of three columns
One of three columns
One of three columns

Equal-width

This grid system automatically split .coleqal width.

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3

Setting one column width

This grid system automatically adjust .colwidth.

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3

Variable width content

This grid system automatically justify .colwidth.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3

Equal-width multi-row

This grid system give equal .colwidth.

col
col
col
col

Stacked to horizontal

This grid system Stacked to horizontal

col-sm-8
col-sm-4
col-sm
col-sm
col-sm

Mix and match

This grid system is mix and match

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Vertical alignment

This grid system gives Vertical alignment

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns

Horizontal alignment

This grid system gives horizontal alignment.

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns

Column wrapping

This grid system give column wrapping.

.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.

Column breaks

This grid system gives column breaks.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4