Page Layouts
Back to top

Content

  1. Home
  2. Content

Grid System

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small
<544px 		Small
≥544px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 576px 720px 940px 1140px
Class prefix .col-xs- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 1.875rem / 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any .row.

col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-8
col-md-4
col-md-4
col-md-4
col-md-4
col-md-6
col-md-6 
                            
                                <div class="row">
                                    <div class="col-md-1">col-md-1</div>
                                    <div class="col-md-1">col-md-1</div>
                                    <div class="col-md-1">col-md-1</div>
                                    <div class="col-md-1">col-md-1</div>
                                    <div class="col-md-1">col-md-1</div>
                                    <div class="col-md-1">col-md-1</div>
                                    <div class="col-md-1">col-md-1</div>
                                    <div class="col-md-1">col-md-1</div>
                                    <div class="col-md-1">col-md-1</div>
                                    <div class="col-md-1">col-md-1</div>
                                    <div class="col-md-1">col-md-1</div>
                                    <div class="col-md-1">col-md-1</div>
                                </div>
                                <div class="row">
                                    <div class="col-md-8">col-md-8</div>
                                    <div class="col-md-4">col-md-4</div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">col-md-4</div>
                                    <div class="col-md-4">col-md-4</div>
                                    <div class="col-md-4">col-md-4</div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">col-md-6</div>
                                    <div class="col-md-6">col-md-6</div>
                                </div>

Mobile and desktop

Don’t want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* and .col-md-* to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6 
                            
                            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
                            <div class="row">
                                <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
                                <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
                            </div>
                            
                            <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
                            <div class="row">
                                <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
                                <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
                                <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
                            </div>
                            
                            <!-- Columns are always 50% wide, on mobile and desktop -->
                            <div class="row">
                                <div class="col-xs-6">.col-xs-6</div>
                                <div class="col-xs-6">.col-xs-6</div>
                            </div>

Mobile, tablet, desktop

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4 
                            
                            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
                            <div class="row">
                                <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
                                <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
                            </div>
                            
                            <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
                            <div class="row">
                                <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
                                <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
                                <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
                            </div>

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line. 
                        
                            <div class="row">
                                <div class="col-xs-9">.col-xs-9</div>
                                <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
                                <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
                            </div>

Responsive column resets

With the four tiers of grids available you’re bound to run into issues where, at certain breakpoints, your columns don’t clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3 
                            
                                <div class="row">
                                    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
                                    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
                                
                                    <!-- Add the extra clearfix for only the required viewport -->
                                    <div class="clearfix hidden-sm-up"></div>
                                
                                    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
                                    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
                                </div>

Responsive Breakpoints

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls.

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col.col-sm-6.col-md-5.col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0 
                            
                            <div class="row">
                                <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
                                <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
                            </div>
                            
                            <div class="row">
                                <div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
                                <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
                            </div>

Offsetting columns

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3 
                            
                            <div class="row">
                                <div class="col-md-4">.col-md-4</div>
                                <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
                                <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
                            </div>

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6 
                            
                            <div class="row">
                                <div class="col-sm-9">
                                Level 1: .col-sm-9
                                <div class="row">
                                    <div class="col-xs-8 col-sm-6">
                                    Level 2: .col-xs-8 .col-sm-6
                                    </div>
                                    <div class="col-xs-4 col-sm-6">
                                    Level 2: .col-xs-4 .col-sm-6
                                    </div>
                                </div>
                                </div>
                            </div>

Column ordering

Easily change the order of our built-in grid columns with .push-md-* and .pull-md-* modifier classes.

.col-md-9 .push-md-3
.col-md-3 .pull-md-9 
                            
                            <div class="row">
                                <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
                                <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
                            </div>

Block

Two Blocks .col-md-6
50%
50%
Three Blocks .col-md-4
33%
33%
33%
Four Blocks .col-md-3
25%
25%
25%
25%
Six Blocks .col-md-2
16.6%
16.6%
16.6%
16.6%
16.6%
16.6%

