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> |
<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 |