phongyewtong phongyewtong - 2 months ago 12
CSS Question

How do I use the Spacing Utility Classes on Bootstrap 4 using Meteorjs-React

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 happen. Am I missing something or 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>

Answer

Also see: http://v4-alpha.getbootstrap.com/components/utilities/#spacing

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.