Bootstrap Spacing classes not working

Question

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

Solution 1

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>

Solution 2

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

Solution 3

Actually the class is like:

{property}{sides}-{size}

Example: mt-1

Solution 4

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)

View more solutions