UIkit Container Element

UIkit Container Element

UIkit container element contains the max-width of the website and has padding on both sides. It is used to center the web page content.

Steps To Create UIkit Container

To create a UIkit container, simply add .uk-container class to the block element. It will cover max-width and generate padding on both sides.

Example

UIkit Container

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

UIkit:Container Component

UIkit Container

UIkit Container Size modifiers

UIkit provides different size modifier classes that are used to create different max-width based on the different viewport widths i.e device-width such as mobile, tablet, etc.

Class Description
.uk-container-xsmall -It is used to create an extra small container.
.uk-container-small -It is used to create a small container.
.uk-container-large -It is used to create a large container.
.uk-container-xlarge -It is used to create an extra large container.
.uk-container-expand -It is used to create a full-width container with dynamic horizontal padding.

Small Container

To create a small container, add .uk-container-small class to the container having class .uk-container.

Example

Small Container

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Small Container

Large Container

To create large container, add .uk-container-large class to the container having class .uk-container.

Example

Large Container

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Large Container

Large Container

To create expanded container, add .uk-container-expand class to the container having class .uk-container.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Expand Container

Placing Container inside The Sections

You can place a container inside the section to modify the width of the content inside the sections from the Section component.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Container Inside The Section