Easily create nicely looking buttons, which come in different styles.

Usage

To apply this component, add the .uk-button class to an <a> or <button> element. Now you have created a button. Add the disabled attribute to a <button> element to disable the button.

Example

Link Button Disabled

Markup

<a class="uk-button" href="">...</a>
<button class="uk-button" type="button">...</button>
<button class="uk-button" type="button" disabled>...</button>

NOTE If you are displaying a number of buttons in a row, you can add a top margin to them, when they stack on smaller viewports. Just add the data-uk-margin attribute from the Utility component to their parent element.

Color modifiers

There are several color modifiers available. Just add one of the following classes to apply a different look.

Size modifiers

Add the .uk-button-mini, .uk-button-small or .uk-button-large class to a button to make it smaller or larger.

Mini button Mini button

Small button Small button

Default button Default button

Large button Large button

Full width button

Add the .uk-width-1-1 class from the Grid component and the button will take up full width.

Example

Button Button

Markup

<button class="uk-button uk-width-1-1 uk-margin-small-bottom">...</button>
<button class="uk-button uk-width-1-1">...</button>

Button group

To create a button group, add the .uk-button-group class to a <div> element around the buttons. That's it! No further markup needed.

Example

Markup

<div class="uk-button-group">
    <a class="uk-button" href="">...</a>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

JavaScript

You can toggle button states via JavaScript. Just add the data attibute data-uk-button.

Example

Markup

<button class="uk-button uk-button-primary" type="button" data-uk-button>Button</button>

Checkbox buttons

Toggle between a group of buttons like a checkbox by wrapping a <div> element with the data attribute data-uk-button-checkbox around them. This can also be applied to a button group.

Example

Markup

<div data-uk-button-checkbox>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

Radio buttons

Toggle between a group of buttons, like radio buttons, by wrapping a div element that uses data-uk-button-radio around them. This can also be applied to a button group.

Example

Markup

<div data-uk-button-radio>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

Button with dropdowns

A button can be used to trigger a dropdown menu from the Dropdown component. Just add the .uk-button-dropdown class and the data-uk-dropdown attribute to a <div> element that contains the button and the dropdown itself.

Example

Markup

<!-- This is the container enabling the JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- This is the button toggling the dropdown -->
    <button class="uk-button">...</button>

    <!-- This is the dropdown -->
    <div class="uk-dropdown uk-dropdown-small">
        <ul class="uk-nav uk-nav-dropdown">
            <li><a href="">...</a></li>
            <li><a href="">...</a></li>
        </ul>
    </div>

</div>

Button group with dropdowns

Use button groups to split buttons into a standard action on the left and a dropdown toggle on the right. Just wrap a <div> element around the button and the dropdown and add the data-uk-dropdown="{mode:'click'}" attribute. Of course, a dropdown can also be applied to a button within a button group.

Example

Markup

<div class="uk-button-group">

    <!-- This is a button -->
    <button class="uk-button">...</button>

    <!-- This is the container enabling the JavaScript -->
    <div data-uk-dropdown="{mode:'click'}">

        <!-- This is the button toggling the dropdown -->
        <a href="" class="uk-button">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
                <li><a href="">...</a></li>
            </ul>
        </div>

    </div>
</div>

Easily create nicely looking forms with different styles and layouts.

Usage

To apply this component, add the .uk-form class to a form element. All form control elements are placed side by side within the next row.

Example

NOTE In this example we used a button from the Button component. To add a top margin to form elements, when they stack on smaller viewports, just add the data-uk-margin attribute from the Utility component to the parent element.

Markup

<form class="uk-form">

    <fieldset data-uk-margin>
        <legend>...</legend>
        <input type="text" placeholder="">
        <input type="password" placeholder="">
        <select>
            <option>...</option>
            <option>...</option>
        </select>
        <button class="uk-button">...</button>
        <label><input type="checkbox"> ...</label>
    </fieldset>

</form>

Rows

Add the .uk-form-row class to a <div> element to stack form controls.

Example

Markup

<form class="uk-form">
    <fieldset>
        <legend>...</legend>
        <div class="uk-form-row">...</div>
        <div class="uk-form-row">...</div>
    </fieldset>
</form>

Control states

Provide the user with basic information through feedback states on form controls.

Disabled

Add the disabled attribute to a form control and it will be appear muted.

Example

Markup

<input type="text" placeholder="" disabled>

Validation states

