CODEWITHSUNDEEP
csstwitter-bootstrap-3paddingmargins
TTCG
TTCG

Reputation: 9113

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

Upvotes: 42

Views: 93367

Answers (6)

user3465124
user3465124

Reputation: 101

Actually the class is like:

{property}{sides}-{size}

Example: mt-1

Upvotes: 9

Abhishek
Abhishek

Reputation: 1120

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.

Upvotes: 1

Mahak Choudhary
Mahak Choudhary

Reputation: 1384

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

Upvotes: 3

Eduardo Tolentino
Eduardo Tolentino

Reputation: 1699

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

Upvotes: 151

MrElGwiedo
MrElGwiedo

Reputation: 41

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)

Upvotes: 3

G.L.P
G.L.P

Reputation: 7207

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>

Upvotes: 10

Related Questions