(Bootstrap) Implementing inline block properties to ensure consistent column display

I am currently working on improving the column layout of a website. However, I am facing an issue where there are large blank spaces if the text lengths or image sizes vary. To test out the theme, I have included some sample products in the image below.

https://i.sstatic.net/Ea9yx.jpg

I am struggling to align the items properly using the following HTML loop for fetching products:

<div class="container-fluid lg-container">
<div class="row">
<div class="container-fluid">
{bundle = filter(pages, 'product') }
            <div class="row row-body row-margin-bottom no-padding">
            { foreach item in bundle }

                <div class="col-xs-12 col-sm-6 col-md-4" data-category="view">
                <div class="lib-panel">
                        <div class="lib-header">
                            <a href="#">{{ item.title }}</a>
                        </div>
                    <div class="row xsm-catpad ">
                        <a href="{ item.url }" >
                        <img src="http://xpenology.org/wp-content/themes/qaengine/img/default-thumbnail.jpg" class="lib-img-show img-responsive" />
                        </a>
                            <div class="lib-desc">
                                <p{ item.content }...</p>
                            </div>
                       <div class="col-xs-12">
                            <a href="{{ item.url }}" title="{{ item.meta.title }}"><button class="btn christmas">Check it out</button></a>
                       </div>
                        </div>
                </div>
            </div>
    {% endfor %}
    </div>
    </div>
    </section>
      </div><!-- /.row -->
    </div>

Below is some CSS code that I have used, which might need some tweaking as it's a lengthy file:

.row-body 
{
    padding: 0;
    margin: 0px;
}
.lib-panel {
    margin-bottom: 20Px;
}
.lib-panel img {
    width: auto;
    background-color: transparent;
}

#md-img{
    width: auto;
}
.lib-panel .row,
.lib-panel .col-md-6 .col-sm-6 .col-sm-4 .col-md-4 .col-sm-3 .col-md-3{
    padding: 0;
}

.lib-panel .lib-wide-row {
    padding: 0 0 0 0;
}

.lib-panel .lib-header {
    text-align: center;
    font-size: 20px;
    padding: 10px 5px 0 5px;
}
@media (max-width: 768px) and (min-width: 300px) {
    .lib-panel .lib-header {
    font-size: 40px;
    }
    .row .row .xsm-catpad{
    width: 80%;
    margin: auto;
    }
body {padding-bottom: 125px;}
}

.lib-panel .lib-row.lib-mini-header {
    text-align: justify;
    font-size: 16px;
    padding: 5px 0px 0 0px;
}
.lib-panel .lib-row.lib-ad-header {
    text-align: left;
    font-size: 16px;
    padding: 5px 0px 0 0px;
}

.lib-panel .lib-row.lib-desc {
    position: relative;
    height: 100%;
    display: block;
    font-size: 12px;
}
.lib-desc p{
     font-size: 14px;
    text-align: justify;
}

.lib-panel .lib-wide-row.lib-wide-desc {
    height: 100%;
    font-size: 12px;
}
.lib-panel .lib-row.lib-desc a{
    position: absolute;
    width: 100%;
    bottom: 10px;
    left: 20px;
}

.row .row .xsm-catpad{
width: 80%;
margin: auto;
}

Answer №1

Finally, my problem was solved by simply including this

.row {
  display: flex;
  flex-wrap: wrap;
}

It worked like magic and fixed everything instantly.

Answer №2

This issue has crossed my path numerous times, and I typically resolve it by utilizing flex to layout the rows and columns. For example:

<div class="row flex-layout">
   <div class="col-sm-6">
     // content here
  </div>
  <div class="col-sm-6">
     // additional content here
   </div>
</div>

CSS:

.flex-layout, .flex-layout > col-sm-6{
display: flex;
}

Answer №3

There is a dedicated class in Bootstrap for this specific purpose. Simply include

<div class="clearfix"></div>
after each set of column rows.

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 way to update a specific section of my website by modifying the URL while keeping the menus fixed and the site functioning smoothly?

I am in desperate need of assistance as I search for a solution. Currently, I am working on a project involving music within a web browser or application. My goal is to utilize HTML, PHP, JS, and CSS to create this project. If I start with a website, I p ...

What is the best way to show a dropdown menu on the right side of the

I developed a demo that functions properly on both desktop and mobile devices. However, I am facing an issue where the dropdown menu is not displayed when switching to the mobile version. Here is my code snippet: http://codepen.io/anon/pen/OyNLqa ...

Having trouble creating multiple PDFs with mPDF without having to store them on the server

