Utilize Bootstrap columns to maximize vertical space efficiency

I recently came across a bootstrap layout like this:

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

In this setup, there is a single .row that contains 8 .col-lg-3 divs. However, I noticed that there is excessive vertical whitespace present, which not only looks undesirable but also makes the layout appear messy. (The horizontal whitespace/margin is necessary and cannot be changed due to the bootstrap design)

My question is, how can I adjust the positioning of these boxes so that they float in a way that occupies the minimum amount of vertical space while still preserving the column structure? (The order of boxes is unimportant)

Initially, I attempted to use Masonry for this task, but it didn't handle the bootstrap floating of boxes effectively and ended up disrupting my entire layout.

Is there a way to achieve this without resorting to JavaScript? It's important to note that other rows may have boxes with varying heights, and the number of boxes per row isn't always exactly 8.

All I want is to optimize this layout, making it more compact and utilizing all available space...

htmlcsstwitter-bootstrap

Answer №1

Is it possible to float the boxes in a way that minimizes vertical space while still preserving the columns? (The order of the boxes is not important)

If you're using Bootstrap, the col-xx classes may conflict with the styles defined in the bootstrap css file. To achieve your desired layout, consider breaking away from Bootstrap styling for this specific scenario and element(s). You can continue using Bootstrap styles for other elements.

To achieve this layout, CSS columns are necessary. Make sure to include relevant media queries for responsiveness.

Keep your markup unchanged but remove the col-x classes to avoid applying Bootstrap styles.

<div class="container-fluid">
    <div id="col" class="row">
        <div>Lorem Ipsum</div>
        ...
    </div>
</div>

You can define custom styles for child div elements as follows:

div#col > div { margin: 8px; padding: 6px; }
div#col > div:first-child { margin-top: 0px; } /* remove top margin from first child */

Implement media queries for the parent container to adjust the number of columns based on screen width, for example:

@media screen and (min-width:761px) {
    div#col { column-count: 4; column-gap: 0; padding: 8px; }
}
@media screen and (min-width:760px) {
    div#col { column-count: 3; column-gap: 0; padding: 8px; }
}
...

Complete Code Snippet:

div#col > div {
    margin: 8px; padding: 6px; background-color: #efefef;
    -webkit-column-break-inside: avoid;
}
div#col > div:first-child { margin-top: 0px; }

@media screen and (min-width:761px) {
    div#col { 
        -webkit-column-count: 4; -webkit-column-gap: 0; padding: 8px; 
        -moz-column-count: 4; -moz-column-gap: 0; 
        column-count: 4; column-gap: 0; 
    }
}
@media screen and (max-width:760px) {
    div#col { 
        -webkit-column-count: 3; -webkit-column-gap: 0; padding: 8px; 
        -moz-column-count: 3; -moz-column-gap: 0; 
        column-count: 3; column-gap: 0; 
    }
}
@media screen and (max-width:480px) {
    div#col { 
        -webkit-column-count: 2; -webkit-column-gap: 0; padding: 8px; 
        -moz-column-count: 2; -moz-column-gap: 0; 
        column-count: 2; column-gap: 0; 
    }
}
@media screen and (max-width:360px) {
    div#col { 
        -webkit-column-count: 1; -webkit-column-gap: 0; padding: 8px; 
        -moz-column-count: 1; -moz-column-gap: 0; 
        column-count: 1; column-gap: 0; 
    }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div id="col" class="row">
        <div>Lorem Ipsum</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div>Lorem Ipsum</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
</div>

Live Example: http://jsfiddle.net/abhitalks/ar29jfqt/2/

Test the layout by resizing the window in the provided fiddle to observe how the columns adjust themselves accordingly.

Answer №2

Take a look at this amazing example of CSS-only design, no Bootstrap involved:

Answer №3

Check out this example for a structured layout using Bootstrap:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Layout Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <div class="row">
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:100px;"></div>
        <div class="col-md-12" style="border:1px solid #777777;height:450px;"></div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:100px;"></div>
        <div class="col-md-12" style="border:1px solid #777777;height:500px;"></div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:200px;"></div>
        <div class="col-md-12" style="border:1px solid #777777;height:200px;"></div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:400px;"></div>
        <div class="col-md-12" style="border:1px solid #777777;height:100px;"></div>
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

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

Dismiss the pop-up box by clicking outside its borders

I have created a unique homepage featuring pop-up boxes with login fields. The background dims when a pop-up appears, and the user should be able to close the pop-up by clicking outside the box boundaries. Although the function closeOverlay works when the ...

javascripthtml

React code displaying misalignment between label and input

Can you help me align my URL and https:// on the same margin? https://i.sstatic.net/hxkkC.png <div className="card"> <div className="card-body"> <div className="form-group col-12"> <label cla ...

javascriptcssreactjs

Decoupling the Top Navigation Bar from the Side Navigation Bar

I currently have a top navigation bar with some menus and a side navigation bar with additional menus. I have applied styling to the vertical navigation bar, but it seems to be affecting all the navigation bars, resulting in an output as shown in the image ...

