34

I am trying to add spacing to my div/ul as shown in Bootstrap Utilities Documents. But it's not working at all and I couldn't even trace the class in Firebug.

http://v4-alpha.getbootstrap.com/components/utilities/#spacing

My HTML Code

<div>
    <ul class="p-t-20">
        <li><a href="#" class="fa fa-calendar fa-lg"> Events</a> </li>
    </ul>
</div>

I tried to use both m-t-20 or p-t-20 or other combinations. But it doesn't work at all. How could I use these bootstrap classes?

And I am using these Bootstrap CSS files. Am I using the wrong version?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
Vucko
  • 20,555
  • 10
  • 56
  • 107
TTCG
  • 8,805
  • 31
  • 93
  • 141
  • 6
    Your link points to bootstraps version 4, while you're including version 3.3.5 in you project. Maybe thats the issue, that spacing doesn't exist in v3.3.5? – Vucko Feb 02 '16 at 08:59

6 Answers6

129

Today 2021 in boostrap 5 Margin and Padding :
 Margin
Margin top: mt-value
Margin right: me-value
Margin bottom: mb-value
Margin left: ms-value

Padding
Padding top: pt-value
Padding right: pe-value
Padding bottom: pb-value
Paddig left: ps-value.
Where the range for the value is 0 to 5

Eduardo Tolentino
  • 1,470
  • 1
  • 12
  • 8
  • 4
    any reasoning for using e and s instead of very obvious r and l ? – Saurabh Tiwari Sep 26 '21 at 12:31
  • 29
    The reason is due to the text direction of LTR and RTL and it now means `S`tart and `E`nd and the margin will swap automagically sides depending on the `direction` property. – Mario Figueiredo Sep 29 '21 at 15:55
  • Ahh classic, was trying to use the Bootstrap 4 utilities instead. For those looking for the Bootstrap 5 utilities, I believe this is the link: https://getbootstrap.com/docs/5.0/utilities/flex/. – Jarrett Mar 22 '22 at 05:42
  • @MarioFigueiredo sorry, but LTR and RTL have left and right in their actual acronyms lol – quemeful Apr 19 '22 at 13:34
  • 4
    @quemeful yes, and the start is different for the two depending on which comes first. right is start in "R(ight)T(o)L(eft)" but is the end in "LeftToRight". hence the distinction by S(tart) and E(nd) instead of the old L(eft) and R(ight) – Mario Figueiredo Apr 19 '22 at 18:53
  • @MarioFigueiredo Unfortunately, unfortunately, neither bootstrap 4, nor 5 have any run-time or context-sensitive orientations. If you are setting an starting margin for any element, for example, inside a d-flex div, and set it with "ms-5", it only means start margin in "LTR" direction, and if you change the direction to "RTL", it is taken as an "end margin"!!! and that's very very weird and seems that the new notations in bootstrap 5 like "ms-4", for the preceding bootstrap 4's "ml-4" actually is not so smart! There is no any automagically swapping directions within direction context! – Sherveeen Apr 13 '23 at 12:00
  • @Sherveeen i can see what you mean, the wording is wrong, you still need to import bootstrap RTL stylesheet, but the classes used dont change, thanks for letting me know, will add a note redirecting your comment Edit2: seems i cant actually edit that comment anymore, flag it for moderator attention if you can – Mario Figueiredo Apr 14 '23 at 15:13
  • @MarioFigueiredo It seems I could not tell it simple right. I mean, if we are using start prefix for an element, e.g. starting margin, it should be interpreted an start margin for both the RTL and LTR directions. This way I can make a unique design - no matter the direction be - the element will have a starting margin. But unfortunately in Bootstrap 5, when I change direction of my page from LTR to RTL, I'll have to convert all starting notations to endings, and vice versa. So it does not give me a perfect solution to simply change direction and translate texts for a multi-language solution! – Sherveeen Apr 29 '23 at 13:00
  • I just wasted an hour trying to figure this out, because ChatGPT insidted on giving me the mr version. – Eternal21 Jun 08 '23 at 14:47
10

Yes you are using older version of bootstrap. Demo 3.3.5 that's why it is not working

If you use V4.0 , Demo here its working fine

As Vucko mentioned, your Bootstrap version does not have the classes you used in your HTML structure.. 

<div>
    <ul class="p-t-20">
        <li><a href="#" class="fa fa-calendar fa-lg"> Events</a> </li>
    </ul>
</div>
G.L.P
  • 7,119
  • 5
  • 25
  • 41
8

Actually the class is like:

{property}{sides}-{size}

Example: mt-1

user3465124
  • 91
  • 1
  • 2
3

Tested it but this particular class definition does not work (anymore..) . Think they removed that particular classes.

But e.g. class="m-y" does work (in v4.0.0-alpha)

BMW
  • 42,880
  • 12
  • 99
  • 116
MrElGwiedo
  • 41
  • 3
1

Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto
Mahak Choudhary
  • 1,286
  • 1
  • 16
  • 13
0

Maybe you are using inline elements. Margin top and margin bottom wont work in inline elements. To make it work, you can change the display property of that inline element to inline-block.

Abhishek
  • 546
  • 5
  • 13