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.
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.
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.
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.
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.
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.
The Tab component consists of clickable tabs, that are aligned side by side.
Class
Description
.uk-tab
Add this class to a <ul> element to define the Tab component. Use <a> elements as tab items within the list.
.uk-active
Add this class to a list item to apply an active state.
.uk-disabled
Add this class to a list item to apply a disabled state.
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.
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.
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.
<ulclass="uk-tab"><li><ahref="">...</a></li><!-- This is the container enabling the JavaScript --><lidata-uk-dropdown="{mode:'click'}"><!-- This is the menu item toggling the dropdown --><ahref="">...</a><!-- This is the dropdown --><divclass="uk-dropdown uk-dropdown-small"><ulclass="uk-nav uk-nav-dropdown"><li><ahref="">...</a></li></ul></div></li></ul>
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.
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.
Class
Description
.uk-float-left
Float the element to the left.
.uk-float-right
Float the element to the right.
.uk-clearfix
Add this class to a parent container to clear floats.
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.
Class
Description
.uk-nbfc
Sets overflow to hidden to create a new block formatting context.
.uk-nbfc-alt
Sets display to table-cell to create a new block formatting context.
Alignment of images and objects
Align images or other elements with spacing between the text and the element.
Class
Description
.uk-align-left
Floats the element to the left and creates right and bottom margin.
.uk-align-right
Floats the element to the right and creates left and bottom margin.
.uk-align-medium-left
Only affects device widths of 768px and higher.
.uk-align-medium-right
Only affects device widths of 768px and higher.
.uk-align-center
Centers the element and creates bottom margin.
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.
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.
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.
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.
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.
Class
Description
.uk-responsive-width
Adjusts the object's width according to its parent's width, keeping the original aspect ratio.
.uk-responsive-height
Adjusts the object's height according to its parent's height, keeping the original aspect ratio.
NOTE The .uk-responsive-width class can also be applied to an Iframe, provided its width and height attributes are set.
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.
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.
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. --><divclass="uk-grid"><divclass="uk-width-medium-1-2"><divclass="uk-panel uk-panel-box uk-text-left">...</div></div><divclass="uk-width-medium-1-2"><divclass="uk-panel uk-panel-box uk-text-right">...</div></div></div><divclass="uk-grid"><divclass="uk-width-medium-1-2"><divclass="uk-panel uk-panel-box uk-text-center">...</div></div><divclass="uk-width-medium-1-2"><divclass="uk-panel uk-panel-box uk-text-justify">...</div></div></div><divclass="uk-grid"><divclass="uk-width-medium-1-2"><divclass="uk-panel uk-panel-box uk-text-break">...</div></div><divclass="uk-width-medium-1-2"><divclass="uk-panel uk-panel-box"><pclass="uk-margin-remove uk-text-truncate">...</p></div></div></div>
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.
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.
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.
Create a fully responsive, fluid and nestable grid layout.
The grid system of UIkit follows the mobile-first approach and accomodates up to 10 grid columns. It uses units with predefined classes inside each grid, which define the column width. It is also possible to combine the grid with classes from the Flex component, although it works only in modern browsers.
To create the grid container, add the .uk-grid class to a parent element. Add one of the .uk-width-* classes to child elements to determine, how the units shall be sized. The grid supports 1, 2, 3, 4, 5, 6 and 10 unit divisions. This table gives you an overview of the uk-width-* classes that can be applied to units.
Class
Description
.uk-width-1-1
Fills 100% of the available width.
.uk-width-1-2
Divides the grid into halves.
.uk-width-1-3 to .uk-width-2-3
Divides the grid into thirds.
.uk-width-1-4 to .uk-width-3-4
Divides the grid into fourths.
.uk-width-1-5 to .uk-width-4-5
Divides the grid into fifths.
.uk-width-1-6 to .uk-width-5-6
Divides the grid into sixths.
.uk-width-1-10 to .uk-width-9-10
Divides the grid into tenths.
We built an intentional redundancy into each set of unit classes, so that for instance the .uk-width-5-10 class will work just as well as .uk-width-1-2.
Example
Take a closer look at the following grid example, which gives you a great overwiew of all basic .uk-width-* classes.
.uk-width-1-3
.uk-width-1-3
.uk-width-1-3
.uk-width-1-2
.uk-width-1-2
.uk-width-3-10
.uk-width-7-10
NOTE The grid has no style related CSS. In our example we used panels from the Panel component.
Markup
Here is a simple code example of how the default grid with 2 columns would look like:
UIkit provides a number of very useful responsive widths classes. Basicall they work just like the usual width classes, except they are prefixed, so that they only come to effect at certain breakpoints. These classes can be combined with the visibility classes from the Utility component. This is great to adjust your layout and content for different device sizes.
Class
Description
.uk-width-*
Affects all device widths, grid columns stay side by side.
.uk-width-small-*
Affects device widths of 480px and higher. Grid columns will stack on smaller sizes.
.uk-width-medium-*
Affects device widths of 768px and higher. Grid columns will stack on smaller sizes.
.uk-width-large-*
Affects device widths of 960px and higher. Grid columns will stack on smaller sizes.
IMPORTANT To create a margin between stacking grid columns, just add the data-uk-grid-margin attribute.
Grids automatically create a horizontal gutter between columns and a vertical one between two succeeding grids. By default, the grid gutter is wider on large screens. To avoid this behavior and preserve the originial spacing, just add the .uk-grid-preserve class.
Example
Lorem ipsum
Lorem ipsum
Lorem ipsum
Small gutter
To apply a smaller gutter between grid columns, just add the .uk-grid-small class.
Add the .uk-grid-divider class to separate grid columns with lines. To separate grids with a horizontal line, just add the class to a <hr> or <div> element.
You can change the display order of the columns to keep a specific column order in the source code. Add one of the .uk-push-* classes to move the column to the right and add one of the .uk-pull-* classes to move a column to the left. This allows you for example to flip the columns' display order for wider viewports. The classes can also be used to offset columns, creating additional space between them.
Source ordering is useful for SEO and responsive design, because in narrow viewports the grid will be displayed according to the source order of the markup.
NOTE This feature only works in combination with one of the .uk-width-medium-* classes.
The Grid component uses Flexbox, so the height of grid columns is matched automatically. To achieve the same effect in older browsers that don't support Flexbox, just add the data-uk-grid-match attribute to your grid. If your grid wraps into multiple rows, only grid columns within the same row are matched. To match grid columns accross all rows just use data-uk-grid-match="{row: false}".
Example
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Markup
<divclass="uk-grid"data-uk-grid-match>...</div>
NOTE If grid columns extend to a width of 100%, their heights will no longer be matched. This makes sense, for example, if they stack vertically in narrower viewports.
Match height of panels
If you want to match the heights of panels in a grid, just add the .uk-grid-match class. When using the data attribute, you need to add the {target:'.uk-panel'} selector.
Example
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
You can also create a grid with as many columns as you want, which automatically break into the next line. Just add the data-uk-grid-margin attribute to create a margin between the grid rows. Typically this layout is built using a <ul> element.
Example
Box
Box
Box
Box
Box
Box
NOTE You can also apply a custom width to your grid columns. Just add the .uk-width class and use an inline style to define the width. This example uses fixed pixel values for the widths as you would do with images.
Box
Box
Box
Box
Box
Box
Box
Box
Markup
<ulclass="uk-grid"data-uk-grid-margin><!-- These elements have a width in percent --><liclass="uk-width-medium-1-5">...</li><liclass="uk-width-medium-3-10">...</li><!-- These elements have a width in pixel --><liclass="uk-width"style="width: 100px;">...</li><liclass="uk-width"style="width: 150px;">...</li></ul>
To create a grid whose child elements' widths are evenly split, you don't have to apply the same class to each list item within the grid. Just add one of the .uk-grid-width-* classes to the grid itself.
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.
