Base Layout Spacers is designed in a way where you can add it on top of the Base CSS framework or to your own custom project.
Base Layout Spacers contains styles for adding spaced rows (.pad-top-5, .pad-bottom-20
, etc) and spaced layout (pad-5, pad-20
, etc) for all breakpoints.
If you have an existing project and would like to include the Base layout spacers module, run the following command:
npm install --save @getbase/layout-spacers
Once you have the layout spacers module installed, you can include it in your CSS/LESS/SCSS file with one of the following ways:
@import url("https://unpkg.com/@getbase/layout-spacers/index.css");
/* Import Base Layout Spacers */
@import "~@getbase/layout-spacers/scss/index";
/* Your Other Styles */
@import "main"
/* Import Base Layout Spacers */
@import "~@getbase/layout-spacers/less/index";
/* Your Other Styles */
@import "main"
Base Layout Spacers includes styles for adding spaced rows (.pad-top-5, .pad-bottom-20
, etc) and spaced layout (pad-5, pad-20
, etc) for all breakpoints.
Helper Class | Purpose | Example | Outcome |
---|---|---|---|
.pad-top-5 |
Applies top padding 5px |
<div class="pad-top-5">This element will have a top padding of 5px</div> |
Applies a padding-top of 5px to a div element for all breakpoints |
.pad-top-10 |
Applies top padding 10px |
<div class="pad-top-10">This element will have a top padding of 10px</div> |
Applies a padding-top of 10px to a div element for all breakpoints |
.pad-top-15 |
Applies top padding 15px |
<div class="pad-top-15">This element will have a top padding of 15px</div> |
Applies a padding-top of 15px to a div element for all breakpoints |
.pad-top-20 |
Applies top padding 20px |
<div class="pad-top-20">This element will have a top padding of 20px</div> |
Applies a padding-top of 20px to a div element for all breakpoints |
.pad-top-25 |
Applies top padding 25px |
<div class="pad-top-25">This element will have a top padding of 25px</div> |
Applies a padding-top of 25px to a div element for all breakpoints |
.pad-top-30 |
Applies top padding 30px |
<div class="pad-top-30">This element will have a top padding of 30px</div> |
Applies a padding-top of 30px to a div element for all breakpoints |
.pad-top-35 |
Applies top padding 35px |
<div class="pad-top-35">This element will have a top padding of 35px</div> |
Applies a padding-top of 35px to a div element for all breakpoints |
.pad-top-40 |
Applies top padding 40px |
<div class="pad-top-40">This element will have a top padding of 40px</div> |
Applies a padding-top of 40px to a div element for all breakpoints |
.pad-top-45 |
Applies top padding 45px |
<div class="pad-top-45">This element will have a top padding of 45px</div> |
Applies a padding-top of 45px to a div element for all breakpoints |
.pad-top-50 |
Applies top padding 50px |
<div class="pad-top-50">This element will have a top padding of 50px</div> |
Applies a padding-top of 50px to a div element for all breakpoints |
.pad-top-55 |
Applies top padding 55px |
<div class="pad-top-55">This element will have a top padding of 55px</div> |
Applies a padding-top of 55px to a div element for all breakpoints |
.pad-top-60 |
Applies top padding 60px |
<div class="pad-top-60">This element will have a top padding of 60px</div> |
Applies a padding-top of 60px to a div element for all breakpoints |
.pad-bottom-5 |
Applies bottom padding 5px |
<div class="pad-bottom-5">This element will have a bottom padding of 5px</div> |
Applies a padding-bottom of 5px to a div element for all breakpoints |
.pad-bottom-10 |
Applies bottom padding 10px |
<div class="pad-bottom-10">This element will have a bottom padding of 10px</div> |
Applies a padding-bottom of 10px to a div element for all breakpoints |
.pad-bottom-15 |
Applies bottom padding 15px |
<div class="pad-bottom-15">This element will have a bottom padding of 15px</div> |
Applies a padding-bottom of 15px to a div element for all breakpoints |
.pad-bottom-20 |
Applies bottom padding 20px |
<div class="pad-bottom-20">This element will have a bottom padding of 20px</div> |
Applies a padding-bottom of 20px to a div element for all breakpoints |
.pad-bottom-25 |
Applies bottom padding 25px |
<div class="pad-bottom-25">This element will have a bottom padding of 25px</div> |
Applies a padding-bottom of 25px to a div element for all breakpoints |
.pad-bottom-30 |
Applies bottom padding 30px |
<div class="pad-bottom-30">This element will have a bottom padding of 30px</div> |
Applies a padding-bottom of 30px to a div element for all breakpoints |
.pad-bottom-35 |
Applies bottom padding 35px |
<div class="pad-bottom-35">This element will have a bottom padding of 35px</div> |
Applies a padding-bottom of 35px to a div element for all breakpoints |
.pad-bottom-40 |
Applies bottom padding 40px |
<div class="pad-bottom-40">This element will have a bottom padding of 40px</div> |
Applies a padding-bottom of 40px to a div element for all breakpoints |
.pad-bottom-45 |
Applies bottom padding 45px |
<div class="pad-bottom-45">This element will have a bottom padding of 45px</div> |
Applies a padding-bottom of 45px to a div element for all breakpoints |
.pad-bottom-50 |
Applies bottom padding 50px |
<div class="pad-bottom-50">This element will have a bottom padding of 50px</div> |
Applies a padding-bottom of 50px to a div element for all breakpoints |
.pad-bottom-55 |
Applies bottom padding 55px |
<div class="pad-bottom-55">This element will have a bottom padding of 55px</div> |
Applies a padding-bottom of 55px to a div element for all breakpoints |
.pad-bottom-60 |
Applies bottom padding 60px |
<div class="pad-bottom-60">This element will have a bottom padding of 60px</div> |
Applies a padding-bottom of 60px to a div element for all breakpoints |
.pad-5 |
Applies padding 5px |
<div class="pad-5">This element will have a padding of 5px</div> |
Applies a padding of 5px to a div element for all breakpoints |
.pad-10 |
Applies padding 10px |
<div class="pad-10">This element will have a padding of 10px</div> |
Applies a padding of 10px to a div element for all breakpoints |
.pad-15 |
Applies padding 15px |
<div class="pad-15">This element will have a padding of 15px</div> |
Applies a padding of 15px to a div element for all breakpoints |
.pad-20 |
Applies padding 20px |
<div class="pad-20">This element will have a padding of 20px</div> |
Applies a padding of 20px to a div element for all breakpoints |
.pad-25 |
Applies padding 25px |
<div class="pad-25">This element will have a padding of 25px</div> |
Applies a padding of 25px to a div element for all breakpoints |
.pad-30 |
Applies padding 30px |
<div class="pad-30">This element will have a padding of 30px</div> |
Applies a padding of 30px to a div element for all breakpoints |
.pad-35 |
Applies padding 35px |
<div class="pad-35">This element will have a padding of 35px</div> |
Applies a padding of 35px to a div element for all breakpoints |
.pad-40 |
Applies padding 40px |
<div class="pad-40">This element will have a padding of 40px</div> |
Applies a padding of 40px to a div element for all breakpoints |
.pad-45 |
Applies padding 45px |
<div class="pad-45">This element will have a padding of 45px</div> |
Applies a padding of 45px to a div element for all breakpoints |
.pad-50 |
Applies padding 50px |
<div class="pad-50">This element will have a padding of 50px</div> |
Applies a padding of 50px to a div element for all breakpoints |
.pad-55 |
Applies padding 55px |
<div class="pad-55">This element will have a padding of 55px</div> |
Applies a padding of 55px to a div element for all breakpoints |
.pad-60 |
Applies padding 60px |
<div class="pad-60">This element will have a padding of 60px</div> |
Applies a padding of 60px to a div element for all breakpoints |
.pad-top-0-m |
Applies top padding 0px |
<div class="pad-top-0-m">This element will have a top padding of 0px</div> |
Applies a padding-top of 0px to a div element for medium devices and above |
.pad-top-5-m |
Applies top padding 5px |
<div class="pad-top-5-m">This element will have a top padding of 5px</div> |
Applies a padding-top of 5px to a div element for medium devices and above |
.pad-top-10-m |
Applies top padding 10px |
<div class="pad-top-10-m">This element will have a top padding of 10px</div> |
Applies a padding-top of 10px to a div element for medium devices and above |
.pad-top-15-m |
Applies top padding 15px |
<div class="pad-top-15-m">This element will have a top padding of 15px</div> |
Applies a padding-top of 15px to a div element for medium devices and above |
.pad-top-20-m |
Applies top padding 20px |
<div class="pad-top-20-m">This element will have a top padding of 20px</div> |
Applies a padding-top of 20px to a div element for medium devices and above |
.pad-top-25-m |
Applies top padding 25px |
<div class="pad-top-25-m">This element will have a top padding of 25px</div> |
Applies a padding-top of 25px to a div element for medium devices and above |
.pad-top-30-m |
Applies top padding 30px |
<div class="pad-top-30-m">This element will have a top padding of 30px</div> |
Applies a padding-top of 30px to a div element for medium devices and above |
.pad-top-35-m |
Applies top padding 35px |
<div class="pad-top-35-m">This element will have a top padding of 35px</div> |
Applies a padding-top of 35px to a div element for medium devices and above |
.pad-top-40-m |
Applies top padding 40px |
<div class="pad-top-40-m">This element will have a top padding of 40px</div> |
Applies a padding-top of 40px to a div element for medium devices and above |
.pad-top-45-m |
Applies top padding 45px |
<div class="pad-top-45-m">This element will have a top padding of 45px</div> |
Applies a padding-top of 45px to a div element for medium devices and above |
.pad-top-50-m |
Applies top padding 50px |
<div class="pad-top-50-m">This element will have a top padding of 50px</div> |
Applies a padding-top of 50px to a div element for medium devices and above |
.pad-top-55-m |
Applies top padding 55px |
<div class="pad-top-55-m">This element will have a top padding of 55px</div> |
Applies a padding-top of 55px to a div element for medium devices and above |
.pad-top-60-m |
Applies top padding 60px |
<div class="pad-top-60-m">This element will have a top padding of 60px</div> |
Applies a padding-top of 60px to a div element for medium devices and above |
.pad-bottom-0-m |
Applies bottom padding 0px |
<div class="pad-bottom-0-m">This element will have a bottom padding of 0px</div> |
Applies a padding-bottom of 0px to a div element for medium devices and above |
.pad-bottom-5-m |
Applies bottom padding 5px |
<div class="pad-bottom-5-m">This element will have a bottom padding of 5px</div> |
Applies a padding-bottom of 5px to a div element for medium devices and above |
.pad-bottom-10-m |
Applies bottom padding 10px |
<div class="pad-bottom-10-m">This element will have a bottom padding of 10px</div> |
Applies a padding-bottom of 10px to a div element for medium devices and above |
.pad-bottom-15-m |
Applies bottom padding 15px |
<div class="pad-bottom-15-m">This element will have a bottom padding of 15px</div> |
Applies a padding-bottom of 15px to a div element for medium devices and above |
.pad-bottom-20-m |
Applies bottom padding 20px |
<div class="pad-bottom-20-m">This element will have a bottom padding of 20px</div> |
Applies a padding-bottom of 20px to a div element for medium devices and above |
.pad-bottom-25-m |
Applies bottom padding 25px |
<div class="pad-bottom-25-m">This element will have a bottom padding of 25px</div> |
Applies a padding-bottom of 25px to a div element for medium devices and above |
.pad-bottom-30-m |
Applies bottom padding 30px |
<div class="pad-bottom-30-m">This element will have a bottom padding of 30px</div> |
Applies a padding-bottom of 30px to a div element for medium devices and above |
.pad-bottom-35-m |
Applies bottom padding 35px |
<div class="pad-bottom-35-m">This element will have a bottom padding of 35px</div> |
Applies a padding-bottom of 35px to a div element for medium devices and above |
.pad-bottom-40-m |
Applies bottom padding 40px |
<div class="pad-bottom-40-m">This element will have a bottom padding of 40px</div> |
Applies a padding-bottom of 40px to a div element for medium devices and above |
.pad-bottom-45-m |
Applies bottom padding 45px |
<div class="pad-bottom-45-m">This element will have a bottom padding of 45px</div> |
Applies a padding-bottom of 45px to a div element for medium devices and above |
.pad-bottom-50-m |
Applies bottom padding 50px |
<div class="pad-bottom-50-m">This element will have a bottom padding of 50px</div> |
Applies a padding-bottom of 50px to a div element for medium devices and above |
.pad-bottom-55-m |
Applies bottom padding 55px |
<div class="pad-bottom-55-m">This element will have a bottom padding of 55px</div> |
Applies a padding-bottom of 55px to a div element for medium devices and above |
.pad-bottom-60-m |
Applies bottom padding 60px |
<div class="pad-bottom-60-m">This element will have a bottom padding of 60px</div> |
Applies a padding-bottom of 60px to a div element for medium devices and above |
.pad-0-m |
Applies padding 0px |
<div class="pad-0-m">This element will have a padding of 0px</div> |
Applies a padding of 0px to a div element for medium devices and above |
.pad-5-m |
Applies padding 5px |
<div class="pad-5-m">This element will have a padding of 5px</div> |
Applies a padding of 5px to a div element for medium devices and above |
.pad-10-m |
Applies padding 10px |
<div class="pad-10-m">This element will have a padding of 10px</div> |
Applies a padding of 10px to a div element for medium devices and above |
.pad-15-m |
Applies padding 15px |
<div class="pad-15-m">This element will have a padding of 15px</div> |
Applies a padding of 15px to a div element for medium devices and above |
.pad-20-m |
Applies padding 20px |
<div class="pad-20-m">This element will have a padding of 20px</div> |
Applies a padding of 20px to a div element for medium devices and above |
.pad-25-m |
Applies padding 25px |
<div class="pad-25-m">This element will have a padding of 25px</div> |
Applies a padding of 25px to a div element for medium devices and above |
.pad-30-m |
Applies padding 30px |
<div class="pad-30-m">This element will have a padding of 30px</div> |
Applies a padding of 30px to a div element for medium devices and above |
.pad-35-m |
Applies padding 35px |
<div class="pad-35-m">This element will have a padding of 35px</div> |
Applies a padding of 35px to a div element for medium devices and above |
.pad-40-m |
Applies padding 40px |
<div class="pad-40-m">This element will have a padding of 40px</div> |
Applies a padding of 40px to a div element for medium devices and above |
.pad-45-m |
Applies padding 45px |
<div class="pad-45-m">This element will have a padding of 45px</div> |
Applies a padding of 45px to a div element for medium devices and above |
.pad-50-m |
Applies padding 50px |
<div class="pad-50-m">This element will have a padding of 50px</div> |
Applies a padding of 50px to a div element for medium devices and above |
.pad-55-m |
Applies padding 55px |
<div class="pad-55-m">This element will have a padding of 55px</div> |
Applies a padding of 55px to a div element for medium devices and above |
.pad-60-m |
Applies padding 60px |
<div class="pad-60-m">This element will have a padding of 60px</div> |
Applies a padding of 60px to a div element for medium devices and above |
.pad-top-0-l |
Applies top padding 0px |
<div class="pad-top-0-l">This element will have a top padding of 0px</div> |
Applies a padding-top of 0px to a div element for large devices and above |
.pad-top-5-l |
Applies top padding 5px |
<div class="pad-top-5-l">This element will have a top padding of 5px</div> |
Applies a padding-top of 5px to a div element for large devices and above |
.pad-top-10-l |
Applies top padding 10px |
<div class="pad-top-10-l">This element will have a top padding of 10px</div> |
Applies a padding-top of 10px to a div element for large devices and above |
.pad-top-15-l |
Applies top padding 15px |
<div class="pad-top-15-l">This element will have a top padding of 15px</div> |
Applies a padding-top of 15px to a div element for large devices and above |
.pad-top-20-l |
Applies top padding 20px |
<div class="pad-top-20-l">This element will have a top padding of 20px</div> |
Applies a padding-top of 20px to a div element for large devices and above |
.pad-top-25-l |
Applies top padding 25px |
<div class="pad-top-25-l">This element will have a top padding of 25px</div> |
Applies a padding-top of 25px to a div element for large devices and above |
.pad-top-30-l |
Applies top padding 30px |
<div class="pad-top-30-l">This element will have a top padding of 30px</div> |
Applies a padding-top of 30px to a div element for large devices and above |
.pad-top-35-l |
Applies top padding 35px |
<div class="pad-top-35-l">This element will have a top padding of 35px</div> |
Applies a padding-top of 35px to a div element for large devices and above |
.pad-top-40-l |
Applies top padding 40px |
<div class="pad-top-40-l">This element will have a top padding of 40px</div> |
Applies a padding-top of 40px to a div element for large devices and above |
.pad-top-45-l |
Applies top padding 45px |
<div class="pad-top-45-l">This element will have a top padding of 45px</div> |
Applies a padding-top of 45px to a div element for large devices and above |
.pad-top-50-l |
Applies top padding 50px |
<div class="pad-top-50-l">This element will have a top padding of 50px</div> |
Applies a padding-top of 50px to a div element for large devices and above |
.pad-top-55-l |
Applies top padding 55px |
<div class="pad-top-55-l">This element will have a top padding of 55px</div> |
Applies a padding-top of 55px to a div element for large devices and above |
.pad-top-60-l |
Applies top padding 60px |
<div class="pad-top-60-l">This element will have a top padding of 60px</div> |
Applies a padding-top of 60px to a div element for large devices and above |
.pad-bottom-0-l |
Applies bottom padding 0px |
<div class="pad-bottom-0-l">This element will have a bottom padding of 0px</div> |
Applies a padding-bottom of 0px to a div element for large devices and above |
.pad-bottom-5-l |
Applies bottom padding 5px |
<div class="pad-bottom-5-l">This element will have a bottom padding of 5px</div> |
Applies a padding-bottom of 5px to a div element for large devices and above |
.pad-bottom-10-l |
Applies bottom padding 10px |
<div class="pad-bottom-10-l">This element will have a bottom padding of 10px</div> |
Applies a padding-bottom of 10px to a div element for large devices and above |
.pad-bottom-15-l |
Applies bottom padding 15px |
<div class="pad-bottom-15-l">This element will have a bottom padding of 15px</div> |
Applies a padding-bottom of 15px to a div element for large devices and above |
.pad-bottom-20-l |
Applies bottom padding 20px |
<div class="pad-bottom-20-l">This element will have a bottom padding of 20px</div> |
Applies a padding-bottom of 20px to a div element for large devices and above |
.pad-bottom-25-l |
Applies bottom padding 25px |
<div class="pad-bottom-25-l">This element will have a bottom padding of 25px</div> |
Applies a padding-bottom of 25px to a div element for large devices and above |
.pad-bottom-30-l |
Applies bottom padding 30px |
<div class="pad-bottom-30-l">This element will have a bottom padding of 30px</div> |
Applies a padding-bottom of 30px to a div element for large devices and above |
.pad-bottom-35-l |
Applies bottom padding 35px |
<div class="pad-bottom-35-l">This element will have a bottom padding of 35px</div> |
Applies a padding-bottom of 35px to a div element for large devices and above |
.pad-bottom-40-l |
Applies bottom padding 40px |
<div class="pad-bottom-40-l">This element will have a bottom padding of 40px</div> |
Applies a padding-bottom of 40px to a div element for large devices and above |
.pad-bottom-45-l |
Applies bottom padding 45px |
<div class="pad-bottom-45-l">This element will have a bottom padding of 45px</div> |
Applies a padding-bottom of 45px to a div element for large devices and above |
.pad-bottom-50-l |
Applies bottom padding 50px |
<div class="pad-bottom-50-l">This element will have a bottom padding of 50px</div> |
Applies a padding-bottom of 50px to a div element for large devices and above |
.pad-bottom-55-l |
Applies bottom padding 55px |
<div class="pad-bottom-55-l">This element will have a bottom padding of 55px</div> |
Applies a padding-bottom of 55px to a div element for large devices and above |
.pad-bottom-60-l |
Applies bottom padding 60px |
<div class="pad-bottom-60-l">This element will have a bottom padding of 60px</div> |
Applies a padding-bottom of 60px to a div element for large devices and above |
.pad-0-l |
Applies padding 0px |
<div class="pad-0-l">This element will have a padding of 0px</div> |
Applies a padding of 0px to a div element for large devices and above |
.pad-5-l |
Applies padding 5px |
<div class="pad-5-l">This element will have a padding of 5px</div> |
Applies a padding of 5px to a div element for large devices and above |
.pad-10-l |
Applies padding 10px |
<div class="pad-10-l">This element will have a padding of 10px</div> |
Applies a padding of 10px to a div element for large devices and above |
.pad-15-l |
Applies padding 15px |
<div class="pad-15-l">This element will have a padding of 15px</div> |
Applies a padding of 15px to a div element for large devices and above |
.pad-20-l |
Applies padding 20px |
<div class="pad-20-l">This element will have a padding of 20px</div> |
Applies a padding of 20px to a div element for large devices and above |
.pad-25-l |
Applies padding 25px |
<div class="pad-25-l">This element will have a padding of 25px</div> |
Applies a padding of 25px to a div element for large devices and above |
.pad-30-l |
Applies padding 30px |
<div class="pad-30-l">This element will have a padding of 30px</div> |
Applies a padding of 30px to a div element for large devices and above |
.pad-35-l |
Applies padding 35px |
<div class="pad-35-l">This element will have a padding of 35px</div> |
Applies a padding of 35px to a div element for large devices and above |
.pad-40-l |
Applies padding 40px |
<div class="pad-40-l">This element will have a padding of 40px</div> |
Applies a padding of 40px to a div element for large devices and above |
.pad-45-l |
Applies padding 45px |
<div class="pad-45-l">This element will have a padding of 45px</div> |
Applies a padding of 45px to a div element for large devices and above |
.pad-50-l |
Applies padding 50px |
<div class="pad-50-l">This element will have a padding of 50px</div> |
Applies a padding of 50px to a div element for large devices and above |
.pad-55-l |
Applies padding 55px |
<div class="pad-55-l">This element will have a padding of 55px</div> |
Applies a padding of 55px to a div element for large devices and above |
.pad-60-l |
Applies padding 60px |
<div class="pad-60-l">This element will have a padding of 60px</div> |
Applies a padding of 60px to a div element for large devices and above |
.pad-top-0-xl |
Applies top padding 0px |
<div class="pad-top-0-xl">This element will have a top padding of 0px</div> |
Applies a padding-top of 0px to a div element for extra large devices and above |
.pad-top-5-xl |
Applies top padding 5px |
<div class="pad-top-5-xl">This element will have a top padding of 5px</div> |
Applies a padding-top of 5px to a div element for extra large devices and above |
.pad-top-10-xl |
Applies top padding 10px |
<div class="pad-top-10-xl">This element will have a top padding of 10px</div> |
Applies a padding-top of 10px to a div element for extra large devices and above |
.pad-top-15-xl |
Applies top padding 15px |
<div class="pad-top-15-xl">This element will have a top padding of 15px</div> |
Applies a padding-top of 15px to a div element for extra large devices and above |
.pad-top-20-xl |
Applies top padding 20px |
<div class="pad-top-20-xl">This element will have a top padding of 20px</div> |
Applies a padding-top of 20px to a div element for extra large devices and above |
.pad-top-25-xl |
Applies top padding 25px |
<div class="pad-top-25-xl">This element will have a top padding of 25px</div> |
Applies a padding-top of 25px to a div element for extra large devices and above |
.pad-top-30-xl |
Applies top padding 30px |
<div class="pad-top-30-xl">This element will have a top padding of 30px</div> |
Applies a padding-top of 30px to a div element for extra large devices and above |
.pad-top-35-xl |
Applies top padding 35px |
<div class="pad-top-35-xl">This element will have a top padding of 35px</div> |
Applies a padding-top of 35px to a div element for extra large devices and above |
.pad-top-40-xl |
Applies top padding 40px |
<div class="pad-top-40-xl">This element will have a top padding of 40px</div> |
Applies a padding-top of 40px to a div element for extra large devices and above |
.pad-top-45-xl |
Applies top padding 45px |
<div class="pad-top-45-xl">This element will have a top padding of 45px</div> |
Applies a padding-top of 45px to a div element for extra large devices and above |
.pad-top-50-xl |
Applies top padding 50px |
<div class="pad-top-50-xl">This element will have a top padding of 50px</div> |
Applies a padding-top of 50px to a div element for extra large devices and above |
.pad-top-55-xl |
Applies top padding 55px |
<div class="pad-top-55-xl">This element will have a top padding of 55px</div> |
Applies a padding-top of 55px to a div element for extra large devices and above |
.pad-top-60-xl |
Applies top padding 60px |
<div class="pad-top-60-xl">This element will have a top padding of 60px</div> |
Applies a padding-top of 60px to a div element for extra large devices and above |
.pad-bottom-0-xl |
Applies bottom padding 0px |
<div class="pad-bottom-0-xl">This element will have a bottom padding of 0px</div> |
Applies a padding-bottom of 0px to a div element for extra large devices and above |
.pad-bottom-5-xl |
Applies bottom padding 5px |
<div class="pad-bottom-5-xl">This element will have a bottom padding of 5px</div> |
Applies a padding-bottom of 5px to a div element for extra large devices and above |
.pad-bottom-10-xl |
Applies bottom padding 10px |
<div class="pad-bottom-10-xl">This element will have a bottom padding of 10px</div> |
Applies a padding-bottom of 10px to a div element for extra large devices and above |
.pad-bottom-15-xl |
Applies bottom padding 15px |
<div class="pad-bottom-15-xl">This element will have a bottom padding of 15px</div> |
Applies a padding-bottom of 15px to a div element for extra large devices and above |
.pad-bottom-20-xl |
Applies bottom padding 20px |
<div class="pad-bottom-20-xl">This element will have a bottom padding of 20px</div> |
Applies a padding-bottom of 20px to a div element for extra large devices and above |
.pad-bottom-25-xl |
Applies bottom padding 25px |
<div class="pad-bottom-25-xl">This element will have a bottom padding of 25px</div> |
Applies a padding-bottom of 25px to a div element for extra large devices and above |
.pad-bottom-30-xl |
Applies bottom padding 30px |
<div class="pad-bottom-30-xl">This element will have a bottom padding of 30px</div> |
Applies a padding-bottom of 30px to a div element for extra large devices and above |
.pad-bottom-35-xl |
Applies bottom padding 35px |
<div class="pad-bottom-35-xl">This element will have a bottom padding of 35px</div> |
Applies a padding-bottom of 35px to a div element for extra large devices and above |
.pad-bottom-40-xl |
Applies bottom padding 40px |
<div class="pad-bottom-40-xl">This element will have a bottom padding of 40px</div> |
Applies a padding-bottom of 40px to a div element for extra large devices and above |
.pad-bottom-45-xl |
Applies bottom padding 45px |
<div class="pad-bottom-45-xl">This element will have a bottom padding of 45px</div> |
Applies a padding-bottom of 45px to a div element for extra large devices and above |
.pad-bottom-50-xl |
Applies bottom padding 50px |
<div class="pad-bottom-50-xl">This element will have a bottom padding of 50px</div> |
Applies a padding-bottom of 50px to a div element for extra large devices and above |
.pad-bottom-55-xl |
Applies bottom padding 55px |
<div class="pad-bottom-55-xl">This element will have a bottom padding of 55px</div> |
Applies a padding-bottom of 55px to a div element for extra large devices and above |
.pad-bottom-60-xl |
Applies bottom padding 60px |
<div class="pad-bottom-60-xl">This element will have a bottom padding of 60px</div> |
Applies a padding-bottom of 60px to a div element for extra large devices and above |
.pad-0-xl |
Applies padding 0px |
<div class="pad-0-xl">This element will have a padding of 0px</div> |
Applies a padding of 0px to a div element for extra large devices and above |
.pad-5-xl |
Applies padding 5px |
<div class="pad-5-xl">This element will have a padding of 5px</div> |
Applies a padding of 5px to a div element for extra large devices and above |
.pad-10-xl |
Applies padding 10px |
<div class="pad-10-xl">This element will have a padding of 10px</div> |
Applies a padding of 10px to a div element for extra large devices and above |
.pad-15-xl |
Applies padding 15px |
<div class="pad-15-xl">This element will have a padding of 15px</div> |
Applies a padding of 15px to a div element for extra large devices and above |
.pad-20-xl |
Applies padding 20px |
<div class="pad-20-xl">This element will have a padding of 20px</div> |
Applies a padding of 20px to a div element for extra large devices and above |
.pad-25-xl |
Applies padding 25px |
<div class="pad-25-xl">This element will have a padding of 25px</div> |
Applies a padding of 25px to a div element for extra large devices and above |
.pad-30-xl |
Applies padding 30px |
<div class="pad-30-xl">This element will have a padding of 30px</div> |
Applies a padding of 30px to a div element for extra large devices and above |
.pad-35-xl |
Applies padding 35px |
<div class="pad-35-xl">This element will have a padding of 35px</div> |
Applies a padding of 35px to a div element for extra large devices and above |
.pad-40-xl |
Applies padding 40px |
<div class="pad-40-xl">This element will have a padding of 40px</div> |
Applies a padding of 40px to a div element for extra large devices and above |
.pad-45-xl |
Applies padding 45px |
<div class="pad-45-xl">This element will have a padding of 45px</div> |
Applies a padding of 45px to a div element for extra large devices and above |
.pad-50-xl |
Applies padding 50px |
<div class="pad-50-xl">This element will have a padding of 50px</div> |
Applies a padding of 50px to a div element for extra large devices and above |
.pad-55-xl |
Applies padding 55px |
<div class="pad-55-xl">This element will have a padding of 55px</div> |
Applies a padding of 55px to a div element for extra large devices and above |
.pad-60-xl |
Applies padding 60px |
<div class="pad-60-xl">This element will have a padding of 60px</div> |
Applies a padding of 60px to a div element for extra large devices and above |
View page example with the layout spacers stylesheet applied.
- IE10+ and all other modern browsers.
- Please specify browsers you need to support in
package.json
according to browserslist docs.
Code released under the MIT Open Source license.