YogeshChauhan . com

How to add multiple Columns in CSS like Bootstrap?

in CSS on November 3, 2020

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;


Source: MDN Docs


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Conditional operator in JavaScript (aka ternary operator)JavaScriptHTML canvas methodsHTML2 Ways we can create an Array in JavaScriptJavaScriptA list of wp-cli commands to use via SSHWordPressHow to select an element using its ID without the high specificity of the ID selector?CSSperspective property in CSSCSS