Add the .uk-form-danger or .uk-form-success class to a form control to notify the user, whether or not the value is validated.

Example

Markup

<input type="text" placeholder="" class="uk-form-danger">
<input type="text" placeholder="" class="uk-form-success">

Control modifiers

Size modifiers

Add the .uk-form-large or .uk-form-small class to an <input>, <select> or <textarea> element to make it smaller or larger.

Example

Markup

<input type="text" placeholder="" class="uk-form-large">
<input type="text" placeholder="" class="uk-form-small">

Width modifiers

Add the .uk-form-width-large, .uk-form-width-medium, .uk-form-width-small or .uk-form-width-mini class to an <input>, <select> or <textarea> element to adjust its width.

Example

Markup

<input type="text" placeholder="" class="uk-form-width-large">
<input type="text" placeholder="" class="uk-form-width-medium">
<input type="text" placeholder="" class="uk-form-width-small">
<input type="text" placeholder="" class="uk-form-width-mini">

You can also apply the .uk-width-* classes from the Grid component to form controls. This is especially useful, if you want form controls to extend to the full width of their parent container.

Example

Markup

<input type="text" placeholder="" class="uk-width-1-1">

Form blank

Add the .uk-form-blank class to minimize the styling of form controls.

Example

Markup

<input type="text" placeholder="" class="uk-form-blank">

Help text

Use the .uk-form-help-inline or .uk-form-help-block class to add inline and block level help text for the controls.

Example

Markup

<div class="uk-form-row">
    <input type="text" placeholder=""> <span class="uk-form-help-inline">...</span>
</div>

<div class="uk-form-row">
    <textarea cols="" rows="" placeholder="">...</textarea>
    <p class="uk-form-help-block">...</p>
</div>

Layout modifiers

There are two layout modifiers available: .uk-form-stacked and .uk-form-horizontal. Both require form controls to be wrapped with the .uk-form-row class in order to stack them. Labels need the .uk-form-label class and controls must be wrapped in the .uk-form-controls class.

Markup

<form class="uk-form uk-form-stacked">
    <div class="uk-form-row">
        <label class="uk-form-label" for="">...</label>
        <div class="uk-form-controls">...</div>
    </div>
</form>

NOTE Layout modifiers can also be added to a <fieldset> element. This means, if you use fieldsets, you can have different form layouts for each fieldset.

Form stacked

Add the .uk-form-stacked class to display labels on top of controls.

Example

Form horizontal

Add the .uk-form-horizontal class to display labels and controls side by side.

Example

Text in form controls

If you use text and checkboxes or radio buttons in form controls, just add the .uk-form-controls-text class to align the text properly.

Markup

<div class="uk-form-controls uk-form-controls-text">...</div>

Vertical spacing in form controls

If you create paragraphs in form controls, add the .uk-form-controls-condensed class to reduce spacing.

Example

Markup

<div class="uk-form-controls uk-form-controls-text">
    <p class="uk-form-controls-condensed">...</p>
    <p class="uk-form-controls-condensed">...</p>
</div>

Form and grid

This is an example of how to use forms with the Grid component.

Example

Markup

<form class="uk-form">

    <div class="uk-grid">
        <div class="uk-width-1-2"><input type="text" placeholder="" class="uk-width-1-1"></div>
        <div class="uk-width-1-4"><input type="text" placeholder="" class="uk-width-1-1"></div>
        <div class="uk-width-1-4"><input type="text" placeholder="" class="uk-width-1-1"></div>
    </div>

</form>

Form and icons

This is an example of how to add an icon from the Icon component to a form.

Example

Markup

<div class="uk-form-icon">
    <i class="uk-icon-calendar"></i>
    <input type="text">
</div>

Form advanced

Easily create nicely looking tables, which come in different styles.

Usage

To apply this component, add the .uk-table class to a table. The table rows will be separated by lines.

Example

Markup

<table class="uk-table">
    <caption>...</caption>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

Columns

To modify the column width or content, you can use other components. Here are some useful examples:

Markup

<td class="uk-width-1-10 uk-text-right">...</td>
<td class="uk-width-9-10 uk-text-bold">...</td>

Vertical modifier

To vertically center table content, just add the .uk-table-middle class to the <tr> or <td> elements.

Modifiers

To display the table in a different style, just add a modifier to the the .uk-table class.

Table hover

Add the .uk-table-hover class to display a hover state on table rows.

Example

Markup

<table class="uk-table uk-table-hover">...</table>

Table striped

