Open Streetmap

Columns setup

It is possible to create different variations in column sizes between columns. The layout has a 12 column setup.

This means a general layout with 1, 2, 3, 4 or 6 columns is possible. But in our framework 5 columns are also possible.

12/12 cols = 1  |  6/12 cols = 1/2  |  4/12 cols = 1/3 |  3/12 cols = 1/4 |  20% = 1/5 |  2/12 cols = 1/6

1 column setup u-mb-2 u-p-3 u-background-color-1 u-text-color-white. 1 column setup u-mb-2 u-p-3 u-background-color-1 u-text-color-white. 1 column setup u-mb-2 u-p-3 u-background-color-1 u-text-color-white.

2 column setup u-mb-2 u-p-3 u-background-color-3 u-text-color-white. 2 column setup u-mb-2 u-p-3 u-background-color-3 u-text-color-white.

2 column setup u-mb-2 u-p-3 u-background-color-3 u-text-color-white. 2 column setup u-mb-2 u-p-3 u-background-color-3 u-text-color-white.

3 column setup u-mb-2 u-p-3 u-background-color-4 u-text-color-white

3 column setup u-mb-2 u-p-3 u-background-color-4 u-text-color-white

3 column setup u-mb-2 u-p-3 u-background-color-4 u-text-color-white

4 column setup u-mb-2 u-p-3 u-background-color-5 u-text-color-white

4 column setup u-mb-2 u-p-3 u-background-color-5 u-text-color-white

4 column setup u-mb-2 u-p-3 u-background-color-5 u-text-color-white

4 column setup u-mb-2 u-p-3 u-background-color-5 u-text-color-white

5 column setup u-mb-2 u-p-3 u-background-color-6 u-text-color-white

5 column setup u-mb-2 u-p-3 u-background-color-6 u-text-color-white

5 column setup u-mb-2 u-p-3 u-background-color-6 u-text-color-white

5 column setup u-mb-2 u-p-3 u-background-color-6 u-text-color-white

5 column setup u-mb-2 u-p-3 u-background-color-6 u-text-color-white

6 column setup u-mb-2 u-p-3 u-background-color-7 u-text-color-white

6 column setup u-mb-2 u-p-3 u-background-color-7 u-text-color-white

6 column setup u-mb-2 u-p-3 u-background-color-7 u-text-color-white

6 column setup u-mb-2 u-p-3 u-background-color-7 u-text-color-white

6 column setup u-mb-2 u-p-3 u-background-color-7 u-text-color-white

6 column setup u-mb-2 u-p-3 u-background-color-7 u-text-color-white

Column Examples

So you can also use a combination of  6/12 cols = 1/2  +   3/12 cols = 1/4  +   3/12 cols = 1/4

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Or you can use a combination of  4/12 cols = 1/3  +   2/12 cols = 1/6  +   2/12 cols = 1/6  +   4/12 cols = 1/3

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.

Column Gutter Width

Column Gutter Widths: None, XS, SM ,MD, LG, XL, XXL

c-row–no-gutter

c-row–no-gutter

c-row–no-gutter

c-row–xs-gutter

c-row–xs-gutter

c-row–xs-gutter

c-row–sm-gutter

c-row–sm-gutter

c-row–sm-gutter

c-row–md-gutter

c-row–md-gutter

c-row–md-gutter

c-row–lg-gutter

c-row–lg-gutter

c-row–lg-gutter

c-row–xl-gutter

c-row–xl-gutter

c-row–xl-gutter

c-row–xxl-gutter

c-row–xxl-gutter

c-row–xxl-gutter

Equal Height

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Columns Align Left

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Columns Align Center

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Columns Align Right

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Vertical Align - Top

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Vertical Align - Middle

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Vertical Align - Bottom

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Read more about our grid system over at https://getbootstrap.com/docs/4.4/layout/grid/

Ook automatisch en effectief

jouw (woning)aanbod tonen?

© 2021 MAPI Alle rechten voorbehouden

Algemene voorwaarden