Container

This component allows you to align and center your page content.

Usage

Add the .uk-container class to a block element to give it a max-width and wrap the main content of your website. The element will be centered and have padding on the sides, that adapts automatically for large screens.

Note The padding of nested containers will be removed to avoid unnecessary spacing.

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

Size modifiers

Add one of the following classes to the container to apply a different max-width.

ClassDescription
.uk-container-xsmallAdd this class for a xsmall container.
.uk-container-smallAdd this class for a small container.
.uk-container-largeAdd this class for a large container.
.uk-container-xlargeAdd this class for a xlarge container.
.uk-container-expandAdd this class, if you do not want to limit the container width but still want the dynamic horizontal padding.
<div class="uk-container uk-container-xsmall"></div>

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

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

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

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

Container in sections

You can apply this component to modify the width of content inside sections from the Section component.

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

Theme development

On your tailwind.config.js file, add the Container component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        container: {
            hooks: {},
            media: true
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-misc*