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

      <div class="uk-column-1-{2|3|4|5|6}"></div>

Try it now

Source Code

     <div class="uk-column-1-2">
    <p>
      sudhakarinfotech is a world one of the best online platform for learning front and back-end development technology.
     </p> 
</div>

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

      <div class="uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l"></div>

Try it now

Source Code

     <div class="uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l">
  <p> sudhakarinfotech is an online learning platform for professionals as well as beginners. You can learn & understand different programming languages in an easy way. Every concept is described with the help of numerous examples so that users could understand the concept easily. You can also use an online code editor to test the source code.
  </p>
</div>

Try it now

Source Code: Output

The above source code result will be:

sudhakarinfotech is an online learning platform for professionals as well as beginners. You can learn & understand different programming languages in an easy way. Every concept is described with the help of numerous examples so that users could understand the concept easily. You can also use an online code editor to test the source code.

UIkit Columns

Steps To Use UIkit Column Component

Example

Responsive Columns

Related Tutorial

Web Tutorials