vertical style linea horizontal grosor color bootstrap css html5 css3 bootstrap-4 twitter-bootstrap-4

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