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