Auto Responsive

With .col-sm-*, .col-md-*, .col-lg-* classes, it can turn into responsive easily.

1
2
3
4
5
6
7
8
9
10
11
12

Text Utilities

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Example Classes Snippet

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

 .text-muted 
                              
                                <p class="text-muted">Your Text.</p>

Nullam id dolor id nibh ultricies vehicula ut id elit.

 .text-primary 
                              
                                <p class="text-primary">Your Text.</p>

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

 .text-success 
                              
                                <p class="text-success">Your Text.</p>

Maecenas sed diam eget risus varius blandit sit amet non magna.

 .text-info 
                              
                                <p class="text-info">Your Text.</p>

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

 .text-warning 
                              
                                <p class="text-warning">Your Text.</p>

Donec ullamcorper nulla non metus auctor fringilla.

 .text-danger 
                              
                                <p class="text-danger">Your Text.</p>

Robust Admin also provide custom color palette for the text, below table show you usage.

You can also use text lighten, darken and accent classes.

  • li.red .lighten-* For lighten red text color, this two classes needed. Here *: 1,2,3,4 for lighten red color options.
  • .red .darken-* For darken red text color, this two classes needed. Here *: 1,2,3,4 for darken red color options.
  • .red .accent-* For accent red text color, this two classes needed. Here *: 1,2,3,4 for accent red color options.
Example Classes Snippet

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

 .red 
                              
                                <p class="red">Your Text.</p>

Nullam id dolor id nibh ultricies vehicula ut id elit.

 .purple 
                              
                                <p class="purple">Your Text.</p>

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

 .indigo 
                              
                                <p class="indigo">Your Text.</p>

Maecenas sed diam eget risus varius blandit sit amet non magna.

 .light-blue 
                              
                                <p class="light-blue">Your Text.</p>

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

 .teal 
                              
                                <p class="teal">Your Text.</p>

Donec ullamcorper nulla non metus auctor fringilla.

 .blue-grey 
                              
                                <p class="blue-grey">Your Text.</p>

Contextual background

Contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Example Classes Snippet
Nullam id dolor id nibh ultricies vehicula ut id elit. .bg-primary 
                              
                                <p class="bg-primary">Your Text.</p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. .bg-success 
                              
                                <p class="bg-success">Your Text.</p>
Maecenas sed diam eget risus varius blandit sit amet non magna. .bg-info 
                              
                                <p class="bg-info">Your Text.</p>
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. .bg-warning 
                              
                                <p class="bg-warning">Your Text.</p>
Donec ullamcorper nulla non metus auctor fringilla. .bg-danger 
                              
                                <p class="bg-danger">Your Text.</p>
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. .bg-inverse 
                              
                                <p class="bg-inverse">Your Text.</p>

Robust Admin also provide custom color palette for the background colors, below table show you usage.

You can also use background lighten, darken and accent classes.

  • .bg-red .bg-lighten-* For lighten red text color, this two classes needed. Here *: 1,2,3,4 for lighten red color options.
  • .bg-red .bg-darken-* For darken red text color, this two classes needed. Here *: 1,2,3,4 for darken red color options.
  • .bg-red .bg-accent-* For accent red text color, this two classes needed. Here *: 1,2,3,4 for accent red color options.
Example Classes Snippet
Fusce dapibus, tellus ac cursus commodo. .bg-red 
                              
                                <p class="bg-red bg-inverse">Your Text.</p>
Nullam id dolor id nibh ultricies. .purple 
                              
                                <p class="bg-purple bg-inverse">Your Text.</p>
Duis mollis, est non commodo luctus, nisi erat. .bg-indigo 
                              
                                <p class="bg-indigo bg-inverse">Your Text.</p>
