What is up with <hr>

I was playing with the grid system and wanted to separate the rows, so I tried


and it seems to work. How ever the first empty space is just
and after that all others must be

for this to work why is this?

it’s also pretty strange that the first empty space must be just


not

.

This post is kind of unintentionally hilarious because you didn’t post your code properly… Anyway, I believe it is recommended to use <hr /> in all cases (at least that’s how I learned it a few years back) because most css, like <b> TEXT </b> has an opening and a closing element. Since <hr /> doesn’t, you should go ahead and put it in, to make things more uniform. This works for other css elements that don’t have a closing element too, like <img />.

Hope that helps?

Thanks but this didn’t really explain what I was wondering. If you look at the source code you will notice that the first space between different rows is done using <hr/> and that works but <hr> <hr/> does not work (makes the gap too big) but after this first space between rows the rest of them have to be <hr> <hr/> then just <hr/> is not enough.

But I guess hr is not really the right way to do this anyhow…

For your grid system to be perfectly responsive, bootstrap expects a certain markup structure. Although it’s not a strict necessity, for correct functioning, it is imperative that you follow this structure.

The expected structure is you should have one container and inside your container, you should have div.row and other elements as you see fit. And inside row, you should have div.col-*-* as first level children. This I’m afraid is very important. You seem to have violated that .row > .col-*-* rule.

<div class="container">
  <div class="row">
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
  </div>
  <div class="row">
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
  </div>
  <div class="row">
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
  </div>
  <div class="row">
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
  </div>
</div>

Now, if you want your <hr/> to be shown correctly, you need to have them between your div.rows
Currently you have them inside your rows.

if you change your markup to look like

<div class="container">
  <div class="row">
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
  </div>
  <hr />
  <div class="row">
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
  </div>
  <hr />
  <div class="row">
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
  </div>
  <hr />
  <div class="row">
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
  </div>
</div>

you will get desired outcome.

Here is your cleaned up marker

<div class="container">
  <div class="row">
    <div class="col-xs-1">
      <button class="btn">1</button>
    </div>
    <div class="col-xs-1">
      <button class="btn">2</button>
    </div>

    <div class="col-xs-1">
      <button class="btn">3</button>
    </div>

    <div class="col-xs-1">
      <button class="btn">4</button>
    </div>

    <div class="col-xs-1">
      <button class="btn">5</button>
    </div>

    <div class="col-xs-1">
      <button class="btn">6</button>
    </div>

    <div class="col-xs-1">
      <button class="btn">7</button>
    </div>

    <div class="col-xs-1">
      <button class="btn">8</button>
    </div>

    <div class="col-xs-1">
      <button class="btn">9</button>
    </div>

    <div class="col-xs-1">
      <button class="btn">10</button>
    </div>
    <div class="col-xs-1">
      <button class="btn">11</button>
    </div>

    <div class="col-xs-1">
      <button class="btn">12</button>
    </div>
  </div>
  
  <hr />
  
  <div class="row">
    <div class="col-xs-4">
      <button class="btn">1</button>
    </div>

    <div class="col-xs-4">
      <button class="btn">2</button>
    </div>

    <div class="col-xs-4">
      <button class="btn">3</button>
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-xs-4">
      <button class="btn">1</button>
    </div>

    <div class="col-xs-8">
      <button class="btn">2</button>
    </div>
  </div>
  
  <hr/>
  
  <div class="row">
    <div class="col-xs-6">
      <button class="btn">1</button>
    </div>

    <div class="col-xs-6">
      <button class="btn">2</button>
    </div>
  </div>
  
  <hr/>
  
  <div class="row">
    <div class="col-xs-12">
      <button class="btn">1</button>
    </div>
  </div>
  
</div>
1 Like

Hasn’t it always just been simply <hr>???
Why <hr /> or <hr/> ?
Just plain ol’ <hr> works for me.
If there ever is a need for a slash (/) it goes before the letters like this </hr>.
This is 101 HTML, no?

@Soupedenuit

There is a context for this point to be valid.

In html You could get along with by simply saying <hr> and your code would successfully pass the validator.

However, in case of XHTML, you do need the closing / like <hr />. Otherwise it will be problematic.

Since the target environment remains unclear from this code it is safe to write <hr /> because even in case of html <hr /> would still be a valid tag.

2 Likes

Got it - thanks for the explanation!