<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Ejemplo de Formulario</h2>
<hr>
<br />
</div>
</div>
<div class="row">
<div class="col-lg-12">
<!-- Esta columna tiene de ancho 12 -->
<form>
<div class="form-group row">
<!-- etiqueta con ancho 4, por lo tanto el campo debe ser 8 -->
<label for="staticEmail" class="col-sm-4 col-form-label">Email</label>
<div class="col-sm-8">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<!-- etiqueta con ancho 4, el campo tiene 4 y sobran 4 -->
<label for="inputPassword" class="col-sm-4 col-form-label">Password</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
