The CSS Multi-column Layout Module extends the block layout mode to allow the easy definition of multiple columns of text.
If your users have trouble reading text because the lines are too long then and it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on.
Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do.
8 Multi-column Properties
1. column-count
2. column-gap
3. column-rule-style
4. column-rule-width
5. column-rule-color
6. column-rule
7. column-span
8. column-width
Two CSS properties control whether and how many columns will appear: column-count and column-width.
The column-count property sets the number of columns to a particular number.
Create Multiple Columns
The column-count property specifies the number of columns an element should be divided into.
The following example will divide the text in the div element into 2 columns
.multiple_column {
column-count: 2;
}Specify the Gap Between Columns
The column-gap property specifies the gap between the columns.
The following example specifies a 30 pixels gap between the columns:
.multiple_column {
column-gap: 30px;
}Column Rules
The column-rule-style property specifies the style of the rule between columns:
.multiple_column {
column-rule-style: solid;
}The column-rule-width property specifies the width of the rule between columns:
.multiple_column {
column-rule-width: 1px;
}The column-rule-color property specifies the color of the rule between columns:
.multiple_column {
column-rule-color: red;
}The column-rule property is a shorthand property for setting all the column-rule-* properties above.
The following example sets the width, style, and color of the rule between columns:
.multiple_column {
column-rule: 1px solid red;
}Specify How Many Columns an Element Should Span
The column-span property specifies how many columns an element should span across.
The following example specifies that the h2 element should span across all columns:
h5 {
column-span: 1;
}Specify The Column Width
The column-width property specifies a suggested, optimal width for the columns.
The following example specifies that the suggested, optimal width for the columns should be 100px:
.multiple_column {
column-width: 100px;
}
Demo
Source: MDN Docs
bootstrap css columns property
