Bootstrap: v4: Spacing utility classes don't define value limits

[bellwood]

Perhaps this is a work in progress item, however, if I want to add some padding or a margin to a row, container, image, etc it does not work.

However if I add the same class, say, m-b-10, to a H1->6 element, it works just fine.

EDIT: See below, lack of documentation and therefore use of invalid values was the root cause.

[RyanZim]

Please provide a Reduced Test Case (JSBin/JSFiddle). Thanks!

[bellwood]

Sure thing: https://jsfiddle.net/cq237fa9/

As you can see, the top header gives bottom margin, but the image does not give bottom margin

[RyanZim]

@bellwood, there is no .m-b-50 class; only .m-b-0, .m-b-1, .m-b-2, and .m-b-3. http://v4-alpha.getbootstrap.com/components/utilities/#spacing

h1-h6 have margin-bottom: .5rem; set by default. I removed the .m-b-50 class from <h2> in your example and the margin is still the same: https://jsfiddle.net/cq237fa9/1/.

Please close this issue. Thanks!

[bellwood]

Thanks, but, the docs don't mention any limits/maximum values so that needs to be addressed to avoid confusion.

I will re-title the issue regarding the need for documentation.

[RyanZim]

It's pretty clearly stated IMO:

The classes are named using the format: {property}-{sides}-{size}
...
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-x or $spacer-y
• 2 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
• 3 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3

Edit: See https://github.com/twbs/bootstrap/blob/v4-dev/docs/components/utilities.md#spacing for the latest version of these docs.

[bellwood]

It may be clear from the biased view of those who wrote it.

To an end user that's horribly confusing.

Where size is an integer, 0 - 3, and is one of:...

That clearly defines it without get wordy =)

[RyanZim]

@bellwood That does sound like an improvement.

I was mainly challenging the statement:

the docs don't mention any limits/maximum values

(Emphasis Mine)

I should have worded it less strongly.

[cvrebert]

There's a Markdown syntax error in the alpha-2 version of the docs. The description is supposed to be a bulleted list, not a paragraph. When properly formatted, I think it's pretty clear and the suggested "Where size is an integer, 0 - 3," would be redundant. I've edited https://github.com/twbs/bootstrap/issues/19778#issuecomment-213067392 in-place to show the correct formatting. @bellwood Does the list format make things sufficiently clear?

[RyanZim]

@cvrebert Sorry, I forgot to look at the latest master branch before commenting.

[cvrebert]

Don't sweat it. :smile:

[bellwood]

@cvrebert I'm not seeing the comment formatted any differently :(

[cvrebert]

@bellwood Try looking at https://github.com/twbs/bootstrap/blob/v4-dev/docs/components/utilities.md#spacing then

[bellwood]

@cvrebert: nothing could be clearer... thank you both =)