[SOLVED] Bootstrap Spacing classes not working

Bootstrap Spacing classes not working

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

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>