Add zebra-striping to a table by adding the .uk-table-striped class.

Example

Markup

<table class="uk-table uk-table-striped">...</table>

Table condensed

Add the .uk-table-condensed class to make table cells more compact.

Example

Markup

<table class="uk-table uk-table-condensed">...</table>

Combine modifiers

The modifiers of the Table component are combinable with each other.

Example

Markup

<table class="uk-table uk-table-hover uk-table-striped uk-table-condensed">...</table>

Responsive Table

If your table happens to be wider that its container element or would eventually get too big on a specific viewport width, just wrap it inside a <div> element and add the .uk-overflow-container class. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.

Example

Markup

<div class="uk-overflow-container">
    <table>...</table>
</div>

Create a tabbed navigation with different styles.

Usage

The Tab component consists of clickable tabs, that are aligned side by side.

The data-uk-tab attribute is required for two purposes. Firstly, it enables the responsive behaviour. If the parent container is too small to accomodate all tabs, they will be combined into a dropdown, toggled by a single tab, which represents the active tab item. This also requires the Dropdown component in order to work.

And secondly, its functionality is coupled to the Switcher component, which is necessary to dynamically transition through different contents using tabbed navigation.

Example

• Active
• Item
• Item
• Disabled
• Active

Markup

<ul class="uk-tab" data-uk-tab>
    <li class="uk-active"><a href="">...</a></li>
    <li><a href="">...</a></li>
    <li><a href="">...</a></li>
    <li class="uk-disabled"><a href="">...</a></li>
</ul>

Horizontal modifiers

Add one of the following classes to alter your tabs' styling. These modifiers can also be combined.

Align tabs

Example

Markup

<ul class="uk-tab uk-tab-flip" data-uk-tab>...</ul>
<ul class="uk-tab uk-tab-bottom" data-uk-tab>...</ul>

Justify tabs

Add the .uk-tab-grid class and one of the .uk-width-* classes from the Grid component to the list items to arrange tabs in a grid that takes up full width of its parent element.

Example

Markup

<ul class="uk-tab uk-tab-grid uk-tab-bottom" data-uk-tab>
    <li class="uk-width-1-3"><a href="">...</a></li>
</ul>

Center tabs

Add the .uk-tab-center class to a <div> element around the tabbed navigation to center tabs.

Example

Markup

<div class="uk-tab-center">
    <ul class="uk-tab" data-uk-tab>...</ul>
</div>

Vertical modifiers

Add the .uk-tab-left or .uk-tab-right class to align tabs vertically to the left or right side.

Example

Markup

<ul class="uk-tab uk-tab-left uk-width-medium-1-2">
    <li>...</li>
</ul>

<ul class="uk-tab uk-tab-right uk-width-medium-1-2">
    <li>...</li>
</ul>

Responsive behavior

In narrower viewports, like phones, vertical tabs align themselves horizontally. Adding the data-uk-tab attribute will apply the same responsive behavior as horizontal tabs.

Tabs with dropdowns

This is an example of how to use tabs with the Dropdown component.

Example

• Active
• Item
• Item
• More
  • Item
  • Another item
  • Header
  • Item
  • Another item
  • Separated item
• Active

Markup

<ul class="uk-tab">
    <li><a href="">...</a></li>

    <!-- This is the container enabling the JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- This is the menu item toggling the dropdown -->
        <a href="">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </li>
</ul>

A collection of useful utility classes to style your content.

Container

Add the .uk-container class to a block element to give it a max-width and wrap the main content of your website. For large screens it applies a different max-width.

Centering

To center the container, use the .uk-container-center class. For any other block element, you additionally need to apply a width.

Example

Markup

<div class="uk-width-medium-1-2 uk-container-center">...</div>

Clearing and floating

Floating is fundamental for creating all kinds of layouts. But floats need to be cleared or in the worst case, you might end up with a scrambled site. The following classes will help you to setup basic layouts.

Markup

<div class="uk-clearfix">
    <div class="uk-float-right">...</div>
    <div class="uk-float-left">...</div>
</div>

New block formatting context

Instead of using the .uk-clearfix class, you can create a new block formatting context to clear floats. Depending on your setup, you can evaluate which method is more suited.

Alignment of images and objects

Align images or other elements with spacing between the text and the element.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Markup

<p class="uk-clearfix">
    <img class="uk-align-medium-right" src="" alt="">
    ...
</p>

Vertical alignment

To align objects vertically, you need to create a parent container to which the object itself will be aligned.

