title: Bootstrap 4 & column with full length hr
body: <p>I wanted to make a horizontal line extend across the column width specified by the bootstrap parent element. I am using Bootstrap 4.1.1. the code is as follows.</p>
  
  <pre><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-xs-5"&gt;
          &lt;p&gt;Something here!&lt;/p&gt;
          &lt;hr/&gt;
          &lt;p&gt;This list!&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>&lt;hr&gt;</code> tag inherits parent <code>&lt;div&gt;</code> property and that prevents the <code>&lt;hr&gt;</code> tag to extend up to the length of the bootstrap's container class.</p>
  
  <p>js fiddle here:
  <a href="https://jsfiddle.net/7gu21n8z/" rel="nofollow noreferrer">https://jsfiddle.net/7gu21n8z/</a></p>