Twitter Bootstrap: margin-bottom built in css class

Question

Is there built in margin bottom class to use? I tried with bottom5 like

<div class="col-lg-2 bottom5"></div>

but this doesn't work.

[look at this answer](https://stackoverflow.com/questions/41574776/what-is-class-mb-0-in-bootstrap-4/50250902#50250902) — Akash Preet, Feb 13 '20 at 06:24

Piotr Salaciak · Answer 1 · 2018-10-01T12:12:37.717

Boostrap 4 has a spacing feature that solves that problem https://getbootstrap.com/docs/4.0/utilities/spacing/

But, in you are sticked to older bootstrap version or can't use it a all and in case you need a complete list of margin and padding classes, here it is

/* MARGINS & PADDINGS */
.p-xxs {
  padding: 5px !important;
}
.p-xs {
  padding: 10px !important;
}
.p-sm {
  padding: 15px !important;
}
.p-m {
  padding: 20px !important;
}
.p-md {
  padding: 25px !important;
}
.p-lg {
  padding: 30px !important;
}
.p-xl {
  padding: 40px !important;
}
.m-xxs {
  margin: 2px 4px;
}
.m-xs {
  margin: 5px;
}
.m-sm {
  margin: 10px;
}
.m {
  margin: 15px;
}
.m-md {
  margin: 20px;
}
.m-lg {
  margin: 30px;
}
.m-xl {
  margin: 50px;
}
.m-n {
  margin: 0 !important;
}
.m-l-none {
  margin-left: 0;
}
.m-l-xs {
  margin-left: 5px;
}
.m-l-sm {
  margin-left: 10px;
}
.m-l {
  margin-left: 15px;
}
.m-l-md {
  margin-left: 20px;
}
.m-l-lg {
  margin-left: 30px;
}
.m-l-xl {
  margin-left: 40px;
}
.m-l-n-xxs {
  margin-left: -1px;
}
.m-l-n-xs {
  margin-left: -5px;
}
.m-l-n-sm {
  margin-left: -10px;
}
.m-l-n {
  margin-left: -15px;
}
.m-l-n-md {
  margin-left: -20px;
}
.m-l-n-lg {
  margin-left: -30px;
}
.m-l-n-xl {
  margin-left: -40px;
}
.m-t-none {
  margin-top: 0;
}
.m-t-xxs {
  margin-top: 1px;
}
.m-t-xs {
  margin-top: 5px;
}
.m-t-sm {
  margin-top: 10px;
}
.m-t {
  margin-top: 15px;
}
.m-t-md {
  margin-top: 20px;
}
.m-t-lg {
  margin-top: 30px;
}
.m-t-xl {
  margin-top: 40px;
}
.m-t-xxl {
  margin-top: 50px;
}
.m-t-xxxl {
  margin-top: 60px;
}
.m-t-n-xxs {
  margin-top: -1px;
}
.m-t-n-xs {
  margin-top: -5px;
}
.m-t-n-sm {
  margin-top: -10px;
}
.m-t-n {
  margin-top: -15px;
}
.m-t-n-md {
  margin-top: -20px;
}
.m-t-n-lg {
  margin-top: -30px;
}
.m-t-n-xl {
  margin-top: -40px;
}
.m-r-none {
  margin-right: 0;
}
.m-r-xxs {
  margin-right: 1px;
}
.m-r-xs {
  margin-right: 5px;
}
.m-r-sm {
  margin-right: 10px;
}
.m-r {
  margin-right: 15px;
}
.m-r-md {
  margin-right: 20px;
}
.m-r-lg {
  margin-right: 30px;
}
.m-r-xl {
  margin-right: 40px;
}
.m-r-n-xxs {
  margin-right: -1px;
}
.m-r-n-xs {
  margin-right: -5px;
}
.m-r-n-sm {
  margin-right: -10px;
}
.m-r-n {
  margin-right: -15px;
}
.m-r-n-md {
  margin-right: -20px;
}
.m-r-n-lg {
  margin-right: -30px;
}
.m-r-n-xl {
  margin-right: -40px;
}
.m-b-none {
  margin-bottom: 0;
}
.m-b-xxs {
  margin-bottom: 1px;
}
.m-b-xs {
  margin-bottom: 5px;
}
.m-b-sm {
  margin-bottom: 10px;
}
.m-b {
  margin-bottom: 15px;
}
.m-b-md {
  margin-bottom: 20px;
}
.m-b-lg {
  margin-bottom: 30px;
}
.m-b-xl {
  margin-bottom: 40px;
}
.m-b-n-xxs {
  margin-bottom: -1px;
}
.m-b-n-xs {
  margin-bottom: -5px;
}
.m-b-n-sm {
  margin-bottom: -10px;
}
.m-b-n {
  margin-bottom: -15px;
}
.m-b-n-md {
  margin-bottom: -20px;
}
.m-b-n-lg {
  margin-bottom: -30px;
}
.m-b-n-xl {
  margin-bottom: -40px;
}
.space-15 {
  margin: 15px 0;
}
.space-20 {
  margin: 20px 0;
}
.space-25 {
  margin: 25px 0;
}
.space-30 {
  margin: 30px 0;
}

It's taken from Homer Responsive Admin Theme by WebAppLayers. I guess author don't mind sharing that. It probably will save 20min of time of some Web Developer out there.

You should update your answer as Bootstrap 4 introduced Spacing, a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance, https://getbootstrap.com/docs/4.0/utilities/spacing/. — Rolando Isidoro, Apr 20 '18 at 11:17

Shivam Chhetri · Answer 2 · 2018-04-25T03:40:20.803

13

Now available in bootstrap 4

Example-

<div class="mb-5 p-5"> margin-bottom and padding with size 5 </div>

You can use-

m for margin
p for padding

And for sides:

t - top
b - bottom
l - left
r - right
x - both left & right
y - both top & bottom
blank -all sides

For size- 0,1,2,3,4,5

edited Apr 25 '18 at 03:40

answered Jan 18 '18 at 12:52

Shivam Chhetri

677
11
16

Goose · Accepted Answer · 2018-04-20T12:52:16.903

12

There is no bootstrap class for margins like you describe. The reasons would be the need for classes for margins 0 to 10s or 100s, as well as the need for multiple units, such as px, em, %, etc.

You can make your own classes fairly easy. Even easier with sublime text-editor and multi-select.

That being said, you don't want to abstract every style rule into the html. Original CSS is useful for something particular to your element, such as margins. Using bootstrap classes for every style would lead to difficult to read HTML.

This Question is tagged Bootstrap 3, but when you update to Bootstrap 4, there is a built in utility for this.

edited Apr 20 '18 at 12:52

answered Jan 18 '16 at 22:12

Goose

4,764
5
45
84

1

You should update your answer as Bootstrap 4 introduced Spacing, a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance, https://getbootstrap.com/docs/4.0/utilities/spacing/. – Rolando Isidoro Apr 20 '18 at 11:16
1

This question is marked Bootstrap 3, but I've updated my question to reflect the Bootstrap 4 update. – Goose Apr 20 '18 at 12:52

score 6 · Answer 4 · edited Jan 18 '16 at 22:16

6

Try adding the class, named margin-bottom-5

The classes are named using the format: {property}-{sides}-{size}

from: here

edited Jan 18 '16 at 22:16

Igor Ivancha

3,413
4
30
39

answered Jan 18 '16 at 22:03

CriPstian

129
2
8

3

This is for twitter-bootstrap-4 alpha. OP question is tagged as twitter-bootstrap-3. Also, this appears to be for before creating the CSS file, which doesn't seem like what OP is asking for based on the language "build in". – Goose Jan 18 '16 at 22:16

score 1 · Answer 5 · answered Jun 07 '18 at 18:11

UPDATE : Bootstrap 4 Classes

Bootstrap 4 classes to add margin and padding

Bootstrap 4 has a wide range of responsive margin and padding utility classes. They work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):

