Arranging Bootstrap panels in a stacked layout following the row

Currently, I am in the process of constructing a web dashboard for my application. This dashboard is designed to dynamically load various modules and place them within a Bootstrap container. These modules have varying heights and will stack vertically when the browser window is narrow enough, which aligns with my desired outcome.

However, an issue arises when dealing with higher resolutions. Ideally, I would like these modules to be arranged in three columns; therefore, I enclosed each panel within <div class="col-sm-4">. This method works perfectly with just three panels. Yet, upon adding a fourth panel, the layout distorts as depicted below:

https://i.sstatic.net/oTUK4.png

In search of alternative solutions, I came across one suggestion recommending the removal of <div class="col-sm-4">, so I attempted this but encountered poor results:

https://i.sstatic.net/QShDd.png

The only successful approach involved manually assigning panels to a specific column, resulting in the intended layout, yet requiring additional JavaScript logic to function effectively. This manual process entails counting the number of panels and selecting the appropriate column. Is there an alternative method that I may have overlooked? Thank you!

EDITED - it seems I forgot to include the code snippet.

    <!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-lq8mTJOASx81Au+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/>
          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>
htmlcsstwitter-bootstrappanels

Answer №1

Consider making some slight adjustments to the current layout, perhaps similar to the example found here.

CUSTOM CODE:

