0%
Uix Kit Demo

Container

Tiny Container

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

S Container

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

M Container

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

L Container

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Max-width(Default), Max-width(XL), Max-width(XXL) Container

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

100% Width

Using .container-fluid for width: 100% across all viewport and device sizes.

100% Width (No gutters)

Using .container-fluid for width: 100% across all viewport and device sizes. And with .no-gutters on the .row.

Column

One Fourth (1)

Keep 1 columns when small screen < 768px.

One Fourth (2)

Keep 1 columns when small screen < 768px.

One Fourth (3)

Keep 1 columns when small screen < 768px.

One Fourth (4)

Keep 1 columns when small screen < 768px.

One Fifth

Keep 1 columns when small screen < 768px.

Four Fifth

Keep 1 columns when small screen < 768px.

One Fourth (1)

Keep 2 columns when small screen < 992px.

One Fourth (2)

Keep 2 columns when small screen < 992px.

One Fourth (3)

Keep 2 columns when small screen < 992px.

One Fourth (4)

Keep 2 columns when small screen < 992px.

One Third

Keep 1 columns when small screen < 768px.

One Third

Keep 1 columns when small screen < 768px.

One Third

Keep 1 columns when small screen < 768px.

One Half

Always keep 2 columns
Just use the class prefix .col-

One Half

Always keep 2 columns
Just use the class prefix .col-

One Half

Keep 1 columns when small screen < 992px.

One Half

Keep 1 columns when small screen < 992px.

One Third

Keep 1 columns when small screen < 992px.

Two Third

Keep 1 columns when small screen < 992px.

Two Third

Keep 1 columns when small screen < 992px.

One Third

Keep 1 columns when small screen < 992px.

One Fourth

Keep 1 columns when small screen < 992px.

Three Fourth

Keep 1 columns when small screen < 992px.

Three Fourth

Keep 1 columns when small screen < 992px.

One Fourth

Keep 1 columns when small screen < 992px.

One Third (1)

Keep 1 columns when small screen < 992px.

One Third (1)

Keep 2 columns when small screen < 992px.
Keep 1 columns when small screen < 576px.

One Third (1)

Keep 2 columns when small screen < 992px.
Keep 1 columns when small screen < 576px.

Column (No line breaks)

Please simulate mobile viewing after zooming out your viewport.

One Fourth (1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

One Fourth (2)

Aliquam congue dignissim tellus, vel eleifend urna rutrum nec.

One Fourth (3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

One Fourth (4)

Morbi et mauris vitae quam venenatis imperdiet.

One Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

One Third

Aliquam congue dignissim tellus, vel eleifend urna rutrum nec.

One Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Center Column

The class .align-items-center or .justify-content-center used here will be applied .row

One Fourth (1)

Aliquam congue dignissim tellus, vel eleifend urna rutrum nec. Morbi et mauris vitae quam venenatis imperdiet. Proin et rutrum magna. Nulla sed venenatis leo. Suspendisse potenti. Proin faucibus cursus luctus.

One Fourth (2)

Aliquam congue dignissim tellus, vel eleifend urna rutrum nec. Morbi et mauris vitae quam venenatis imperdiet. Proin et rutrum magna. Nulla sed venenatis leo. Suspendisse potenti. Proin faucibus cursus luctus.

One Fourth (1)

Aliquam congue dignissim tellus, vel eleifend urna rutrum nec. Morbi et mauris vitae quam venenatis imperdiet. Proin et rutrum magna. Nulla sed venenatis leo. Suspendisse potenti. Proin faucibus cursus luctus.

One Fourth (2)

Vertical Centering

One Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.