The classes are used in the format: {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

m - sets margin

p - sets padding

Where sides is one of:

t - sets margin-top or padding-top

b - sets margin-bottom or padding-bottom

l - sets margin-left or padding-left

r - sets margin-right or padding-right

x - sets both padding-left and padding-right or margin-left and margin-right(X-axis)

y - sets both padding-top and padding-bottom or margin-top and margin-bottom(Y-axis)

blank - sets a margin or padding on all 4 sides of the element Where size is one of:

0 - sets margin or padding to 0

1 - sets margin or padding to .25rem (4px if font-size is 16px)

2 - sets margin or padding to .5rem (8px if font-size is 16px)

3 - sets margin or padding to 1rem (16px if font-size is 16px)

4 - sets margin or padding to 1.5rem (24px if font-size is 16px)

5 - sets margin or padding to 3rem (48px if font-size is 16px)

auto - sets margin to auto

Reference Links : https://getbootstrap.com/docs/4.0/utilities/spacing/

HOW TO USE

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>

score 0 · Answer 6 · answered Jun 17 '20 at 01:15

0

If you want to add margin bottom you can add from mb-0 to mb-5. See :https://getbootstrap.com/docs/4.4/utilities/spacing/

answered Jun 17 '20 at 01:15

Elias Prado

1,518
2
17
32

Twitter Bootstrap: margin-bottom built in css class

6 Answers6