Maecenas sed diam eget risus varius blandit sit. .bg-light-blue 
                              
                                <p class="bg-light-blue bg-inverse">Your Text.</p>
Fusce dapibus, tellus ac cursus commodo. .bg-teal 
                              
                                <p class="bg-teal bg-inverse">Your Text.</p>
Donec ullamcorper nulla non metus. .blue-grey 
                              
                                <p class="blue-grey bg-inverse">Your Text.</p>

Text alignment

Easily realign text to components with text alignment classes.

Example Classes Snippet

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

 .text-justify 
                              
                                <p class="text-justify">Justified text.</p>

It is a long established fact that a reader.

 .text-nowrap 
                              
                                <p class="text-nowrap">No wrap text.</p>

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Example Classes Snippet

Left aligned text on all viewport sizes.

 .text-xs-left 
                              
                                <p class="text-xs-left">Left aligned text on all viewport sizes.</p>

Center aligned text on all viewport sizes.

 .text-xs-center 
                              
                                <p class="text-xs-center">Center aligned text on all viewport sizes.</p>

Right aligned text on all viewport sizes.

 .text-xs-right 
                              
                                <p class="text-xs-right">Right aligned text on all viewport sizes.</p>

Left aligned text on viewports sized SM or wider.

Left aligned text on viewports sized MD or wider.

Left aligned text on viewports sized LG or wider.

Left aligned text on viewports sized XL or wider.

 .text-sm-left .text-md-left .text-lg-left .text-xl-left 
                              
                                <p class="text-sm-left">Left aligned text on viewports sized SM or wider.</p>
                                <p class="text-md-left">Left aligned text on viewports sized MD or wider.</p>
                                <p class="text-lg-left">Left aligned text on viewports sized LG or wider.</p>
                                <p class="text-xl-left">Left aligned text on viewports sized XL or wider.</p>

Center aligned text on viewports sized SM or wider.

Center aligned text on viewports sized MD or wider.

Center aligned text on viewports sized LG or wider.

Center aligned text on viewports sized XL or wider.

 .text-sm-center .text-md-center .text-lg-center .text-xl-center 
                              
                                <p class="text-sm-center">Center aligned text on viewports sized SM or wider.</p>
                                <p class="text-md-center">Center aligned text on viewports sized MD or wider.</p>
                                <p class="text-lg-center">Center aligned text on viewports sized LG or wider.</p>
                                <p class="text-xl-center">Center aligned text on viewports sized XL or wider.</p>

Right aligned text on viewports sized SM or wider.

Right aligned text on viewports sized MD or wider.

Right aligned text on viewports sized LG or wider.

Right aligned text on viewports sized XL or wider.

 .text-sm-right .text-md-right .text-lg-right .text-xl-right 
                              
                                <p class="text-sm-right">Right aligned text on viewports sized SM or wider.</p>
                                <p class="text-md-right">Right aligned text on viewports sized MD or wider.</p>
                                <p class="text-lg-right">Right aligned text on viewports sized LG or wider.</p>
                                <p class="text-xl-right">Right aligned text on viewports sized XL or wider.</p>

Text transform

Transform text in components with text capitalization classes.

Note how text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

Example Classes Snippet

Lowercased text.

 .text-lowercase 
                              
                                <p class="text-lowercase">Lowercased text.</p>

Uppercased text.

 .text-uppercase 
                              
                                <p class="text-uppercase">Uppercased text.</p>

CapiTaliZed text.

 .text-uppercase 
                              
                                <p class="text-capitalize">CapiTaliZed text.</p>

Text option

Font size

Robust Admin provide font large & small sizes variant classes to change font size.

Example Classes Snippet

Large lg text size.

 .font-medium-3 
                              
                                <p class="font-medium-3" >Large lg text size.</p>

Large md text size.

 .font-medium-2 
                              
                                <p class="font-medium-2" >Large md text size.</p>

