Creating a responsive grid layout in Bootstrap with varying row heights

Seeking assistance on incorporating a Bootstrap row with the col-lg-3 class. The challenge lies in accommodating articles of varying text lengths within a div with uneven heights. Present output can be viewed here, while desired output can be seen here. Below is the sample code snippet:

<div class="row">
    <div class="col-lg-3" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
    <div class="col-lg-3" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
    <div class="col-lg-3" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
    <div class="col-lg-3" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>  

    <div class="col-lg-3" style="background-color: #173e43"><p style="height: 44px">5</p></div>
    <div class="col-lg-3" style="background-color: #b56969"><p style="height: 70px">6</p></div>
    <div class="col-lg-3" style="background-color: #daad86"><p style="height: 20px">7</p></div>
    <div class="col-lg-3" style="background-color: #5a5c51"><p style="height: 35px">8</p></div> 
</div>

Note: The numeric values such as 1, 2, 3, etc., are retrieved from a MySQL database where the height corresponds to the number of rows of text. Here's a snippet of PHP code used for this purpose:

foreach ($value as $add) {
        echo "<div class='col-md-3'><p>";
        echo $add->item;
        echo "</p></div>";
}
?>
javascriptcsshtmltwitter-bootstrap

Answer №1

Maybe I've tweaked your initial code a bit. I made changes all over the place in hopes of assisting you.

  1. Insert a customized stylesheet inside the head tag:

<style>
    .col-md-3{padding:0px;} // default: 15px -> left and right.
</style>

  1. Here is the modified code:

<div class="container">
            <div class="col-md-12">
                <div class="col-md-3">
                    <div class="col-md-12" style="background-color: #c5d5cb;height: 150px;">
                        1
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-md-12" style="background-color: #173e43;height: 44px; color:white;">
                        5
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-md-12" style="background-color: #9fa8a3;height: 200px;">
                        2
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-md-12" style="background-color: #b56969;height: 70px;">
                        6
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-md-12" style="background-color: #e3e0cf;height: 50px;">
                        3
                    </div>
                    <div class="col-md-12" style="background-color: #daad86;height: 20px;">
                        7
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-md-12" style="background-color: #b3c2bf;height: 60px;">
                        4
                    </div>
                    <div class="col-md-12" style="background-color: #5a5c51;height: 35px;">
                        8
                    </div>
                </div>
            </div>
        </div>

Since I'm unsure about the version of your bootstrap, I utilized v3.1.1 for the clearfix ... feel free to adjust this according to your version.

Answer №2

You're definitely heading in the right direction. To make this work, make sure to use col-md-3 like so:

<div class="row">
<div class="col-md-3">
    <p>1</p>
    <p>5</p>
</div>
<div class="col-md-3">
   <p>2</p>
   <p>6</p>
</div>
<div class="col-md-3">
   <p>3</p>
   <p>7</p>
</div>
<div class="col-md-3">
   <p>4</p>
   <p>8</p>
</div>
</div>

Answer №3

Perhaps you could give this a try

<div class="row">
  <div class="col-lg-5">
   <div id="1"  ></div>
   <div id="5"  ></div>
  </div>
<div class="col-lg-5">
   <div id="2"  ></div>
   <div id="6"  ></div>
  </div>
<div class="col-lg-5">
   <div id="3"  ></div>
   <div id="7"  ></div>
  </div>
<div class="col-lg-5">
   <div id="4"  ></div>
   <div id="8"  ></div>
  </div>
</div>

I hope this solution proves helpful to you.

Answer №4

If you start by using columns labeled col-lg-3, you can then insert your content blocks within each column to achieve the desired layout.

Here is the HTML structure:

<div class="container">
  <div class="row">
    <div class="col-lg-3 grid-row">
      <div class="left-block" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
      <div class="left-block" style="background-color: #173e43"><p style="height: 44px">5</p></div>
    </div>
    <div class="col-lg-3 grid-row">
      <div class="left-block" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
      <div class="left-block" style="background-color: #b56969"><p style="height: 70px">6</p></div>
    </div>
    <div class="col-lg-3 grid-row">
      <div class="left-block" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
      <div class="left-block" style="background-color: #daad86"><p style="height: 20px">7</p></div>
    </div>
    <div class="col-lg-3 grid-row">
      <div class="left-block" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
      <div class="left-block" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
    </div>
  </div>
</div>

For styling, use the following CSS:

.grid-row{
  margin-left: -15px;
  margin-right: -15px;
}
.left-block{
  float: left;
  width: 100%;
}

View the example on Jsfiddle for a visual representation: https://jsfiddle.net/debraj/6dufsc4u/1/

I hope this explanation assists you in achieving your desired 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

Issue encountered when trying to retrieve a database variable from a mapReduce operation in MongoDB

