title: Bootstrap - 5 column layout
body: <p>I'm trying to get 5 column full width layout but I can't find the solution that fits on my needs</p>
  
  <p>Here's the code I use </p>
  
  <pre><code>  &lt;!-- Content Section --&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-12" style="border: 1px solid red"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-xs-12"&gt;
                &lt;div class="col-xs-2 col-xs-offset-1" id="p1"&gt;One&lt;/div&gt;
                &lt;div class="col-xs-2" id="p2"&gt;Two&lt;/div&gt;
                &lt;div class="col-xs-2" id="p3"&gt;Three&lt;/div&gt;
                &lt;div class="col-xs-2" id="p4"&gt;Four&lt;/div&gt;
                &lt;div class="col-xs-2" id="p5"&gt;Five&lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- //col-lg-12 --&gt;
            &lt;/div&gt;
            &lt;!-- //row --&gt;
            lorem
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- //col-lg-12 --&gt;
      &lt;/div&gt;
      &lt;!-- //row --&gt;
    &lt;/div&gt;
    &lt;!-- //container --&gt;
  </code></pre>
  
  <p>As a result I get <a href="https://i.stack.imgur.com/JOteK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JOteK.png" alt="enter image description here"></a></p>
  
  <p>And here is what I'm trying to achieve. Full width 5 column layout with a space between each column
  <a href="https://i.stack.imgur.com/DAKNI.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/DAKNI.jpg" alt="enter image description here"></a></p>