Large sm text size.

 .font-medium-1 
                              
                                <p class="font-medium-1" >Large sm text size.</p>

Normal base text size.

 N/A 
                              
                                <p>Normal base text size.</p>

Small lg text size.

 .font-small-3 
                              
                                <p class="font-small-3" >Small lg text size.</p>

Small md text size.

 .font-small-2 
                              
                                <p class="font-small-2" >Small md text size.</p>

Small sm text size.

 .font-small-1 
                              
                                <p class="font-small-1" >Small sm text size.</p>
Font weight

Robust Admin provide font weight class .text-bold-{weight}, where {weight} value can be 100,200 ... 900.

Example Classes Snippet

Font weight 100

 .text-bold-100 
                              
                                <p class="text-bold-100">Font weight 100.</p>

Font weight 200

 .text-bold-200 
                              
                                <p class="text-bold-200">Font weight 200.</p>

Font weight 300

 .text-bold-300 
                              
                                <p class="text-bold-300">Font weight 300.</p>

Font weight 400

 .text-bold-400 
                              
                                <p class="text-bold-400">Font weight 400.</p>

Font weight 500

 .text-bold-500 
                              
                                <p class="text-bold-500">Font weight 500.</p>

Font weight 600

 .text-bold-600 
                              
                                <p class="text-bold-600">Font weight 600.</p>

Font weight 700

 .text-bold-700 
                              
                                <p class="text-bold-700">Font weight 700.</p>

Font weight 800

 .text-bold-800 
                              
                                <p class="text-bold-800">Font weight 800.</p>

Font weight 900

 .text-bold-900 
                              
                                <p class="text-bold-900">Font weight 900.</p>
Inline text elements

Styling for common inline HTML5 elements.

.mark and .small classes are also available to apply the same styles as <mark> and <small> while avoiding any unwanted semantic implications that the tags would bring.

While not shown above, feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Example Snippet

You can use the mark tag to highlight text.

 
                              
                                <p>You can use the mark tag to <mark>highlight</mark> text.</p>

This line of text is meant to be treated as deleted text. 

                              
                                <p><del>This line of text is meant to be treated as deleted text.</del></p>

This line of text is meant to be treated as no longer accurate. 

                              
                                <p><s>This line of text is meant to be treated as no longer accurate.</s></p>

This line of text is meant to be treated as an addition to the document. 

                              
                                <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>

This line of text will render as underlined

 
                              
                                <p><u>This line of text will render as underlined.</u></p>

This line of text is meant to be treated as fine print.

 
                              
                                <p><small>This line of text is meant to be treated as fine print.</small></p>

This line rendered as bold text.

 
                              
                                <p><strong>This line rendered as bold text.</strong></p>

This line rendered as italicized text.

 
                              
                                <p><em>This line rendered as italicized text.</em></p>

Sample abbreviation 

                              
                                <p> Sample <abbr>Abbreviations.</abbr></p>

Sample HTML title.

 
                              
                                <p> Sample <abbr title="HyperText Markup Language" class="initialism">HTML.</abbr></p>
y = m x + b 
                              
                                <p> For indicating variables use the <var> tag.</p>

Edit settings, press ctrl + , 

                              
                                <p> Use the <kbd>  to indicate input that is typically entered via keyboard.</p>
This text is meant to be treated as sample output from a computer program. 
                              
                                <p> For indicating sample output from a program use the  <samp>  tag. </p>
Inline code snippet 
                              
                                <p> Wrap inline snippets of code with <code> tag. </p>

Text Utilities

Spacing

Assign margin or padding to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, 1rem.

The classes are named using the format: {property}-{sides}-{size}

  • m - for classes that set margin
  • p - for classes that set padding

This table contain class to add element's top, bottom, left, right & all side margin.

