Adding a class of .soft-* to an element will increase its desired padding.
.mobile- to any of the classes below. For example, if you wanted to increase the right padding on small devices only, you'd use the class .mobile-soft-right instead of .soft-right.Please Note: .soft-* classes rely on the Bootstrap-defined variable, $line-height-computed. See documentation for that variable here.
| Group of Classes | CSS padding-* |
|---|---|
.soft |
padding: $line-height-computed; |
.soft-top |
padding-top: $line-height-computed; |
.soft-right |
padding-right: $line-height-computed; |
.soft-bottom |
padding-bottom: $line-height-computed; |
.soft-left |
padding-left: $line-height-computed; |
.soft-ends |
padding-top: $line-height-computed;padding-bottom: $line-height-computed; |
.soft-sides |
padding-right: $line-height-computed;padding-left: $line-height-computed; |
.soft-half |
padding: $line-height-computed / 2; |
.soft-half-top |
padding-top: $line-height-computed / 2; |
.soft-half-right |
padding-right: $line-height-computed / 2; |
.soft-half-bottom |
padding-bottom: $line-height-computed / 2; |
.soft-half-left |
padding-left: $line-height-computed / 2; |
.soft-half-ends |
padding-top: $line-height-computed / 2;padding-bottom: $line-height-computed / 2; |
.soft-half-sides |
padding-right: $line-height-computed / 2;padding-left: $line-height-computed / 2; |
.soft-quarter |
padding: $line-height-computed / 4; |
.soft-quarter-top |
padding-top: $line-height-computed / 4; |
.soft-quarter-right |
padding-right: $line-height-computed / 4; |
.soft-quarter-left |
padding-left: $line-height-computed / 4; |
.soft-quarter-bottom |
padding-bottom: $line-height-computed / 4; |
.soft-quarter-ends |
padding-top: $line-height-computed / 4;padding-bottom: $line-height-computed / 4; |
.soft-quarter-sides |
padding-right: $line-height-computed / 4;padding-left: $line-height-computed / 4; |
Adding a class of .hard-* to an element will decrease its desired padding.
These classes also have mobile-friendly versions to allow for class stacking. To use, prepend .mobile- to any of the classes below. For example, if you wanted to decrease the right padding on small devices only, you'd use the class .mobile-hard-right instead of .hard-right.
| Group of Classes | CSS padding-* |
|---|---|
.hard |
padding: 0; |
.hard-top |
padding-top: 0; |
.hard-right |
padding-right: 0; |
.hard-bottom |
padding-bottom: 0; |
.hard-left |
padding-left: 0; |
.hard-ends |
padding-top: 0;padding-bottom: 0; |
.hard-sides |
padding-right: 0;padding-left: 0; |