Looking for the answer? Keep on searching, as the solution isn't within the card article below

Thank you for taking the time to read this :)

I am trying to create a layout where articles are displayed one below the other in card style, but I am struggling to find a solution to my problem.

I have experimented with z-index, absolute and relative positioning, clear:both, float, etc., but so far, I haven't been able to achieve the desired result.

Here is an example image of what I am trying to achieve:

And here is the end result that I am aiming for:

I have looked into the code as well, but it seems too complex for me to figure out on my own.

Below is a snippet of the relevant HTML/CSS code:

[CSS code goes here]
<link href="[Bootstrap CSS link]" rel="stylesheet"/>

<div class="container-fluid suite">
<div class="row row-margin">
[HTML code for article cards]
</div>

</div>

I hope to achieve the layout where each card is stacked neatly below the other, similar to the example image provided. I would like to apply this layout to additional articles as shown in the reference link. Additionally, if possible, I would appreciate a responsive design solution for all the cards.

Thank you in advance for any assistance you can provide.

jqueryhtmlcssbootstrap-4

Answer №1

If Bootstrap is your go-to framework, consider structuring your code like this:
https://codepen.io/artursden/pen/dRWeBw

Simplify your HTML by organizing your content into 3 col-* elements and placing the cards within them:

<div class="col-md-6 col-lg-4 masonry-column">
    [cards for first column]
</div>

<div class="col-md-6 col-lg-4 masonry-column">
    [cards for second column]
</div>

<div class="col-md-6 col-lg-4 masonry-column">
    [cards for third column]
</div>

Keep in mind that this layout may not work seamlessly on all screen sizes due to potential overlap in columns.

An alternative approach could be using only 2 columns or trying a more elegant solution with CSS only:

Pure CSS Masonry Layout

This method utilizes CSS Multi-column Layout without relying on additional frameworks, ensuring compatibility with modern browsers.

For further insights, refer to Different Approaches for Creating a CSS Masonry Layout

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

What is the best method for updating inner html with AJAX using the results obtained from json_encode?

If you need further clarification on how this works, feel free to check out this fiddle for a demonstration. In my setup, I have multiple DIVs each with a unique ID such as desk_85 (the number changes accordingly). <div class="desk_box_ver id="desk_8 ...

javascriptphpjqueryajaxjson

What is the best way to ensure a consistent spacing between two flex items?

I am working on a project to enhance my knowledge by rebuilding Facebook. One of the new concepts I am learning is Flexbox. When you resize the login page of Facebook, you'll notice that the Navigation shrinks but the logo and login inputs remain sta ...

htmlcssflexbox

Issue with jQuery AJAX Event Handling

I'm currently struggling to solve a bug in an existing ASP.NET MVC website. One of the views includes a set of text boxes where users input data. Each text box triggers some JavaScript on the blur event to send changes back to the server. Specificall ...

javascriptjqueryajaxevents

What is the best way to anchor text to a specific area of an image when resizing?

I am struggling with maintaining consistent formatting for the center text on my splash/masthead/full page image, regardless of resizing. The image I am working with can be viewed [here]1 Originally, I attempted to incorporate the text into the backgrou ...

htmlcssimagebootstrap-4flexbox

Navigating redirects in HTML parsing with Python

I am currently experimenting with submitting multiple forms using a Python script and making use of the mechanized library. The purpose behind this is to set up a temporary API. The issue I am encountering is that upon form submission, a blank page appea ...

pythonhtmlhttpformsscreen-scraping

Div element is not being styled by the second CSS class