Example

Markup

<div class="uk-vertical-align">
    <div class="uk-vertical-align-middle">
    ...
    </div>
</div>

<div class="uk-vertical-align">
    <div class="uk-vertical-align-bottom">
    ...
    </div>
</div>

NOTE The object you align needs to have a width or max-width that is smaller than its parent container.

Center the entire page

The .uk-height-1-1 class comes in handy, if you want to extend the <html> and <body> elements to the full height of the page. This can be very useful when creating error pages.

Markup

<html class="uk-height-1-1">
    ...
    <body class="uk-height-1-1">
        <div class="uk-vertical-align">
            <div class="uk-vertical-align-middle">...</div>
        </div>
    </body>
</html>

Center horizontally

To center your content horizontally as well, add the .uk-text-center class to the parent and the .uk-container-center class to the child element. This is necessary because of the responsive behavior.

Viewport height

To create a container that fills the height of the entire viewport, for example for fullscreen image or video teasers, just add the .uk-height-viewport class.

Position elements

UIkit provides a number of classes to position your content without having to add your own CSS.

Responsive objects

Images in UIkit adapt to the width of their parent container by default. If you want to apply the responsive behavior to media elements, like a video object, just add one of the following classes.

NOTE The .uk-responsive-width class can also be applied to an Iframe, provided its width and height attributes are set.

Example width

Example height

Markup

<video controls class="uk-responsive-width"></video>

<img class="uk-responsive-height" src="" alt="">

Margin

Add one of the following classes to add spacing to block elements.

Larger margin

Add one of the following classes to add larger spacing to block elements.

Smaller margin

Add one of the following classes to add smaller spacing to block elements.

Remove margin

Add one of the following classes to remove spacing from block elements.

Auto margin

To add spacing to stacking elements, for example inline elements that wrap on smaller vieports, just add the data-uk-margin attribute to their parent container. It will automatically add the .uk-margin-small-top to the lower element.

Example

Button Button Button Button Button Button Button Button Button Button

Markup

<p data-uk-margin>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</p>

NOTE By default, the data attribute adds the .uk-margin-small-top class to stacking elements. To apply a bigger margin, just add the {cls:'.uk-margin-top'} option.

Border radius

To add rounded corners to an element, like an image, just add the .uk-border-rounded. To a apply a circled shape, add the .uk-border-circle class.

Example

<img class="uk-border-rounded" src="" alt="">
<img class="uk-border-circle" src="" alt="">

Heading large

To increase the font size of your headings on tablets and desktops, just add the .uk-heading-large class.

Example

Heading

Markup

<h1 class="uk-heading-large">...<h1>

Link muted

If a link should not have the default link color, just add the .uk-link-muted class to the anchor element or the parent element.

Example

Heading

• Link
• Link
• Link

Markup

<a class="uk-link-muted">...<a>

<h1 class="uk-link-muted"><a>...<a><h1>

<ul class="uk-link-muted">
    <li><a>...<a></li>
    <li><a>...<a></li>
    <li><a>...<a></li>
</ul>

Scrollable preformatted text

Add the .uk-scrollable-text class to set a max-height and provide a vertical scrollbar. This is very useful for preformatted text, if you don't want your code blocks to take too much space.

Example

<!-- This is sample code to demonstrate preformatted text with a scrollbar. -->

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-left">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-right">...</div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-center">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-justify">...</div>
    </div>
</div>

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-break">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box"><p class="uk-margin-remove uk-text-truncate">...</p></div>
    </div>
</div>

Scrollable box

Add the .uk-scrollable-box class to create a panel-like box which has a max-height and provides a vertical scrollbar. It can contain any kind of content.

Example

Markup

<div class="uk-scrollable-box">
    <ul class="uk-list">
        <li><label><input type="checkbox">...</label></li>
        <li><label><input type="checkbox">...</label></li>
    </ul>
</div>

Overflow container

To create a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself, just add the .uk-overflow-container class to a <div> element. This comes in useful when having to handle tables on a responsive website, which at some point would just get too big.

Example

Markup

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

Display utilities

Add one of these classes to change the display properties of an element.

Visibility utilities

Example

Markup

<div class="uk-visible-hover">
    <div class="uk-hidden">...</div>
</div>

Responsive visibility

You can show or hide content on specific viewport widths. Breakpoints are set through variables and can easily be modified. Since the line between different device sizes keeps blurring, class names are kept general and do not refer to particular devices.