Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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">
like image 346
TTCG Avatar asked Feb 02 '16 08:02

TTCG


People also ask

How do I add a space between bootstrap elements?

Spacing in Bootstrap can be added between elements by adding custom margin or padding to them. Bootstrap provides several short-hand utility classes to add response-friendly margin and padding to modify an element's appearance.


2 Answers

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

like image 199
Eduardo Tolentino Avatar answered Sep 28 '22 03:09

Eduardo Tolentino


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>
like image 27
G.L.P Avatar answered Sep 28 '22 05:09

G.L.P