I'm facing an issue while trying to split my html code into separate php files. I can't seem to figure out the error in my index.php file. Here is a snippet from the file: .topheader { background-color: #404040; color: white; padding: 16 ...

htmlcss

Is it possible for JavaScript to be cached when it is located within the body tag of an HTML document?

Currently, I am exploring the topic of How to optimize HTML rendering speed, and came across the idea that scripts in the HEAD tag can be cached. I'm curious, is it possible to cache JavaScript in the BODY tag? If not, I wonder why YUI suggests placi ...

javascripthtmlcachingprogressive-enhancement

Fully conceal a DIV while the webpage is loading

Following the header, I've implemented a hidden div with a height transition that can be activated by a button. However, there seems to be an issue where the browser displays the content of the div while the page is loading and then hides it afterward ...

jqueryhtmlcss

Here are the steps to effectively incorporate CSS classes in a form using Laravel Collective 5.2 framework

Hi there, I am currently working on developing an application and find myself in need of implementing CSS classes to a form using Collective Laravel "5.2.*". The snippet of code that I have at the moment is as follows: {!! Form::model($user, array(&apos ...

htmlcsslaravel

Determine the quantity of posts currently in the Div

Hello, I am facing an issue where I am trying to determine the number of currently displayed posts in the content area. Even though there are 3 posts currently displayed, when I check the length, it is returning 1. $(document).on("click", ".load-more", fu ...

javascriptjqueryjquery-mobile

The drop down menu in React does not show the selected value when a function is called in the onChange() event

I am currently developing a filter that retrieves data from serviceNow based on the user's selection in the drop down menu. In my onChange() function, I have a call to a filtering function (handleFilter()) which filters the data according to the value ...

javascripthtmlreactjs

Align a card in the center of a carousel using Bootstrap

I'm looking to include a card within a carousel, but I'm struggling with getting the card element centered inside the carousel. Here's my current code: <div class="container"> <div class="row"> < ...

htmlcssbootstrap-4

Combining fixed pixel width with the max-width property in CSS

My container has a nested <p/> tag serving as the message text. The container is set to have a width of 200px, with a max-width of 600px to allow for expansion if the message length exceeds the initial 200px. However, despite these settings, the div ...

htmlcss

What is the best way to calculate the combined total of radio button values using jQuery or JavaScript?

I recently came across a tutorial on how to sum radio button values using JavaScript or jQuery, and I decided to implement it in my code. However, I encountered some issues as it didn't work as expected. My goal was to offer users the option to downlo ...

javascriptjquery

Can you explain the distinction between $ and $.fn?

I have a burning curiosity to understand the distinction between $ and $.fn. Could someone kindly provide me with a detailed explanation? Additionally, I am eager to learn more about the purpose of $.fn. ...

jquery

Tips for aligning Jqplot Bar Chart point labels vertically

Struggling to create a graph and seeking assistance after numerous failed attempts. My code is shared below: var plot2 = $.jqplot('distance_graph', data.distance, { // The "seriesDefaults" option is an options object that will ...

jqueryjqplot

Leveraging PHP to construct a TABLE based on JSON data

Recently, I delved into learning PHP and successfully retrieved the JSON data I needed. However, I hit a roadblock when attempting to construct a table using this data. Despite my trial-and-error approach, I find myself stuck at this point. The current st ...

phphtmljson

Cross-origin resource sharing policy preventing ajax request

Seeking help with my simple code for making an ajax request. Initially tried using a .txt file and encountered a CORS error. Switched to using a php file with header("Access-Control-Allow-Origin: *") but still facing issues. Searched through numerous SO po ...

phphtmlajaxcors

Displaying information stored in a database as notifications in the notification icon within the HTML/PHP header

Within my MySQL database, there exists a table named order_detail. This table is populated with values from my android app. I am looking to display the order_id as a notification in my admin panel, which is built using HTML/PHP. The attributes of the orde ...

phpandroidhtmlmysql

Ways to enable scrollbars within a container when the content inside a code tag exceeds the visible area

How do I add scrollbars to a code element if the line of syntax is longer than the view? I've attempted using overflow: scroll, but it's not functioning as expected. As shown in the image, using overflow causes the browser to scroll horizontally ...

htmlcsssass