Classes Description
.mt-{size} To set margin top use .mt-{size} class, where {size} is value between 0-3.
.mb-{size} To set margin bottom use .mb-{size} class, where {size} is value between 0-3.
.ml-{size} To set margin left use .ml-{size} class, where {size} is value between 0-3.
.mr-{size} To set margin right use .mr-{size} class, where {size} is value between 0-3.
.mx-{size} To set both margin left & right use .mx-{size} class, where {size} is value between 0-3.
.my-{size} To set both margin top & bottom use .my-{size} class, where {size} is value between 0-3.
.ma-{size} To set margin 4 sides of the element use .ma-{size} class, where {size} is value between 0-3.

This table contain class to add element's top, bottom, left, right & all side padding.

Classes Description
.pt-{size} To set padding top use .pt-{size} class, where {size} is value between 0-3.
.pb-{size} To set padding bottom use .pb-{size} class, where {size} is value between 0-3.
.pl-{size} To set padding left use .pl-{size} class, where {size} is value between 0-3.
.pr-{size} To set padding right use .pr-{size} class, where {size} is value between 0-3.
.px-{size} To set both padding left & right use .px-{size} class, where {size} is value between 0-3.
.py-{size} To set both padding top & bottom use .py-{size} class, where {size} is value between 0-3.
.pa-{size} To set padding 4 sides of the element use .pa-{size} class, where {size} is value between 0-3.

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
  • 2 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
  • 3 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3

Content helpers

Display

Content helpers classes provides display, position, z-index, edges, vertical alignment, cursor, overflow & list options.

Add one of these classes to change the elemets' display properties.

Classes Description
.display-inline Forces the element to behave like an inline element.
.display-inline-block Forces the element to behave like an inline-block element.
.display-block Forces the element to behave like an block element.
.display-hidden Forces the element to hide on all viewports.
Position

Add one of these classes to set the elemets' position properties.

Classes Description
.position-fixed Changes element's position to fixed.
.position-relative Changes element's position to relative.
.position-absolute Changes element's position to absolute.
.position-static Changes element's position to static.
Vertical alignment

Add one of these classes to change the elemets' vertical alignment properties.

Classes Description
.valign-top Changes element's vertical alignment to top.
.valign-middle Changes element's vertical alignment to middle.
.valign-bottom Changes element's vertical alignment to bottom.
.valign-baseline Changes element's vertical alignment to baseline.
.valign-text-top Top of the element is aligned with the top of the parent element's font.
.valign-text-bottom The bottom of the element is aligned with the bottom of the parent element's font.
z-index

Add one of these classes to change the elemets' z-index properties.

Classes Description
.zindex-minus-1 Set element's z-index value minus 1.
.zindex-minus-2 Set element's z-index value minus 2.
.zindex-minus-3 Set element's z-index value minus 3.
.zindex-minus-4 Set element's z-index value minus 4.
.zindex-0 Set element's z-index value 0.
.zindex-1 Set element's z-index value 1.
.zindex-2 Set element's z-index value 2.
.zindex-3 Set element's z-index value 3.
.zindex-4 Set element's z-index value 4.
Edges

Add one of these to removes the slected edge of the elements, works with absolute, fixed and relative positioned elements.

Classes Description
.no-edge-top Removes the top edge of the element.
.no-edge-bottom Removes the bottom edge of the element.
.no-edge-left Removes the left edge of the element.
.no-edge-right Removes the right edge of the element.
Cursors

Add one of these to class to change cursor style.

Classes Description
.cursor-pointer The cursor is a pointer and indicates a link. Useful for user interaction feedback.
.cursor-move The cursor indicates something is to be moved. Used in shortable components
.cursor-default Set cursor to browser default style.
.cursor-progress The cursor indicates that the program is busy (in progress).
.cursor-not-allowed The cursor indicates that the requested action will not be executed.
Overflow

Add one of these to class to change overflow of element.

