Margin
The default base margin is set to 4px. Other margins are calculated as a multiple of the base margin, e.g. m-mdis @base-margin*4. You can change the base margin from the helpers.less file
Negative Margins:Add a class .nfor the negative value of that margin. For example .ml-sm.nwould 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-mdis @base-padding*4. You can change the base padding from the helpers.less file
Negative Paddings:Add a class .nfor the negative value of that padding. For example .pl10.nwould 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-containerclass.
| 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>
|
<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:relativeto the parent and vertical-alignclass to the child.
|
| Vertical Align For Tables |
To vertical align contents in table, add classes vat, vamand vabto td to align contents top, middleand bottomrespectively. Alternatively apply the classes table-vat, table-vamand table-vabto the tableto align contents to all cells in the table
|
| Avatar |
Using img.avatarwill style an image with Avenxo standard for Avatar
|
| iSelect |
wrap selectin div.iSelectfor custom font-awesome icons
|