Each column in a container also has it’s own settings you can apply. These are:
- Custom visibility, margin and bottom values which can be customized for 5 responsive sizes:
- Default – On Screen sizes higher than 1200px
- Large Desktop – On Screen sizes up to 1200px
- Desktop – On screen size 1024px
- Tablet – On Tablet Portrait screen size 768px
- Mobile – On screen sizes up to 520px
- Background image
- Colors
- Border
- Border Radius
- Column specific vertical alignment
- Z-Index (priority)
- Background Stretch: Allows column background to stretch to the height of the parent container.
When is Background Stretch used?
An example scenario would be: You have 2 columns with right column has a lot of content, and lets say left column has no content and has a background image. Normally the left column height would fall short agains the right column.
Before Background Stretch:
Left Column
Right Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum lectus non pretium maximus. Aliquam vel eleifend augue, ut molestie dui. In nec ligula rhoncus, aliquam massa sed, laoreet diam. Sed lectus mauris, dictum in eros sed, elementum porta ligula. Fusce dignissim eros lacus, non interdum tellus hendrerit blandit.
After Background Stretch:
Left Column
Right Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum lectus non pretium maximus. Aliquam vel eleifend augue, ut molestie dui. In nec ligula rhoncus, aliquam massa sed, laoreet diam. Sed lectus mauris, dictum in eros sed, elementum porta ligula. Fusce dignissim eros lacus, non interdum tellus hendrerit blandit.
The Z-Index Option
You can use the z-index values to overlap columns on each other:
Column 1 — z-index 3
This column has -50px negative margin to the right.
Maecenas vestibulum lectus non pretium maximus. Aliquam vel eleifend augue, ut molestie dui. In nec ligula rhoncus, aliquam massa sed, laoreet diam. Sed lectus mauris, dictum in eros sed, elementum porta ligula. Fusce dignissim eros lacus, non interdum tellus hendrerit blandit.
Column 2 — z-index 2
Maecenas vestibulum lectus non pretium maximus. Aliquam vel eleifend augue, ut molestie dui. In nec ligula rhoncus, aliquam massa sed, laoreet diam. Lorem ipsum dolor sit amet
Column 3 — z-index 1
This column has -50px negative margin to the left.
Z-Index Another Example:
Left Column
This column has higher z-index
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum lectus non pretium maximus. Aliquam vel eleifend augue, ut molestie dui.