Does bootstrap 4 have a built in horizontal divider

Question

Does bootstrap 4 have a built in horizontal divider  I can do this    lt style type  text css  gt   h-divider   margin-top 5px   margin-bottom 5px   height 1px   width 100    border-top 1px solid gray     lt  style gt    But I want to use the built in bootstrap css  I can t find it anywhere in the docs  maybe I m missing it

User · Answer

Bootstrap 4 define a CSS style for the HTML built-in horizontal divider  lt hr   gt   so just use it   You can also customize margin with spacing utilities  mt for margin top  mb for margin bottom and my for margin top and bottom  The integer represent spacing 1 for small margin and 5 for huge margin  Here is an example    lt hr class  mt-2 mb-3   gt   lt  -- OR -- gt   lt hr class  my-3   gt   lt  -- It s like -- gt   lt hr class  mt-3 mb-3   gt    I used to be using just a div with border-top like    lt div class  border-top my-3  gt  lt  div gt    but it s a silly method to make the work done  and you can have some issues  So just use  lt hr   gt

User · Answer

For Bootstrap 4   lt hr gt  still works for a normal divider  However  if you want a divider with text in the middle    lt div class  row  gt       lt div class  col  gt  lt hr gt  lt  div gt       lt div class  col-auto  gt OR lt  div gt       lt div class  col  gt  lt hr gt  lt  div gt   lt  div gt

User · Answer

HTML already has a built-in horizontal divider called  lt hr  gt   short for  horizontal rule    Bootstrap styles it like this   hr     margin-top  1rem    margin-bottom  1rem    border  0    border-top  1px solid rgba 0  0  0  0 1        x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css    gt  x000D   lt p gt  x000D     Some text x000D      lt hr  gt  x000D     More text x000D   lt  p gt  x000D   x000D   x000D

User · Answer

For Bootstrap v4  for a thin line   lt div class  quot divider quot  gt  lt  div gt   for a medium thick line   lt div class  quot divider py-1 bg-dark quot  gt  lt  div gt   for a thick line   lt div class  quot divider py-1 bg-dark quot  gt  lt hr gt  lt  div gt

User · Answer

x000D   x000D      lt div class  form-group col-12  gt  x000D               lt hr gt  x000D      lt  div gt  x000D   x000D   x000D

User · Answer

lt div class  dropdown  gt     lt button data-toggle  dropdown  gt        Sample Button    lt  button gt     lt ul class  dropdown-menu  gt         lt li gt A lt  li gt         lt li gt B lt  li gt         lt li class  dropdown-divider  gt  lt  li gt         lt li gt C lt  li gt     lt  ul gt   lt  div gt    This is the sample code for the horizontal divider in bootstrap 4   Output looks like this   class  dropdown-divider  used in bootstrap 4  while class  divider  used in bootstrap 3 for horizontal divider

User · Answer

Here are some custom utility classes   x000D   x000D  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    x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 4 5 2 css bootstrap min css  gt    lt div class  container py-5  gt       lt  -- For Demo Purpose -- gt       lt header class  py-5 text-center  gt           lt h1 class  display-4  gt Bootstrap Divider lt  h1 gt           lt p class  lead mb-0  gt Some divider variants using  amp lt hr amp gt  element      lt  p gt       lt  header gt         lt div class  row  gt           lt div class  col-lg-8 mx-auto  gt               lt div class  mb-4  gt                   lt h6 class   text-uppercase  gt Dashed lt  h6 gt                   lt  -- Dashed divider -- gt                   lt hr class  dashed  gt               lt  div gt               lt div class  mb-4  gt                   lt h6 class   text-uppercase  gt Dotted lt  h6 gt                   lt  -- Dotted divider -- gt                   lt hr class  dotted  gt               lt  div gt               lt div class  mb-4  gt                   lt h6 class  text-uppercase  gt Solid lt  h6 gt                   lt  -- Solid divider -- gt                   lt hr class  solid  gt               lt  div gt               lt div class  mb-4  gt                   lt h6 class   text-uppercase  gt Text content lt  h6 gt                   lt  -- Gradient divider -- gt                   lt hr data-content  AND  class  hr-text  gt               lt  div gt                       lt  div gt       lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

For dropdowns  yes   https   v4-alpha getbootstrap com components dropdowns    lt div class  dropdown-menu  gt     lt a class  dropdown-item  href     gt Action lt  a gt     lt a class  dropdown-item  href     gt Another action lt  a gt     lt a class  dropdown-item  href     gt Something else here lt  a gt     lt div class  dropdown-divider  gt  lt  div gt     lt a class  dropdown-item  href     gt Separated link lt  a gt   lt  div gt

User · Answer

I am using this example in my project  html    lt hr class  quot my-3 dividerClass quot   gt   css   dividerClass    border-top-color   999

User · Answer

in Bootstrap 5 you can do something like this   lt div class  quot py-2 my-1 text-center position-relative mx-2 quot  gt               lt div class  quot position-absolute w-100 top-50 start-50 translate-middle quot  style  quot z-index  2 quot  gt                   lt span class  quot d-inline-block bg-white px-2 text-muted quot  gt or lt  span gt               lt  div gt               lt div class  quot position-absolute w-100 top-50 start-0 border-muted border-top quot  gt  lt  div gt   lt  div gt

User · Answer

You can use the mt and mb spacing utilities to add extra margins to the  lt hr gt   for example    lt hr class  mt-5 mb-5  gt    https   getbootstrap com docs 4 3 utilities spacing

[html] Does bootstrap 4 have a built in horizontal divider?

Examples related to html

Examples related to css

Examples related to bootstrap-4

Examples related to twitter-bootstrap-4