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/