I am creating several PDF files in a loop using the mPDF library. Here is a snippet of my code: for($i=0;$i<=3;$i++) { $mpdf = new mPDF(); $stylesheet = file_get_contents('style.css'); $mpdf->WriteHTML($stylesheet,1); $mpd ...

Is there a way to clear out input values in a form after some errors are caught and the rest of the data is saved upon resubmission?

Currently, I am in the process of validating my HTML contact form using PHP. To test its functionality, I have tried submitting the form with no data and then attempted again with partial data. While submitting partial data, I noticed that the correct fiel ...

Animations in Angular fail to operate within mat-tabs after switching back when custom components are being utilized

I am facing a similar issue as Olafvv with my angular 16 project. The problem occurs in a mat-tab-group where the :enter animations do not work when navigating away from a tab and then returning to it. However, in my case, the issue lies within a custom su ...

using percentage and float to enforce overflow-x

I have a small structure of list items inside a container and I am trying to display horizontal overflow instead of vertical overflow. However, I am having trouble achieving this, possibly due to the properties like float and percentage that I am using. I ...

Stop the web browser from storing the value of the input control in its cache

Many web browsers have a feature that saves the information you enter into certain fields so you don't have to type it again. While this can be convenient for most cases, I am faced with a situation where users must input a unique reference for a new ...

Sending user input from a Laravel modal form to a controller as a parameter

I have a button that triggers a modal form where the user can update their group name. I'm trying to pass the ID into the form using {!! Form::open(['action' => [ 'ContactsController@update', id]]) !!}. I attempted to do this si ...

Enhance your message inbox experience with jQuery/Javascript features inspired by Gmail, including the ability to select all messages with a checkbox and

It is truly satisfying to be here working on developing a private message inbox for my website, especially after successfully implementing a complete user signup/login and activation system. A few months ago, I never believed I had enough patience to grasp ...

Steps for looping through an array and placing every set of three items into a fresh Div element

Looking to display an array of 100 mobile phone objects, with each group of 3 items in a new div with the class name row. Struggling with creating logic for displaying only 3 items per div using a for-of loop. Here's the desired outcome (JSX): < ...

Struggling with getting the tabbed slider carousel to function properly in Bootstrap 4?

I attempted to incorporate this code snippet: The only modification I made was using these imports: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootst ...

Tips for reducing the JavaScript file size outputted by a liquid template generator

Currently, I am working on enhancing the performance of my Shopify website and GoogleSpeed Insights is suggesting that I minify css and js files. However, the recommended files are all created by the liquid template generator, making it challenging to uti ...

I'm struggling to concentrate and unable to type in the email field

Today while working on a website, I encountered something strange. In the footer section of the site, there is a quick contact form. However, I noticed that in Firefox, I am unable to focus on the email field. Surprisingly, this issue does not occur in Chr ...

Why does my array seem to update only once in the view?

I am currently working on a project that aims to visually represent sorting algorithms, but I have encountered an issue. In order to effectively visualize the sorting process of an algorithm, it is crucial to display every change in the array as the proc ...

Achieve horizontal bar movement by utilizing google.visualization.DataTable in a left-to-right motion

I am exploring the possibility of reversing the direction of a chart(bar) using google.visualization.DataTable. In the current setup, the bar progresses from left to right, but I wish for it to move from right to left instead. Below is what I have attempte ...

Designing scroll boxes that are not continuous and tracking the time spent in each section

I'm seeking assistance with a unique challenge involving the creation of scroll boxes for use in a Qualtrics survey and tracking the time spent viewing different sections of text within them. Specifically, I aim to design a scroll box featuring two p ...

Create a custom div class specifically designed for an image button

Apologies if my title is a bit misleading, I struggled to find the right phrasing. Currently, I have images linked to various social networks using href. For instance, clicking on the facebook icon directs to my Facebook page. The layout looks like this: ...

"Troubleshooting: Fixing the issue with jQuery datepicker not

After implementing the jQuery Datepicker on a field, I noticed that even though assigning a value to the field shows in Chrome's developer tools... https://i.sstatic.net/We7Ua.png Unfortunately, the assigned value does not show on the front end. I ...

How can I select the specific element within a class when a particular checkbox is selected?

Having a dynamically generated list of elements, each structured like this: <div class="under-item-description"> <span class="under-compare-price">100</span><span class="under-price">50</span> <span class="under-compar ...

Customizing event colors in Full Calendar

My interactive calendar is created using : $('#calendar').fullCalendar({ height: 300, //............. events: jsonData, month: firstMonth }) I am looking to dynamically change the color of an event based on certain conditions ...