How do I use the Spacing Utility Classes in Bootstrap

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>

Solution 1:

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-*
pr-* = 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?

Solution 2:

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.