Classes Description
.overflow-visible Default. The overflow is not clipped. It renders outside the element's box.
.overflow-hidden The overflow is clipped, and the rest of the content will be invisible.
.overflow-auto If overflow is clipped, a scrollbar should be added to see the rest of the content.
.overflow-scroll The overflow is clipped, but a scrollbar is added to see the rest of the content.
List

Add one of these to class to change list style.

Classes Description
.no-bullets No marker is shown in the list item.
.bullets-inside Indents the marker and the text. The bullets appear inside the content flow
.list-style-circle Set the list item marker to circle.
.list-style-square Set the list item marker to square.

Borders

Add border

Add one of these to class to add border on the required side.

Classes Description
.border Add solid border of 1px on each side.
.border-top Add solid border top of 1px.
.border-bottom Add solid border bottom of 1px.
.border-left Add solid border left of 1px.
.border-right Add solid border right of 1px.
Remove border

Add one of these to class to remove border on the required side.

Classes Description
.no-border Remove border from all side.
.no-border-top Remove border from the top side.
.no-border-bottom Remove border from the bottom side.
.no-border-left Remove border from the left side.
.no-border-right Remove border from the right side.
Border widths

Add one of these to class to change border width on the required side.

Classes Description
.border-2 Chande border width to 2px on each side.
.border-top-2 Chande border width to 2px on top side.
.border-bottom-2 Chande border width to 2px on bottom side.
.border-left-2 Chande border width to 2px on left side.
.border-right-2 Chande border width to 2px on right side.
.border-3 Chande border width to 3px on each side.
.border-top-3 Chande border width to 3px on top side.
.border-bottom-3 Chande border width to 3px on bottom side.
.border-left-3 Chande border width to 3px on left side.
.border-right-3 Chande border width to 3px on right side.
Remove border radius

Add one of these to class to remove border radius on the required side.

Classes Description
.no-border-top-radius Remove border radius from top side.
.no-border-bottom-radius Remove border radius from bottom side.
.no-border-top-left-radius Remove border radius from top left side.
.no-border-top-right-radius Remove border radius from top right side.
.no-border-bottom-left-radius Remove border radius from bottom left side.
.no-border-bottom-right-radius Remove border radius from bottom right side.

Size

Width && Height

Add one of these to class to set width of the content.

Classes Description
.fit Set content maximum width 100%.
.half-width Set content width 50%.
.full-width Set content width 100%.
.full-height Set content height 100%.
Fixed Width

Add one of these to class to set fixed width of the content.

Classes Description
.width-{size} Set content fixed width in pixel of selected size where size can be 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750 and 800. i.e .width-50
.width-{size}-per Set content fixed width in percentage of selected size where size can be 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75% and 80%. i.e .width-5-per
Fixed Height

Add one of these to class to set fixed height of the content.

Classes Description
.height-{size} Set content fixed height in pixel of selected size where size can be 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750 and 800. i.e .height-50
.height-{size}-per Set content fixed height in percentage of selected size where size can be 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75% and 80%. i.e .height-5-per

Transformations

Add one of these to class to change transformations of the element.

Classes Description
.icon-rotate-right-45 icon-rotate-rights element 45 degreees clockwise.
.icon-rotate-right-45-inverse icon-rotate-rights element 45 degreees anti-clockwise.
.icon-rotate-right-90 icon-rotate-rights element 90 degreees clockwise.
.icon-rotate-right-90-inverse icon-rotate-rights element 90 degreees anti-clockwise.
.icon-rotate-right-180 icon-rotate-rights element 180 degreees clockwise.
.icon-rotate-right-180-inverse icon-rotate-rights element 180 degreees anti-clockwise.
.spinner Set element infinite clockwise rotation.
.spinner-reverse Set element infinite anti-clockwise rotation.

Image

Add one of these to class to change image size and other property.

Classes Description
.bg-cover Scale the background image to be as large as possible so that the background area is completely covered by the background image.
.bg-repeat Do not repeat the background image.
.bg-no-repeat Repeat the background image.