Why is this happening: Padding related. (video)

I Need Help
1

Figured the best way to explain this is a video. Left and right padding doesn’t seem to get applied to a col.

2

No one any ideas on this? @norm?

I can’t understand if this is expected behaviour or a bug?

As a workaround I’ve put a div inside the col and applied the class to it, that works, but be nice to find out why initial method (which I’m assuming is the right way) isn’t working.

One other thing… I’ve setup a class to restrict the div to a max width of 500px, but i could see no way in the class editor to apply auto to the left and right margin, thus floating the div content in the centre.

I’ve done this by adding the following to the page stylesheet…

.centrealign {
margin-left: auto;
margin-right: auto;
}

But be cool if this ability is added to the class editor (unless it’s already there?)

3

Yes. You can write auto in the field you put the margin values in.

4

I actually tried that, but it didn’t work. Just tried again and if you type auto, nothing appears in the box, but if you just type A, auto appears. Bingo!

Thanks so much for that.

5

There are also a bunch of default Bootstrap classes you can just add. They don’t appear in the Class manager until you use them, then you can set override values if you like.

eg. mx-auto will have the same horizontal centring effect.

p-1 (0 - 5)

m-1 (0 - 5)

You can also set those by breakpoints

1 Like