"Utilizing Bootstrap's columns for dynamic layouts with varying paragraph heights

Currently utilizing Bootstrap 3.3.7 and facing the challenge of organizing 17 paragraphs with varying heights into a layout with three columns (col-md-4) for large screens, two columns (col-sm-6) for medium screens, or one column (col-xs-12) for small screens. The objective is to achieve a consistent height for the columns, regardless of whether there are three or two of them. This flexible layout is essential due to the dynamic nature of the paragraph content.

I made an attempt using the following code:

<p class="col-md-4 col-sm-6 col-xs-12">...</p>

Unfortunately, this approach did not provide the desired outcome since the paragraphs have varying heights. Is there a solution within Bootstrap's capabilities to allow the paragraphs to fill the available space without leaving gaps? Alternatively, would combining Bootstrap with Sass offer a more effective way to address this issue?

Answer №1

Resolved the issue by utilizing CSS media queries and eliminating the Bootstrap classes.

/* Customized column layout based on screen size */
@media (min-width: 480px) {
  .faqs {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

@media (min-width: 768px) {
  .faqs {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

@media (min-width: 992px) {
  .faqs {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

@media (min-width: 1200px) {
  .faqs {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}

article {
  break-inside: avoid-column; // Ensures articles stay together within columns
}

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

CSS may occasionally fail to load correctly when the page is first opened

At times, I have noticed that the header of my website does not display correctly when the page initially loads. Issue: In the screenshot provided, you can see that the headings appear within the black horizontal line. image link here http://techboy.co. ...

Having issues with the functionality of Bootstrap 4 popover?

In my Spring MVC web project, a Bootstrap popover appears when the help icon is clicked. However, on the first click, the popover opens and moves away from the icon. After closing it and clicking again, the popover correctly positions itself. When I chan ...

Is there a way to adjust the opacity of a background image within a div?

I have a lineup of elements which I showcase in a grid format, here's how it appears: https://i.stack.imgur.com/JLCei.png Each element represents a part. The small pictures are essentially background-images that I dynamically set within my html. Up ...

Dividing an HTML file and storing sections with the help of LangChain

Exploring LangChain for the first time, I find myself faced with a challenge. I have a collection of 100-150 HTML files stored locally that need to be uploaded to a server for NLP model training. Each file has a limit of 20K characters, requiring me to spl ...

What is the best way to connect two web workers in HTML5?

I've been delving into the web workers documentation, but I'm coming up short on finding an API that facilitates direct communication between two web workers. The scenario I have is needing to establish a direct line of communication from worker1 ...

Steps for creating a resizable and automatically hiding side menu

I am working on a side menu that can be resized, and I want it to collapse (set to zero width) when it is empty. I have considered implementing one of these features individually, but I'm not sure how to make both work together. Is there a way to ad ...

iOS image suddenly expands to full size after applying keyframe scale transformation

Encountering a peculiar iOS glitch while implementing CSS animations for moving shapes on a webpage. The issue arises when the shapes, initially displayed at full size, gradually shrink and fade out during animation. However, towards the end of the anima ...

Android Font Icon Spacing Issue with IconFont (Fontastic)

After using Fontastic.me to create an iconfont, I encountered an issue specifically with the native browser of Android 4.2.2 and 4.3 (such as modern Samsung tablets). In these browsers, the characters in the entire font appear to have no width. This proble ...

Sending emails through a basic HTML/PHP form is incredibly time-consuming

Seeking assistance with optimizing my email form that utilizes the POST function alongside a PHP mailto() feature. The process of sending the form takes significantly longer than expected. Any suggestions or guidance would be greatly appreciated. Here&apo ...

Creating interactive tabs within the HTML document with AngularJS

Trying to customize the tab layout on my HTML page and I have a code similar to this: <form name="requestForm"> <div class="form-group col-md-6 md-padding"> <div class="text-primary"> <h3>Create Request</h3> ...

Utilizing CSS to Select Specific Sections

I'm curious about how to target a section element with a specific id like #dress in CSS3. Here is my code snippet: <section id="dress"> <p>Lorem Ipsum..................................of Lorem Ipsum.<> </section> Here's ...

What steps can be taken to prevent double division within a loop?

Appreciate your assistance. This is the structure of my code: var CatItems = ""; for(var x=0; x < data.PRODUCTS.length; x++) { if (x % 3 === 0) CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' ...

Navigate to a specific section by selecting it from the list

Is there a way to automatically scroll to the corresponding .cinematography_box when I click on an item in the sidebar list? Here is the markup I am working with: For example, if I click on the first item in the list, it should scroll to the first .cinema ...

Assistance needed with troubleshooting an HTML and CSS table error

When checking the error console in Opera, I noticed an error related to this line of code: filter:alpha(opacity=99); opacity=0.99; MozOpacity=0.99; I am currently using it in this manner. Any idea what might be causing the issue? ...

Is there a way for me to view the content through a link?

Is it possible to retrieve the link content using JavaScript and jQuery? <a href='http://example.com' id='my id'>content</a> ...

In order to properly set up Require JS, you will need to configure the JS settings

Is there a way to specify the path from any property inside the require JS config section? We are trying to pass a property inside the config like so: The issue at hand: var SomePathFromPropertyFile = "CDN lib path"; require.config({ waitSeconds: 500 ...

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

I am facing an issue while attempting to create a basic CSS transition using JavaScript. The goal is for the start button to trigger the movement of an element, based on the duration of the keyframe animation. Then, clicking the end button should make the ...

Unlock the power of Angular pipes in window.open with URL parameters!

<div class="member-img" onclick="window.open(childEpisode.File_URL | fullPath)"> </div> The fullPath function concatenates the domain part to the relative URL stored in file_URL. However, there seems to be an issue as it i ...

Issue with Semantic UI causing <select> elements to not update properly

We're facing an issue with a popup that contains a form consisting of several <select> tags. Sometimes, these <select> elements appear on the page without any specified <option> tags and are filled in later on. Some already have pred ...

Tips for utilizing the div tag in a similar manner as a table

How can I position the div tag to resemble a table in the correct order? <html> <head><title> .</title> <link rel="stylesheet" type="text/css" href="style/main.css"/> <script type="text/javascript" src="script/ajax.js"& ...