Greetings! I am currently developing an application that utilizes a MongoDB database. Within this database, there exists a user collection where all user data is stored. The structure of a document in this collection is as follows: { "_id" : ObjectId( ...

javascriptmongodbmapreduceruntime-error

Switching background images dynamically depending on the screen size: CSS and HTML5 Gallery

Here's the issue: the HTML5 page is responsive, but the background images are not changing with the screen size. The current code looks like this: <div id="home-gallery" class="gallery-container fullscreen"> <section id="home-welcome" class= ...

javascripthtmlcss

Creating Recursive Portals with three.js

I am working on developing a simple portal game using three.js, but I am facing a challenge with creating recursive portals. One solution I have considered is placing the camera on one portal and rendering its image as a texture on the other portal. While ...

javascriptthree.js

Unable to insert string into evaluated array

How do I use the eval definition to push a string into an array? jsn_obj=[{"row":1,"integerz":1,"stringz":"a"},{"row":2,"integerz":2,"stringz":"b"}]; var getz = jsn_obj; for (var i = 0, length = getz.length; i < length; i++) { console.l ...

javascriptjquery

With the power of jQuery, easily target and retrieve all label elements within a specified

Currently, I'm working on developing a function that should be executed whenever any of the labels for a particular group of radio buttons are clicked. So, I need a way to reference all the labels in this radio button group. In my search for a soluti ...

javascriptjqueryselector

Adjust the position of the header division based on the content division

Looking to revamp my website design. I have two main divs - "header" and "content". The goal is to set the width property to 80% and center both of them. However, I'm facing some challenges with achieving this setup. Additionally, I need assistance wi ...

asp.netcsshtmlpositionpositioning

How can Checkbox body styles be altered based on its input state in Mantine?

I am utilizing Mantine and need to create a custom styled container for a Checkbox input. This particular checkbox will alter its body styles based on the input state (checked or not checked). To achieve this, I must determine the pseudo class state of th ...

javascriptcssreactjsmantine

How should v-select, item-text, and item-value be correctly utilized?

When I make an API call, the response is returned. https://i.sstatic.net/AsFzu.png from another perspective. https://i.sstatic.net/T4vqa.png I store the result of the API call in a variable called result = [];. To create a dropdown list, I use v-select ...

javascriptvue.jsvuetify.js

XSLT can be used to specify an HTML id attribute without surrounding quotes, like in the example `<div id=myId

In the HTML output file I am creating, I need to generate a div element with an id attribute. The value of the attribute should not be enclosed in quotes, similar to this example: <div id=myID>...</div>. However, everything works fine when us ...

htmlxmlxsltsaxonoxygenxml

Problems with Displaying Facebook Ads on Mobile Web

Currently, I am incorporating Facebook Audience Network (MobileWeb-beta) for advertisements on my mobile website. However, the 320x50 HTML source code is not displaying the ad across the width of the mobile screen as intended; instead, it appears smaller ( ...

htmlfacebookfacebook-ads-apiiphone-web-appfacebook-audience-network

Discover the secret to accessing restaurant menus with Foursquare by utilizing file_get_contents on the designated menu URL

I am encountering an issue with retrieving all the menus for a specific venue ID using the Foursquare API. As a workaround, I have opted to fetch menu details by utilizing 'file_get_contents' from the following menu URL: Snippet of Code : $menu ...

phphtmlxpathdomdocument

Unable to resolve @font-face issue despite exhausting all possible solutions

Struggling with the @font-face code and unable to get my font file recognized. I've attempted various path changes, created new folders, renamed existing ones, even moved the font file to the root directory, but no luck. Testing in both Firefox and ...

cssfontsfont-faceembedded-fonts

The block is not responding to hovering as expected

I'm currently attempting to implement a hover effect for the entire anchor element, but unfortunately it's not functioning as expected. The drop-down menu disappears as soon as the mouse moves away from the text: Click here to view the test site ...

csshover

Tips for transferring information from Angular 6 to Node.js

Having recently delved into Angular 6 for the first time, I find myself tasked with sending data to a Node.js server. The code snippet below illustrates my approach within an Angular function: import { Component, OnInit } from '@angular/core'; ...

htmlnode.jsangularangular6

When attempting to unzip a file in Node.js by passing a string, an error occurs stating that the path

I am attempting to create a ZIP file containing the names of files retrieved from a database. Below is the code I am using: var pathforZip = ''; for(let k=0;k<filenameArray.length;k++){ if(resultset[k].length > 0){ pathforZip + ...

javascriptnode.js

How to right-align navigation bar text using Bootstrap 4

I'm attempting to replicate Google's layout but I'm having trouble aligning the list elements to the right of the page using Bootstrap 4. I've included a link to the code I am working on, and even tried adding the classes mr-auto and ju ...

cssbootstrap-4

I am encountering an issue with my function where I aim to prevent the creation of a node using duplicate coordinates

Trying to avoid creating a node with existing coordinates, I implemented a check in my code. The check is supposed to determine if there are any nodes with the same coordinates already present. However, it seems that the check is not working as expected an ...

javascriptarraysfor-loop

Is there a way to specifically transmit ComponentArt CallbackEventArgs from a JavaScript function during a callback?

One of the challenges I'm facing involves implementing a callback in my ComponentArt CallBack control using javascript when the dropdown list is changed. I specifically want to pass both the control and the associated ComponentArt.Web.UI.CallBackEvent ...

javascriptasp.netcallbackcomponentart

Update the ngModel value once input validation has been successfully validated

My input is defined as shown below <input id="xInputControl" name="xInputControl" type="text" xInput class="form-control" [(ngModel)]="x" #validated="ng ...

javascriptangularjsvalidation

"Ensure that the data in the div is being updated accurately via AJAX in ASP.NET MVC

I'm currently using a div element to display data on page load through AJAX calls. $(document).ready(function () { email_update(); }); function email_update() { $.ajax({ url: '@Url.Action("EmailsList", "Questions")', ...

javascriptjquerycssasp.netajax