UIkit Columns

UIkit Columns

UIkit columns component is to display content into multiple columns without splitting several containers.

Steps To Use UIkit Column Component

Add .uk-column-* to an element to display the inline content into multiple columns. Here * refers to a fractional unit that belongs to one {1-2|1-3|1-4|1-5|1-6} of the following unit.

Class Descriptions
.uk-column-1-2 Display the content in two columns.
.uk-column-1-3 Display the content in three columns.
.uk-column-1-4 Display the content in four columns.
.uk-column-1-5 Display the content in five columns.
.uk-column-1-6 Display the content in six columns.

Example

sudhakarinfotech is a world one of the best online platform for learning front and back-end development technology.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

sudhakarinfotech is a world one of the best online platform for learning front and back-end development technology.

Responsive Columns

UIkit provides various responsive column classes. It works like a usual column class and has suffixes that represent the breakpoint from which they come to effect.

Class Description
.uk-column-1-2@s to .uk-column-1-6@s Only affects device widths of 640px and higher.
.uk-column-1-2@m to .uk-column-1-6@m Only affects device widths of 960px and higher.
.uk-column-1-2@l to .uk-column-1-6@l Only affects device widths of 1200px and higher.
.uk-column-1-2@xl to .uk-column-1-6@xl Only affects device widths of 1600px and higher.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.