htmlcsstwitter-bootstrap

When trying to load a php page2 into page1 via ajax, the Javascript code fails to execute

Currently, I am in the process of learning PHP and JavaScript. I have encountered a particular issue with a webpage setup. Let's say I have a page called page1 which consists of two input fields and a button labeled 'Go'. Upon clicking the & ...

javascriptphpjqueryhtmlajax

What is the best way to switch the direction of the arrows based on the sorting order?

Is there a way to dynamically change the direction of arrows based on sorting, similar to the example shown here? sortingPipe.ts: import { SprBitType } from '../spr-bit-type/sprBitType'; import { Pipe, PipeTransform } from '@angular/core& ...

htmlcssangulartypescript

Problem encountered with a selection menu

I'm experiencing some trouble with the dropdown menu. Whenever I try to move the mouse to access the dropdown menu, it seems unresponsive. I attempted adjusting the padding on a line of code but ended up moving the entire line instead. Here is the cod ...

javascriptjquerycss

Tracking progress with a dynamic bar from the beginning to the end

Struggling to develop a progress bar that corresponds to project start dates and end dates. With a roster of 100 projects, spanning from mid-2017 to future launches, the aim is to depict progress between 2018, 2019, and 2020. If a project commenced in 2017 ...

htmlangularjsprogress-barbootstrap-4

Use JavaScript to enclose elements that are siblings within a DIV

Can you help me convert the elements with class "a" into a div using JavaScript, while maintaining their order within their sibling elements? I've been struggling with the code below and would appreciate any assistance. const elementParent= documen ...

javascripthtmldom

Retrieve the identifiers of various HTML elements and store them in an array

Within a div, there are multiple objects. I am trying to retrieve the IDs of all elements based on their class, knowing that the number of elements may vary. So far, my attempt has been: arr = $(".listitem #checkBox").hasClass('checkedItem').att ...

javascriptjqueryhtml

The functionality of AJAX is triggered only on the second click

On my index.html page, I'm attempting to implement a basic AJAX functionality. When clicking on an anchor tag, the text will be sent to a PHP page called data.php, which will then display the clicked page. The code is functional, but there seems to be ...

phpjqueryhtmlajax

Is it possible to make a div resize to fit its container?

I have a square block measuring 100*100px. The container block it is within can be resized. I need the inner block to adjust its size dynamically so that it always fits inside the parent container without overflow and maintains its square shape. Important ...

htmlcss

Restricting the number of lines within a paragraph in Angular 2

Is there a method to limit the number of lines in a <p> tag and add an ellipsis (...) at the end? Using character count for truncation doesn't work well as the width of the element varies according to device screen size. ...

javascripthtmlcssangular

Do I have to include the sizes attribute when using w-descriptors in srcset?

After reading several articles discussing the use of srcset for device-pixel-density adjustments and art direction, I have come to a few conclusions: The State of Responsive Images in 2015 by Paddi Macdonnell srcset Part 2: The W descriptor and sizes att ...

cssresponsive-designsrcsetresponsive-images

Event in Bootstrap modal fails to activate

I've been attempting to link some code to execute when my modal is opened. Despite successfully opening the modal, I am puzzled as to why my event fails to trigger. Below is the structure of my modal: <div id="details" class="modal fade" style="d ...

javascriptjquerytwitter-bootstrapbootstrap-modal

``Considering the compatibility issues with position: absolute in Internet Explorer 8

Here's an example snippet of code in HTML: <form> <input type="file" id="iefile"> </form> <form> <input type="file" id="iefile"> </form> This is how it looks with some CSS styling: form{ position:rela ...

htmlcssinternet-explorer-8

The pre tag does not have any effect when added after the onload event

I have been experimenting with a jQuery plugin for drawing arrows, detailed in this article. When using the plugin, this code is transformed: <pre class="arrows-and-boxes"> (Src) > (Target) </pre> into this format: Src --> Target The ...

javascriptjquerycsspre

Creating button groups with a centered .btn using Bootstrap 4

My button group has a link in the middle, so it needs to be an a tag. I could change it to a button and use JavaScript for navigation, but I'd prefer not to. Here is the code: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bo ...

htmlcsstwitter-bootstrapbootstrap-4

Adjust the ARIA value of a Bootstrap progress bar within a VueJS component on the fly

During the development of my website using VueJS and Bootstrap, I made the decision to utilize Vanilla Bootstrap instead of a specific VueJS framework like VueBootstrap or VueStrap. Currently, I am facing an issue while building a custom component that wr ...

twitter-bootstrapvue.js

Is there a way to use CSS to prevent a user from being able to click on a table?

My CSS table appears standard: <table class="form grid"> <thead> <tr> <th>EId</th> <th>Number</th> ...

htmlcss

Display a dialog box in jQuery UI 1.7 autocomplete when an item is selected

After implementing an autocomplete widget, I noticed that a dialog appears when an item is selected. However, I am struggling to get a specific field in the dialog to receive focus upon opening. Here is what I have attempted so far: //HTML <form actio ...

javascriptjqueryhtmljquery-ui