Helpers

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 Paper standard for Avatar
iSelect wrap select in div.iSelect for custom font-awesome icons
  • © 2016 KaijuThemes
Alerts

Sets alerts to get notified when changes occur to get new alerming items

Notifications

You will receive notification email for any notifications if you set notification

Messages

You will receive notification on email after setting messages notifications

Warnings

You will get warnning only some specific setttings or alert system

Sidebar

You can hide/show use with sidebar collapsw settings

Recent Activities
  • add
    Jana Pena is now Follwing you 2 min ago
  • textsms
    Percy liaye Like your picture 6 min ago
  • done
    Leon miles make your presentation for new project 2 hours ago
  • favorite
    Lake wile like your comment 5 hours ago
  • attach_money
    The Mountain Ambience paid your payment 9 hours ago
Contacts
  • Jon Owens Online
  • Nina Huges Offline
  • Austin Lee Busy
  • Grady Hines Away
  • Adrian Barton Online
Fixed Header
Boxed Layout
Collapse Leftbar
Brand
Topnav
Sidebar