UIkit Container

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

      <div class="uk-container"></div>

Try it now

Source Code

     <h2>UIkit:Container Component</h2>
<div class="uk-container uk-background-primary uk-light uk-padding ">
   <h2> UIkit  Container</h2>
</div>  <!--/container-->

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

      <div class="uk-container uk-container-small "></div>

Try it now

Source Code

     <div class="uk-container uk-container-small uk-container uk-background-primary uk-light" >
     <h2>Small Container</h2>
</div>

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

      <div class="uk-container uk-container-large"></div>

Try it now

Source Code

     <div class="uk-container uk-container-large uk-background-primary uk-light" >
  <h2>Large Container</h2>
</div>

Try it now

Source Code: Output

The above source code result will be:

Large Container

Expanded Container

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

General Syntax

      <div class="uk-container uk-container-expand"></div>

Try it now

Source Code

     <div class="uk-container uk-container-expand uk-background-primary uk-light">
 <h2>Expand Container</h2>
</div>

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

      <div class="uk-section uk-section-primary">
    <div class="uk-container uk-container-small"></div>
</div>

Try it now

Source Code

     <div class="uk-section uk-section-primary">
    <div class="uk-container uk-container-small uk-section-secondary">
      <h4>Container Inside The Section</h4>
    </div>
</div>

Try it now

Source Code: Output

The above source code result will be:

Container Inside The Section

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4