Bootstrap 4 a-t-il un séparateur horizontal intégré?

94

Bootstrap 4 a-t-il un séparateur horizontal intégré? Je peux le faire,

<style type="text/css">
.h-divider{
 margin-top:5px;
 margin-bottom:5px;
 height:1px;
 width:100%;
 border-top:1px solid gray;
}
</style>

Mais je veux utiliser le css bootstrap intégré, je ne le trouve nulle part dans la documentation, peut-être que je le manque.

html css bootstrap-4 twitter-bootstrap-4 user7339197
la source

Réponses:

151

HTML a déjà un diviseur horizontal intégré appelé <hr/>(abréviation de «règle horizontale»). Bootstrap le stylise comme ceci :

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>
Développer l'extrait

4château
la source
7
parfois vous devez ajouter un class = "w-100" ou le <hr> s'affichera sous forme de point. getbootstrap.com/docs/4.0/utilities/sizing
Hunter Nelson
Testé dans Bootstrap 4, les border border-primaryclasses fonctionnent hr.
Luke Puplett
58

Bootstrap 4 définit un style CSS pour le séparateur horizontal HTML intégré<hr /> , alors utilisez-le simplement.

Vous pouvez également personnaliser la marge avec des utilitaires d'espacement: mtpour la marge supérieure, mbpour la marge inférieure et mypour la marge supérieure et inférieure. L'entier représente l'espacement 1pour une petite marge et 5pour une grande marge. Voici un exemple:

<hr class="mt-2 mb-3"/>
<!-- OR -->
<hr class="my-3"/>
<!-- It's like -->
<hr class="mt-3 mb-3"/>

J'utilisais juste un divavec border-topcomme:

<div class="border-top my-3"></div>

mais c'est une méthode stupide pour faire le travail, et vous pouvez avoir des problèmes. Alors utilisez simplement<hr /> .

Anouar Fadili
la source
3
<div class = "border-top my-3"> </div> au lieu de span use div
Anuja Deshpande Patil
Par rapport à la question, cette réponse est correcte mais border- * ne doit pas être utilisé comme un diviseur. Imaginez que vous vouliez séparer plusieurs lignes. Si vous appliquez border- * à une ligne, il s'étendra d'un côté à l'autre du conteneur parent. Si vous appliquez border- * à une colonne individuelle, ils n'auront pas l'air bien lorsqu'ils sont empilés sur mobile. La seule option est d'utiliser <hr /> comme la réponse acceptée suggérée.
mai
39

Pour Bootstrap 4

<hr>fonctionne toujours pour un diviseur normal. Cependant, si vous voulez un séparateur avec du texte au milieu:

<div class="row">
    <div class="col"><hr></div>
    <div class="col-auto">OR</div>
    <div class="col"><hr></div>
</div>
kjdion84
la source
12

Pour les listes déroulantes, oui:

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>
utilisateur3791372
la source
2 

   <div class="form-group col-12">
            <hr>
   </div>
Développer l'extrait

Fares Younis
la source
2 

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

hr.dashed {
    border-top: 2px dashed #999;
}

hr.dotted {
    border-top: 2px dotted #999;
}

hr.solid {
    border-top: 2px solid #999;
}


hr.hr-text {
  position: relative;
    border: none;
    height: 1px;
    background: #999;
}

hr.hr-text::before {
    content: attr(data-content);
    display: inline-block;
    background: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    color: #999;
    border-radius: 30rem;
    padding: 0.2rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/

body {
    min-height: 100vh;
    background-color: #fff; 
    color: #333;
}
.text-uppercase {
  letter-spacing: .1em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container py-5">
    <!-- For Demo Purpose -->
    <header class="py-5 text-center">
        <h1 class="display-4">Bootstrap Divider</h1>
        <p class="lead mb-0">Some divider variants using &lt;hr&gt; element.    </p>
        <p class="font-weight-light mb-0">Snippet by <a href="https://bootstrapious.com" class="">
            <u>Bootstrapious</u></a>
        </p>
    </header>


    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="mb-4">
                <h6 class=" text-uppercase">Dashed</h6>
                <!-- Dashed divider -->
                <hr class="dashed">
            </div>
            <div class="mb-4">
                <h6 class=" text-uppercase">Dotted</h6>
                <!-- Dotted divider -->
                <hr class="dotted">
            </div>
            <div class="mb-4">
                <h6 class="text-uppercase">Solid</h6>
                <!-- Solid divider -->
                <hr class="solid">
            </div>
            <div class="mb-4">
                <h6 class=" text-uppercase">Text content</h6>
                <!-- Gradient divider -->
                <hr data-content="AND" class="hr-text">
            </div>
           
        </div>
    </div>
</div>
Développer l'extrait

Abdo-hôte
la source
1 
<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>

Il s'agit de l'exemple de code pour le diviseur horizontal dans bootstrap 4. sortie ressemble à ceci:

class = "dropdown-divider" utilisé dans bootstrap 4, tandis que class = "divider" utilisé dans bootstrap 3 pour le diviseur horizontal

Mihit Gandhi
la source
1

Pour Bootstrap v4;

pour une ligne fine;

<div class="divider"></div>

pour une ligne moyennement épaisse;

<div class="divider py-1 bg-dark"></div>

pour une ligne épaisse;

<div class="divider py-1 bg-dark"><hr></div>
Erdogan
la source
0

J'utilise cet exemple dans mon projet:

html:

 <hr class="my-3 dividerClass"/>

css:

.dividerClass{
  border-top-color: #999
 }
Mohamad Alhamid
la source