Page Views
1,600
Likes
345
Bugs Fixed
21
New Members
124
Gifts
16
Tasks
17

Margin

The default base margin is set to 4px. Other margins are calculated as a multiple of the base margin, e.g. m-md is @base-margin*4. You can change the base margin from the helpers.less file

Negative Margins: Add a class .n for the negative value of that margin. For example .ml-sm.n would produce {margin-left: -8px}

Margin Class
.m-n {margin: 0px !important}
.m-xs {margin: 4px !important}
.m-sm {margin: 8px !important}
.m {margin: 12px !important}
.m-md {margin: 16px !important}
.m-lg {margin: 24px !important}
.m-xl {margin: 32px !important}
.m-xxl {margin: 40px !important}
 
.mb-n {margin-bottom: 0px !important}
.mb-xs {margin-bottom: 4px !important}
.mb-sm {margin-bottom: 8px !important}
.mb {margin-bottom: 12px !important}
.mb-md {margin-bottom: 16px !important}
.mb-lg {margin-bottom: 24px !important}
.mb-xl {margin-bottom: 32px !important}
.mb-xxl {margin-bottom: 40px !important}
 
.ml-n {margin-left: 0px !important}
.ml-xs {margin-left: 4px !important}
.ml-sm {margin-left: 8px !important}
.ml {margin-left: 12px !important}
.ml-md {margin-left: 16px !important}
.ml-lg {margin-left: 24px !important}
.ml-xl {margin-left: 32px !important}
.ml-xxl {margin-left: 40px !important}
 
.mr-n {margin-right: 0px !important}
.mr-xs {margin-right: 4px !important}
.mr-sm {margin-right: 8px !important}
.mr {margin-right: 12px !important}
.mr-md {margin-right: 16px !important}
.mr-lg {margin-right: 24px !important}
.mr-xl {margin-right: 32px !important}
.mr-xxl {margin-right: 40px !important}
 
.mt-n {margin-top: 0px !important}
.mt-xs {margin-top: 4px !important}
.mt-sm {margin-top: 8px !important}
.mt {margin-top: 12px !important}
.mt-md {margin-top: 16px !important}
.mt-lg {margin-top: 24px !important}
.mt-xl {margin-top: 32px !important}
.mt-xxl {margin-top: 40px !important}

Padding

The default base padding is set to 5px. Other paddings are calculated as a multiple of the base padding, e.g. p-md is @base-padding*4. You can change the base padding from the helpers.less file

Negative Paddings: Add a class .n for the negative value of that padding. For example .pl10.n would produce {padding-left: -10px}

Padding Class
.p-n {padding: 0px !important}
.p-xs {padding: 4px !important}
.p-sm {padding: 8px !important}
.p {padding: 12px !important}
.p-md {padding: 16px !important}
.p-lg {padding: 24px !important}
.p-xl {padding: 32px !important}
.p-xxl {padding: 40px !important}
 
.pb-n {padding-bottom: 0px !important}
.pb-xs {padding-bottom: 4px !important}
.pb-sm {padding-bottom: 8px !important}
.pb {padding-bottom: 12px !important}
.pb-md {padding-bottom: 16px !important}
.pb-lg {padding-bottom: 24px !important}
.pb-xl {padding-bottom: 32px !important}
.pb-xxl {padding-bottom: 40px !important}
 
.pl-n {padding-left: 0px !important}
.pl-xs {padding-left: 4px !important}
.pl-sm {padding-left: 8px !important}
.pl {padding-left: 12px !important}
.pl-md {padding-left: 16px !important}
.pl-lg {padding-left: 24px !important}
.pl-xl {padding-left: 32px !important}
.pl-xxl {padding-left: 40px !important}
 
.pr-n {padding-right: 0px !important}
.pr-xs {padding-right: 4px !important}
.pr-sm {padding-right: 8px !important}
.pr {padding-right: 12px !important}
.pr-md {padding-right: 16px !important}
.pr-lg {padding-right: 24px !important}
.pr-xl {padding-right: 32px !important}
.pr-xxl {padding-right: 40px !important}
 
.pt-n {padding-top: 0px !important}
.pt-xs {padding-top: 4px !important}
.pt-sm {padding-top: 8px !important}
.pt {padding-top: 12px !important}
.pt-md {padding-top: 16px !important}
.pt-lg {padding-top: 24px !important}
.pt-xl {padding-top: 32px !important}
.pt-xxl {padding-top: 40px !important}

Embed Responsively

The Embed Responsively class helps build responsive embed codes for embedding rich third-party media into responsive web pages. Simply wrap the media object in embed-container class.

Third Party Code Sample
Youtube <div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div
Vimeo <div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
DailyMotion <div class='embed-container'><iframe src='http://www.dailymotion.com/embed/video/xsr67x' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
Google Maps <div class='embed-container'><iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387144.0075834208!2d-73.97800349999999!3d40.7056308!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1394298866288' width='600' height='450' frameborder='0' style='border:0'></iframe></div>
Instagram <div class='embed-container'><iframe src='//instagram.com/p/dnQi4EGuZx/embed/' frameborder='0' scrolling='no' allowtransparency='true'></iframe></div>
Vine <div class='embed-container'><iframe width='100%' src='https://vine.co/v/h9eAhKWzJlv/embed/simple' frameborder='0' scrolling='no' allowtransparency='true'></iframe><script async src='//platform.vine.co/static/scripts/embed.js' charset='utf-8'></script></div>;

Others

Class Functions Description
Vertical Alignment To vertically center a div, add position:relative to the parent and vertical-align class to the child.
Vertical Align For Tables To vertical align contents in table, add classes vat, vam and vab to td to align contents top, middle and bottom respectively. Alternatively apply the classes table-vat, table-vam and table-vab to the table to align contents to all cells in the table
Avatar Using img.avatar will style an image with Outline standard for Avatar
iSelect wrap select in div.iSelect for custom font-awesome icons
Demo Settings
Fixed Header
Boxed Layout
Collapse Leftbar
Topnav
Sidebar