UIkit Text Align

UIkit Text Align

The UIkit text align component controls the alignment of inline element. It aligns the inline elements in the left, center or right direction.

Steps To Use Align Component

The UIkit align component provides the following predefined classes:

  1. .uk-align-left: It floats the element to the left and creates the right and bottom margin.
  2. .uk-align-right: It floats the element to the right and creates the left and bottom margin.
  3. .uk-align-center: It centers the element and creates a bottom margin.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Example image

sudhakarinfotech provides various front-end and back-end technology for web development. You have to learn one by one so that you can learn easily.

sudhakarinfotech provides HTML5,CSS3,JS,JQUERY,Ajax,Json,PHP,MySQL,etc Tutorials.

UIkit Align:Responsive Classes

UIkit provides a number of responsive classes that will come into action after the specific breakpoint.

Class Description
.uk-align-left@s .uk-align-right@s Only affects device having widths >=640px.
.uk-align-left@m .uk-align-right@m Only affects device having widths >=960px.
.uk-align-left@l .uk-align-right@l Only affects device having widths >=1200px.
.uk-align-left@xl .uk-align-right@xl Only affects device having widths >=1600px .

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

image

sudhakarinfotech provides step by step guide to learn the basic concept with the help of various example.

You can learn front-end and back-end technology step by step.