Solución:
HTML ya tiene un divisor horizontal incorporado llamado <hr/> (abreviatura de “regla horizontal”). Bootstrap lo estiliza así:
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<p>
Some text
<hr/>
More text
</p>Bootstrap 4 definir un estilo CSS para el divisor horizontal integrado en HTML <hr />, así que utilícelo.
También puede personalizar el margen con las utilidades de espaciado: mt para margen superior, mb para margen inferior y my para margen superior e inferior. El número entero representa el espaciado 1 para un pequeño margen y 5 para un gran margen. Aquí hay un ejemplo:
<hr class="mt-2 mb-3"/>
<!-- OR -->
<hr class="my-3"/>
<!-- It's like -->
<hr class="mt-3 mb-3"/>
Solía usar solo un div con border-top igual que:
<div class="border-top my-3"></div>
pero es un tonto método para hacer el trabajo, y puede tener algunos problemas. Así que solo usa <hr />.
Para Bootstrap 4
<hr> todavía funciona para un divisor normal. Sin embargo, si desea un divisor con texto en el medio:
<div class="row">
<div class="col"><hr></div>
<div class="col-auto">OR</div>
<div class="col"><hr></div>
</div>