26

In this article I saw Bootstrap 4 Spacing Utility Classes, and he uses m-b-lg in className.

<div class="row">
    <div class="col-sm-6 m-b-lg">
        <!-- column-small-50%, margin-bottom-large -->
    </div>
</div>

But when I use it on meteorjs with react nothing happens. Am I missing something or missing a plugin?

<div className="container-fluid">
    <div className="col-xs-6 col-xs-offset-3 m-t-lg">
        <h1 className="text-xs-center"> Login </h1>
        <form>
            <div className="form-group">
                <input type="email" className="form-control" id="inputEmail" placeholder="Email"/>
            </div>
            <div className="form-group">
                <input type="password" className="form-control" id="inputPassword" placeholder="Password"/>
                <p className="text-xs-center"><a href="/signup"> Forgot your email or password?</a></p>
            </div>      
            <div className="form-group">
                <button className="btn btn-primary btn-block" type="submit"> Login </button>
                <p className="text-xs-center"> New to Arcademy? <a href="/signup"> Sign up now.</a></p>
            </div>
        </form>
    </div>
</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
phongyewtong
  • 5,085
  • 13
  • 56
  • 81

3 Answers3

85

Bootstrap 5 beta - update 2021

Now that Bootstrap 5 has RTL support, the concept of left and right have change to start and end. Therefore the *l- and *r- spacing utilities have changed

pl-* = ps-*
pr-* = pe-*
ml-* = ms-*
mr-* = me-*

Bootstrap 4 -update 2020

The Bootstrap 4 spacing utils have changed since the original answer (for v4 alpha). Now the syntax is simply:

  • margins: m{sides}-{size}
  • padding: p{sides}-{size}

Examples..

mb-2 = margin bottom 2 spacing units
m-0 = no margins
pt-3 = padding top 3 spacing units
p-1 = padding all sides 1 spacing unit

There are now 6 sizes (0-5) that represent a portion of the standard .5rem spacer unit. Additionally, x-axis (left/right) and y-axis (top/bottom) utils have been added:

my-2 = margin top & bottom 2 spacing units
mx-0 = no margins left & right
px-3 = padding left & right 3 spacing units

And, the spacing utils are now responsive. The smallest xs breakpoint is implied when no breakpoint is used.

  • margins: m{sides}-{breakpoint}-{size}
  • padding: p{sides}-{breakpoint}-{size}

mt-md-2 = margin top 2 spacing units, on md (and up)
py-sm-0 = no padding top & bottom, on sm (and up)

Bootstrap 4 Spacing Utils Demo

Related: Bootstrap 4 spacing bug?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • I didn't see anything in the documentation mentioning using multiple classes. For instance p-3 pb-1 seems to be only recognizing the p3 spacing despite the pb-1 class coming after the p-3 is declared. Is this supposed to be supported? – Hunter Nelson May 29 '18 at 05:02
  • 1
    See this answer: https://stackoverflow.com/questions/44025566/bootstrap-4-spacing-bug/44025627#44025627 – Carol Skelly May 29 '18 at 10:05
  • 1
    Type-o: The example `pr-*` = `me-*` should be `mr-*` = `me-*`. And I wish they would have kept the "l" and "r" sides! :-| – Rob Stoecklein Mar 21 '23 at 16:09
12

Refer to the Spacing (Bootstrap v4 alpha) documentation.

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-xor $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.

So use m-t-3 instead of m-t-lg.

Parker
  • 7,244
  • 12
  • 70
  • 92
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • I use m-t-100 nothing change.

    Login

    @bass jobsen     – phongyewtong Feb 15 '16 at 15:01
  • you shoud use `m-t-1`, `m-t-2`, or `m-t-3` – Bass Jobsen Feb 15 '16 at 21:15
  • The official Boostrap 4.0 spacing documentation is [here](https://getbootstrap.com/docs/4.0/utilities/spacing/) (although still in beta at the time of this comment). – Parker Sep 11 '17 at 13:01
  • 1
    Maybe it's me, but the documentation LOOKS marvelous and complete. Until you try to use it. Bootstrap is fantastic, the effort to build it and maintain it for all of us is huge. The documentation was also a lot of effort as well, but some was done by someone who knows the answers and doesn't need it, or by someone who is being told what the that answer should be, but doesn't understand it. For example, in this instance, is the documentation telling me to add CSS to support these utilties? Or showing me CSS what is already defined? If you read thru the whole page, the contexts aren't clear. – codenoob Dec 30 '18 at 17:57
5

Basically its only works from 0 to 3. m-t-0, m-t-1, m-t-2, or m-t-3

phongyewtong
  • 5,085
  • 13
  • 56
  • 81