Adding a class of .push-* to an element will increase its desired margin.
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 increase the right margin on small devices only, you'd use the class .mobile-push-right instead of .push-right.
Please Note: .push-* classes rely on the Bootstrap-defined variable, $line-height-computed. See documentation for that variable here.
| Group of Classes | CSS margin-* |
|---|---|
.push |
margin: $line-height-computed; |
.push-top |
margin-top: $line-height-computed; |
.push-right |
margin-right: $line-height-computed; |
.push-bottom |
margin-bottom: $line-height-computed; |
.push-left |
margin-left: $line-height-computed; |
.push-ends |
margin-top: $line-height-computed;margin-bottom: $line-height-computed; |
.push-sides |
margin-right: $line-height-computed;margin-left: $line-height-computed; |
.push-half |
margin: $line-height-computed / 2; |
.push-half-top |
margin-top: $line-height-computed / 2; |
.push-half-right |
margin-right: $line-height-computed / 2; |
.push-half-bottom |
margin-bottom: $line-height-computed / 2; |
.push-half-left |
margin-left: $line-height-computed / 2; |
.push-half-ends |
margin-top: $line-height-computed / 2;margin-bottom: $line-height-computed / 2; |
.push-half-sides |
margin-right: $line-height-computed / 2;margin-left: $line-height-computed / 2; |
.push-quarter-top |
margin-top: $line-height-computed / 4; |
.push-quarter-right |
margin-right: $line-height-computed / 4; |
.push-quarter-bottom |
margin-bottom: $line-height-computed / 4; |
.push-quarter-left |
margin-left: $line-height-computed / 4; |
.push-quarter-ends |
margin-top: $line-height-computed / 4;margin-bottom: $line-height-computed / 4; |
.push-quarter-sides |
margin-right: $line-height-computed / 2;margin-left: $line-height-computed / 4; |
Adding a class of .flush-* to an element will decrease its desired margin.
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 reduce the right margin on small devices only, you'd use the class .mobile-flush-right instead of .flush-right.
| Group of Classes | CSS margin-* |
|---|---|
.flush |
margin: 0; |
.flush-top |
margin-top: 0; |
.flush-right |
margin-right: 0; |
.flush-bottom |
margin-bottom: 0; |
.flush-left |
margin-left: 0; |
.flush-ends |
margin-top: 0;margin-bottom: 0; |
.flush-sides |
margin-right: 0;margin-left: 0; |