css - style - ¿Bootstrap 4 tiene un divisor horizontal incorporado?
linea horizontal en bootstrap (6)
¿Bootstrap 4 tiene un divisor horizontal incorporado? Puedo hacer esto,
<style type="text/css">
.h-divider{
margin-top:5px;
margin-bottom:5px;
height:1px;
width:100%;
border-top:1px solid gray;
}
</style>
Pero quiero usar el css bootstrap integrado, no puedo encontrarlo en ningún lugar en la documentación, tal vez me esté perdiendo.
HTML ya tiene un divisor horizontal incorporado llamado <hr/>
(abreviatura de "regla horizontal"). Bootstrap lo tiene así :
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p>Some text<hr/>More text<p>
Para los menús desplegables, sí:
https://v4-alpha.getbootstrap.com/components/dropdowns/
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
en Bootstrap 4.0v
<span class="border-top my-3"></span>
puedes cambiar my-3 a my-2; m para "margen", y para "arriba y abajo"
Para Bootstrap 4
<hr>
todavía funciona para un divisor normal. Sin embargo, si quieres 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>
<div class="form-group col-12">
<hr>
</div>
<div class="dropdown">
<button data-toggle="dropdown">
Sample Button
</button>
<ul class="dropdown-menu">
<li>A</li>
<li>B</li>
<li class="dropdown-divider"></li>
<li>C</li>
</ul>
</div>
Este es el código de ejemplo para el divisor horizontal en bootstrap 4. La salida se ve así:
class = "dropdown-divider" se usa en bootstrap 4, mientras que class = "divider" se usa en bootstrap 3 para horizontal divider