title: Bootstrap ordering panels
body: <p>I've a bootstrap website but when i want that the panels are close together like on my screenshot.</p>
  
  <p>As you can see the blue panel is far away from the panel above.</p>
  
  <p>I want that the panel is like the green one but... i don't get it.</p>
  
  <p>Tried to use all the cols in one row but it does not work.</p>
  
  <p><img src="https://i.stack.imgur.com/eHQAS.jpg" alt="Green is good, but i need the blue one up"></p>
  
  <p>Here is my source code:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-3 col-sm-4"&gt;
          &lt;div class="panel panel-main"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;CSS Frameworks&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;ul class="list-unstyled"&gt;
                      &lt;li&gt;&lt;a href=""&gt;Bootstrap&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Foundation&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Skeleton&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-3 col-sm-4"&gt;
          &lt;div class="panel panel-main"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;Hulp bij programmeren&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;ul class="list-unstyled"&gt;
                      &lt;li&gt;&lt;a href=""&gt;Stackoverflow&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;W3Schools&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.phptuts.nl"&gt;PHPTuts.nl&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Codeschool&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Lynda&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Treehouse&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://css-tricks.com/"&gt;CSS-Tricks&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-3 col-sm-4"&gt;
          &lt;div class="panel panel-main"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;Generators&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;ul class="list-unstyled"&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/border-radius-generator"&gt;Border radius generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/css-animation-generator"&gt;CSS Animation generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/css-box-shadow-generator"&gt;CSS Box shadow generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/css-button-generator"&gt;CSS button generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/css-filter-generator"&gt;CSS filter generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/text-shadow-generator"&gt;CSS text shadow generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/css-shapes-generator"&gt;CSS shapes generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/google-maps-generator"&gt;Google maps generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/hash-generator"&gt;Hash generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/html5-responsive-form-generator"&gt;HTML5 responsive form generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/meta-tag-generator"&gt;Meta tag generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/pricing-tables"&gt;Pricing table generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/qr-code-generator"&gt;QR Code generator&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-3 col-sm-4"&gt;
          &lt;div class="panel panel-main"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;Webdesign&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;ul class="list-unstyled"&gt;
                      &lt;li&gt;&lt;a href="http://flatuicolors.com/"&gt;Flat UI Colors&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://coveloping.com/tools/colour-shades-generator"&gt;Color shades generator&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.freeimages.com/"&gt;Freeimages&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://dribbble.com/"&gt;Dribbble&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://www.behance.net/"&gt;Behance&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://line25.com/"&gt;Line25&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://css-tricks.com/"&gt;CSS-Tricks&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="col-md-3 col-sm-4"&gt;
          &lt;div class="panel panel-main"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;Bootstrap&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;ul class="list-unstyled"&gt;
                      &lt;li&gt;&lt;a href="http://getbootstrap.com/getting-started/" target="blank"&gt;Download bootstrap&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://getbootstrap.com/customize/" target="blank"&gt;Customize and download&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://getbootstrap.com/css/" target="blank"&gt;CSS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://getbootstrap.com/components/" target="blank"&gt;Components&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://getbootstrap.com/javascript/" target="blank"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.w3schools.com/bootstrap/" target="blank"&gt;Bootstrap W3schools&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-3 col-sm-4"&gt;
          &lt;div class="panel panel-main"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;Bootstrap&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;ul class="list-unstyled"&gt;
                      &lt;li&gt;&lt;a href="http://getbootstrap.com/getting-started/" target="blank"&gt;Download bootstrap&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://getbootstrap.com/customize/" target="blank"&gt;Customize and download&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://getbootstrap.com/css/" target="blank"&gt;CSS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://getbootstrap.com/components/" target="blank"&gt;Components&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://getbootstrap.com/javascript/" target="blank"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://www.w3schools.com/bootstrap/" target="blank"&gt;Bootstrap W3schools&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>