UIkit Container

admin

7 years ago

UIkit Container– This component allows you to create container which is center aligned. Class .uk-container is used to create simple container. Here in this tutorial, we are going to explain how to use container component. You can also use our online editor to edit and run the code online.

UIkit Container Example

To create container add class uk-container, It will contain the max-width of the website with padding on both sides.

UIkit Container Example:

<div class="uk-container">
<h1>Learn UIkit on Tutorialsplane.com!</h1>
</div>

Try it »

Output of above example is-

Size Modifiers

Following modifier classes are available which we can use to have different-different max-width.

Class	Description
.uk-container-small	Use this to create narrow container.
.uk-container-large	Use this to create wide container.
.uk-container-expand	This will create container to full width with dynamic horizontal padding.

Now let us create a simple example to understand the above containers.

Modifiers Example:

<div class="uk-container uk-container-small amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">
<h2>Small Container</h2>
</div>

<div class="uk-container uk-container-large amp-wp-inline-9e7c0ce1766b3bbfecedd85cb626a503">
  <h2>Large Container</h2>
</div>

<div class="uk-container uk-container-expand amp-wp-inline-946849c0979ce96d9dfcc0062d8cd761">
 <h2>Expand Container</h2>
</div>

Try it »

If you run the above example it will produce output something like this-