<div class="container">

    <div class="page-header">
        <h1>Test Stack</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">
                    Missing panel 4 terribly :(
                </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">
                    Not a fan of having so 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">
                    This is quite the panel. A plethora of content. Impressive.
                    <br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br />
                    That's all for now.

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

Answer №2

This is a fantastic problem to tackle. I believe the solution lies in utilizing Masonry JavaScript.

Answer №3

<!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 Overflow 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">Panel 1</h3>
        </div>
        <div class="panel-body">
          I really need Panel 4 back :(
        </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">
          The content of this panel.
        </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">Info Panel 3</h3>
        </div>
        <div class="panel-body">
          Quite an elaborate panel with lots of content inside it.
          <br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/>
          End of message.

        </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 Number 4</h3>
        </div>
        <div class="panel-body">
          Why so much empty space above me?
        </div>
      </div>
    </div>
  </div>

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

</body>
</html>

Click here for the Result

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bootstrap Toggle Button with Dropdown Menu

I have a button-group with font awesome icons and a dropdown on one of them, as illustrated in the example below. I am trying to toggle the button status, but for some reason, the 'active' class is automatically removed on mouseout. It seems to ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Ensuring smooth video playback on a website

My website is experiencing issues due to a large mov file that's 157 megabytes. When I try to run it on my page using a javascript scroller animation, the animation becomes choppy. Additionally, I used css to simulate a mask, but it doesn't get m ...

htmlvideoflashmov

Preventing the display of AngularJS HTML tags while the app is being loaded

I am new to AngularJS (using version 1.5.8) and I am currently following the tutorials provided on docs.angularjs.org/tutorial. Below is the HTML code snippet: <div class="jumbotron"> <h1>{{application_name | uppercase }}</h1> ...

javascripthtmlangularjs

Is there a way to verify the identity of two fields using an external script such as "signup.js"?

My current project involves working with Electron, and it consists of three essential files. The first file is index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="styles ...

javascripthtmlcsselectron

I'm looking for a solution to pass a PHP object as a parameter in JavaScript within an HTML environment,

I am currently working on a project using Laravel 5. I have a table in my view, and I want to pass all the data values to a JavaScript function when a link is clicked. I have tried several methods but have been unsuccessful so far. @foreach ($basl_offic ...

javascriptphphtmllaravel-5

I'm trying to create a precise heart shape using paths in SVG within HTML5, but I can't seem to figure out where I'm going wrong

This is the heart I'm attempting to replicate: https://i.sstatic.net/RRIXS.png Here's the code snippet I've composed: <!DOCTYPE html/> <html> <head> <title>SVG Paths</title> </head> <body> ...

htmlsvg

Arrow Buttons for Expanding and Collapsing Sections on an

I'm attempting to include a downward arrow when the section is closed and an upper arrow when it's open - at the right side of each tab's head in the accordion. Here is the HTML I have implemented. It contains for-each loops. -- JavaScri ...

javascriptjqueryhtmlcss

Submitting multiple choices and various forms using PHP step-by-step guide

Looking for some guidance on optimizing my HTML/PHP form setup. Here's a breakdown of what I currently have: Form 1: Apple options: -big -medium -small Submit button Form 2: Orange options: -big -medium -small Submit button Ta ...

phpmysqlhtmlforms

Animation failing to be queued properly

Here is a snippet of code that moves a heading icon back and forth when you hover over the heading: jQuery('h1.heading').hover( function(){ $icon = jQuery('.heading-icon', this); if( ! $icon.is(':animated') ){ ...

javascriptjquerycssanimationjquery-animate

Bootstrap 4 Carousel: Displaying Multiple Frames Simultaneously and Sliding One at a Time

A different query was raised regarding the same issue (refer to the mentioned question) for Bootstrap 3, however, the suggested solutions are not compatible with Bootstrap 4. The illustration in this post effectively conveys what I am aiming for. Take a ...

jqueryhtmltwitter-bootstraptwitter-bootstrap-4bootstrap-4

The font face feature does not seem to be functioning properly in the IE browser

I'm facing an issue with font face in a jQuery popup. It seems to be working fine on Chrome and Firefox, but it's not rendering properly on IE browsers. Font Face Code in css ---------------------- @font-face { font-family: "pt-sans"; sr ...

cssinternet-explorerfont-face

Steps for generating a pop-up window for choosing a file from a local folder?

I'm looking to develop a popup window that displays all the files within a specific directory, for example, a /functions directory. The goal is to be able to select a file in that directory, click "ok", and store its information in variables without a ...

javascriptphpjqueryhtmlfile

The Datalist HTML does not function properly with line breaks

<input type="text" list="req" name="req" style="width:350px; height:70px;"><datalist id="req"> <option value=""><option> <?php while($getreq = $requirements->fetch_array()){ ?> <option><?=$req = preg_r ...

phphtmlsql

two clicks on the sc-player

I've encountered a problem of duplicated events when using sc-player.js. I'm trying to change an iframe when a li element is clicked, but the play/pause buttons also trigger the same li click event. Is there a way to control the play/pause funct ...

javascriptjqueryhtml

Make a gap between two buttons on my banner

How can I create a space of 0.5 cm between 2 buttons in my banner? I have been stuck on this for a while now. Do I need to modify my HTML blocks? https://i.sstatic.net/74yBh.png Below is the CSS code I am currently using: .myButtonRegister{ float: left ...

htmlcss

The lengthy form on the page is overlapping with the footer

As someone with limited CSS/HTML skills and a preference for backend development, I decided to use a pre-made template. The default login page looks like this: https://i.sstatic.net/XKBAZ.png In the register-page that I customized based on the login pa ...

htmlcsstwitter-bootstrapbootstrap-4reactstrap

CSS to target every second visible tr element using the :nth-child(2n)

My table has a unique appearance (shown below) thanks to the application of CSS nth-child(2n). tr:nth-child(2n) {background-color: #f0f3f5;} https://i.sstatic.net/1AnDi.png I made some elements hidden on the vID, ID, and MO_Sub tr. <tr style="displa ...

javascriptjqueryhtmlcss

Is your footer Jumbotron failing to stay at the bottom of the webpage?

I need help with creating a fixed footer using a jumbotron that contains a text area and a button. Here is the code snippet I currently have at the end of the <body>: <div class="jumbotron jumbotron-fluid position-fixed fixed-bottom"> < ...

csstwitter-bootstrapbootstrap-4

Triggering the document.location onclick event in PHP to start working

Just a quick query - I'm wondering how to make this work in PHP due to the quotations. echo "<table class='tablestyleorchideeaanbod' onClick='document.location = 'links.html''>"; ...

phphtmlonclickhref

Creating a design utilizing HTML columns with a set height and the ability to scroll horizontally

For my android project, I have a requirement to display a view (WebView) that dynamically loads content. The content will consist of <div class="content-item"> tags that are added by JavaScript to <div class="content-holder"> after the page has ...

javascripthtmlcsshorizontal-scrollingfixed-width