Bootstrap panels stacking after the row

Question

I'm building web dashboard for my app. It loads dynamically different modules and puts them inside Bootstrap container. These modules can have variable height and when the browser window is narrow enough, they stack vertically. That's what I wanted.

The problem is with the higher resolutions. I'd like to stack them in 3 columns, so I put every panel inside <div class="col-sm-4"> It works great if we have 3 panels only. With fourth, we get something like this:

I've searched for other approaches and found one that suggested removing <div class="col-sm-4"> so I did it with poor result:

The only working way was to manually add panels to one of the columns.

That produced intended result, but needs more JS logic to operate. I need to count how many panels do I have and choose proper column. Is this the only way to go or did I miss something? Thanks!

EDITED - of course I've forgot to include code.

    <!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </head>
<body>

<div class="container">

  <div class="page-header">
    <h1>Stack test</h1>
    <p class="lead"></p>
  </div>

  <!--<div class="row">-->
    <div class="col-sm-4">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 1</h3>
        </div>
        <div class="panel-body">
          I miss panel 4 so much :(
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 2</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 3</h3>
        </div>
        <div class="panel-body">
          Such panel. Much content. Wow.
          <br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/>
          End of long content.

        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 4</h3>
        </div>
        <div class="panel-body">
          I don't want to have that much space above me!
        </div>
      </div>
    </div>

</div> <!-- /container -->

</body>
</html>

if you sure, you'll use four panels, just change `col-sm-4` to `col-sm-3` — Igor Ivancha, Feb 17 '16 at 16:00
This is how Bootstrap works, there is no other way. You can use your own JS code or use some plugins like http://masonry.desandro.com/ — max, Feb 17 '16 at 16:11
Are you trying to create a type of masonry layout? And post a working example of your code. [mcve]. — vanburen, Feb 17 '16 at 16:15
I've added some code. The goal is indeed to get something like masonry layout, but I don't need evenly distributed height... Just don't want to waste space leaving these huge gaps. — Mark, Feb 18 '16 at 05:53
@MarkJquery masonry would be better option http://masonry.desandro.com/ — Vivekraj K R, Feb 18 '16 at 05:54

score 1 · Answer 1 · answered Feb 18 '16 at 06:09

Try changing the existing layout little bit like here.

CODE:

<div class="container">

    <div class="page-header">
        <h1>Stack test</h1>
        <p class="lead"></p>
    </div>

    <div class="row">
        <div class="col-sm-4">
            <div id="panel_control_manual" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel 1</h3>
                </div>
                <div class="panel-body">
                    I miss panel 4 so much :(
                </div>
            </div>                
            <div id="panel_control_manual" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel 4</h3>
                </div>
                <div class="panel-body">
                    I don't want to have that much space above me!
                </div>
            </div>
        </div>           

        <div class="col-sm-4">
            <div id="panel_control_manual" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel 2</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>

        <div class="col-sm-4">
            <div id="panel_control_manual" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel 3</h3>
                </div>
                <div class="panel-body">
                    Such panel. Much content. Wow.
                    <br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br />
                    End of long content.

                </div>
            </div>
        </div>
    </div>
</div>

score 0 · Answer 2 · answered Feb 18 '16 at 06:00

0

It's a great issue. I think to do it, you have to use masonary js.

answered Feb 18 '16 at 06:00

Sarower Jahan

1,445
1
13
20

score -2 · Answer 3 · answered Feb 18 '16 at 06:29

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </head>
<body>

<div class="container">

  <div class="page-header">
    <h1>Stack test</h1>
    <p class="lead"></p>
  </div>

  <div class="row">
    <div class="col-lg-3 col-sm-3 col-xs-3">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">This is 1</h3>
        </div>
        <div class="panel-body">
          I miss panel 4 so much :( :)
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-sm-3 col-xs-3">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">This is 2</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-sm-3 col-xs-3">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 3</h3>
        </div>
        <div class="panel-body">
          Such panel. Much content. Wow.
          <br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/>
          End of long content.

        </div>
      </div>
    </div>

    <div class="col-lg-3 col-sm-3 col-xs-3">
      <div id="panel_control_manual" class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">This is 4</h3>
        </div>
        <div class="panel-body">
          I don't want to have that much space above me!
        </div>
      </div>
    </div>
  </div>

</div> <!-- /container -->

</body>
</html>

This is Result

Bootstrap panels stacking after the row

3 Answers3