title: How to create a line in bootstrap grid system like this screenshot
body: <p>The layout would like to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/cHIsO.png" alt=""></p>
  
  <p>And the actual implement so far
  <img src="https://i.stack.imgur.com/ctvG1.png" alt="enter image description here"></p>
  
  <p>The problem is , notice the blue line under those topic , if I use the grid system, the is some padding among those block. How can I achieve the one blue line without breaking the grid?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>            &lt;div class="row"&gt;
              &lt;div class="col-xs-12 col-sm-4 mt10"&gt;
                  &lt;p class="fs22"&gt;Latest Video&lt;/p&gt;
                  &lt;hr class="blue_line mt10 mb10"/&gt;
                  &lt;?php if (isset($latest)) { ?&gt;
                      &lt;a href='&lt;?= site_url("video/view/" . $latest['id']); ?&gt;'&gt;
                          &lt;div class="home_block"&gt;
                              &lt;img src="&lt;?= (isset($latest['image_url']) ? site_url("thumbnail/" . $latest['image_url']) : site_url("assets/img/cms/video.png")); ?&gt;"&gt;
                              &lt;div class="txt"&gt;
                                  &lt;h3&gt;&lt;?= $latest['title']; ?&gt;&lt;/h3&gt;
                                  &lt;p&gt;By &lt;?= $latest['name']; ?&gt;&lt;/p&gt;
                                  &lt;p&gt;&lt;?= $this-&gt;level_list[$latest['level']]; ?&gt;&lt;/p&gt;
                                  &lt;p class="text-muted"&gt;&lt;?= trim_word($latest['description'], 50); ?&gt;&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;?php } else { ?&gt;
                      &lt;div class="home_block center"&gt;
                          &lt;img src="&lt;?= site_url("assets/img/cms/video.png"); ?&gt;"&gt;
                          &lt;div class="txt text-center"&gt;
                              &lt;p&gt;No video available.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;?php } ?&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-sm-4 mt10"&gt;
                  &lt;p class="fs22"&gt;Popular Video&lt;/p&gt;
                  &lt;hr class="blue_line mt10 mb10"/&gt;
                  &lt;?php if (isset($popular)) { ?&gt;
                      &lt;a href='&lt;?= site_url("video/view/" . $popular['id']); ?&gt;'&gt;
                          &lt;div class="home_block center"&gt;
                              &lt;img src="&lt;?= (isset($popular['image_url']) ? site_url("thumbnail/" . $popular['image_url']) : site_url("assets/img/cms/video.png")); ?&gt;"&gt;
                              &lt;div class="txt"&gt;
                                  &lt;h3&gt;&lt;?= $popular['title']; ?&gt;&lt;/h3&gt;
                                  &lt;p&gt;By &lt;?= $popular['name']; ?&gt;&lt;/p&gt;
                                  &lt;p&gt;&lt;?= $this-&gt;level_list[$popular['level']]; ?&gt;&lt;/p&gt;
                                  &lt;p class="text-muted"&gt;&lt;?= trim_word($popular['description'], 50); ?&gt;&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;?php } else { ?&gt;
                      &lt;div class="home_block"&gt;
                          &lt;img src="&lt;?= site_url("assets/img/cms/video.png"); ?&gt;"&gt;
                          &lt;div class="txt text-center"&gt;
                              &lt;p&gt;No video available.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;?php } ?&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-sm-4 mt10"&gt;
                  &lt;p class="fs22"&gt;Community Image&lt;/p&gt;
                  &lt;hr class="blue_line mt10 mb10"/&gt;
                  &lt;div class="home_block"&gt;
                      &lt;img src="&lt;?= isset($post['image_url']) ? site_url("community/" . $post['image_url']) : site_url("assets/img/front/discuss.png"); ?&gt;"&gt;
                      &lt;div class="txt"&gt;
                          &lt;p class="text-muted" style="margin-top: 15px;"&gt;&lt;?= trim_word($post['comment'], 150); ?&gt;&lt;/p&gt;
                          &lt;p class="text-right"&gt;&lt;?= $post['create_date']; ?&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Thanks a lot for helping.</p>
  
  <p><strong>Update :</strong> To clearify, what would like to achieve is </p>
  
  <p>when it is full width e.g. col-lg </p>
  
  <p>it should like this:</p>
  
  <p><img src="https://i.stack.imgur.com/cHIsO.png" alt=""></p>
  
  <p>And when it is mobile width e.g. col-xs</p>
  
  <p>then it should like this:
  <img src="https://i.stack.imgur.com/VBLow.png" alt="enter image description here"></p>