elements

Grid System

  • You are here:
  • Home
  • Grid System

Boxed Grid

grid system
Full Column

ConsultingPress is based on Bootstrap 3. This is example of full width column in boxed grid. Boxed grid means that container which hold all columns has fixed width, in this case that width is 1170px.

1/2

This is example of one-half column. Class used for this column size is col-md-6. So two md-6 columns can fit in one row.

1/2

This is example of one-half column. Class used for this column size is col-md-6. So two md-6 columns can fit in one row.

1/3

This is example of one-third column. Class used for this column size is col-md-4. So three md-4 columns can fit in one row.

1/3

This is example of one-third column. Class used for this column size is col-md-4. So three md-4 columns can fit in one row.

1/3

This is example of one-third column. Class used for this column size is col-md-4. So three md-4 columns can fit in one row.

1/4

This is example of one-fourth column. Class used for this column size is col-md-3. So four md-3 columns can fit in one row.

1/4

This is example of one-fourth column. Class used for this column size is col-md-3. So four md-3 columns can fit in one row.

1/4

This is example of one-fourth column. Class used for this column size is col-md-3. So four md-3 columns can fit in one row.

1/4

This is example of one-fourth column. Class used for this column size is col-md-3. So four md-3 columns can fit in one row.

1/3

This is example of combinations of columns. For example here we have one 1/3 column and one 2/3 column. You can arrange them as you like.

2/3

This is example of combinations of columns. For example here we have one 1/3 column and one 2/3 column. You can arrange them as you like.

3/4

This is example of combinations of columns. For example here we have one 3/4 column and one 1/4 column. You can arrange them as you like.

3/4

This is example of combinations of columns. For example here we have one 3/4 column and one 1/4 column. You can arrange them as you like.

Full Width Grid

Grid system
Full Column

ConsultingPress is based on Bootstrap 3. This is example of full width column in fluid grid. Boxed grid means that container which hold all columns have fluid width, it's always 100% wide.

1/2

This is example of one-half column. Class used for this column size is col-md-6. So two md-6 columns can fit in one row.

1/2

This is example of one-half column. Class used for this column size is col-md-6. So two md-6 columns can fit in one row.

1/3

This is example of one-third column. Class used for this column size is col-md-4. So three md-4 columns can fit in one row.

1/3

This is example of one-third column. Class used for this column size is col-md-4. So three md-4 columns can fit in one row.

1/3

This is example of one-third column. Class used for this column size is col-md-4. So three md-4 columns can fit in one row.

1/4

This is example of one-fourth column. Class used for this column size is col-md-3. So four md-3 columns can fit in one row.

1/4

This is example of one-fourth column. Class used for this column size is col-md-3. So four md-3 columns can fit in one row.

1/4

This is example of one-fourth column. Class used for this column size is col-md-3. So four md-3 columns can fit in one row.

1/4

This is example of one-fourth column. Class used for this column size is col-md-3. So four md-3 columns can fit in one row.

1/3

This is example of combinations of columns. For example here we have one 1/3 column and one 2/3 column. You can arrange them as you like.

2/3

This is example of combinations of columns. For example here we have one 1/3 column and one 2/3 column. You can arrange them as you like. This is example where 1/3 column is one the first place and 2/3 column on second place in a row.

3/4

This is example of combinations of columns. For example here we have one 3/4 column and one 1/4 column. You can arrange them as you like. This is example where we have 3/4 columns on the first place and 1/4 column on second place in a row. You can switch it's places, so first column will be 3/4 and second column will be 1/4. You can use any combination of columns in a row. The main thing is to be careful that sum of numbers of it's classes is twelve. For example col-md-9 class means 9/12, that is 3/4. So the remaining colum that goes in that row is "col-md-3", which means 3/12, that is 1/4.

1/4

This is example of combinations of columns. For example here we have one 3/4 column and one 1/4 column. You can arrange them as you like.