How to use Spacing utility classes in Bootstrap 4

Question

In this article, I saw Spacing Utility class 4 boot classes, and it uses mb-lg in className

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

but when I use it on meteorites with a reaction, nothing happens. Am I missing something or a plugin?

  <div className="container-fluid"> <div className="col-xs-6 col-xs-offset-3 mt-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> 

Answer 1

Refer to the Spacing documentation (Bootstrap v4 alpha).

Classes are named using the format: {property}-{sides}-{size}

Where the size is one of: * 0 - for classes that eliminate margin or padding , setting it to 0 * 1 - (default) for classes that set margin or padding to $spacer-x or $spacer-y * 2 - (by default) for classes that set margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5 * 3 - (by default) for classes that set margin or padding to $spacer-x * 3 or $spacer-y * 3 .

So use mt-3 instead of mt-lg .

Answer 2

2018 Bootstrap 4 Update

Bootable boot file 4 has changed since the initial response. Now the syntax is simple:

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

<strong> Examples ..

mb-2 = edge of the lower block with an interval of 2 m-0 = borderless
pt-3 = fill the top 3 interval blocks
p-1 = fill all sides 1 unit of distance

There are now 6 sizes (0-6) that are part of the standard .5rem spacer unit. In addition, the x-axis (left / right) and y-axis (upper / lower) utils are added:

my-2 = edge of the upper and lower 2 interval blocks
mx-0 = no fields left and right
px-3 = fill left and right 3 interval blocks -

And now interval utilities are reacting. The smallest breakpoint xs implied when a breakpoint is not used.

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

mt-md-2 = extreme location of two intervals, on md (and up)
py-sm-0 = no padding on top and bottom, on sm (and up)

Bootstrap 4 Spacing Utilities Demo

Answer 3

Basically it only works from 0 to 3. mt-0, mt-1, mt-2 or mt-3