Tips for creating a custom vertical grid layout in Bootstrap with specific item placements

I've been on a quest to find a method to display a bootstrap column vertically instead of horizontally.

I am adamant about not using masonry or any other external library. My goal is to have "Card 2" appear beneath "Card 1" on medium to small screens. Here is what my code currently looks like:

<div class="container">
        <div class="row no-gutters">
            <div class="col-lg-6">
                <!-- Card 1 -->
                <div class="card" style="height: 500px">
                    <div class="card-header">Card 1</div>
                    <div class="card-body">
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <!-- Card 2 -->
                <div class="card" style="height: 430px">
                    <div class="card-header">Card 2</div>
                    <div class="card-body">
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
            </div>
            (remaining cards)
        </div>

Here is a preview of how my content currently appears: https://i.sstatic.net/0NhZM.png

I am seeking to eliminate any spaces between the cards (top or bottom).

I attempted placing two col-6 and adding the items normally, which displayed the items in columns:

<div class="container">
        <div class="row no-gutters">
            <div class="col-lg-6">
                <!-- Card 1 -->

                <!-- Card 2 -->

                <!-- Card 3 -->

                <!-- Card 4 -->

            </div>
            <div class="col-lg-6">
                <!-- Card 5 -->

                <!-- Card 6 -->

                <!-- Card 7 -->

            </div>
        </div>
    </div>

In the above markup, I would like card 5 to appear after card 1 on medium to small screens.

NOTE: I've spent hours scouring Google in search of a simple, direct solution to achieve this without relying on masonry or similar plugins.

csstwitter-bootstrapbootstrap-4

Answer №1

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.row_ {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  padding: 0 4px;
}

.column_ {
  -ms-flex: 33.3%; 
  flex: 33.3%;
  /* width: 33.3%; */
}

.column_ img {
  vertical-align: middle;
}

@media (max-width: 767px) {
.column_ {
  -ms-flex: 50% !important; 
  flex: 50% !important;
  width: 50% !important; 
}
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous>
</head>
<body>
  <div class="container-fluid>

    <div class="row_"> 
      <div class="column_">
        <div class="card" style="height: 880px">
          <div class="card-header">Card 6</div>
          <div class="card-body">
            <p class="card-text">Text for this card.</p>
          </div>
        </div>
        <div class="card" style="height: 450px">
          <div class="card-header">Card 5</div>
          <div class="card-body">
            <p class="card-text">Text for this card.</p>
          </div>
        </div>
      </div>
      <div class="column_">
        <div class="card" style="height: 450px">
          <div class="card-header">Card 5</div>
          <div class="card-body">
            <p class="card-text">Text for this card.</p>
          </div>
        </div>
        <div class="card" style="height: 450px">
          <div class="card-header">Card 5</div>
          <div class="card-body">
            <p class="card-text">Text for this card.</p>
          </div>
        </div>
      </div> 
      <div class="column_">
        <div class="card" style="height: 550px">
          <div class="card-header">Card 4</div>
          <div class="card-body">
            <p class="card-text">Text for this card.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
</body>
</html>

Give it a try! It may assist you in achieving the desired layout.

I have incorporated a media query for responsive design on small devices as well.

Answer №2

Although it may appear unconventional, give this setup a try.

<div class='row no-gutters'>
  <div class='col-lg-6'>
    <div class='row'>
      <div class='col-lg-12'>
        <!-- Card -->
      </div>
      <div class='col-lg-12'>
        <!-- Card -->
      </div>
      <div class='col-lg-12'>
        <!-- Card -->
      </div>
    </div>
  </div>
<div class='col-lg-6'>
    <div class='row'>
      <div class='col-lg-12'>
        <!-- Card -->
      </div>
      <div class='col-lg-12'>
        <!-- Card -->
      </div>
      <div class='col-lg-12'>
        <!-- Card -->
      </div>
    </div>
  </div>
</div>

A setup like the one above Just remember to include the appropriate classes like col-sm-12 where needed for mobile responsiveness. Hopefully, this provides some insight!

Also, here is a link to a Codepen showcasing the code.

https://codepen.io/anon/pen/qGxJRX?editors=1010

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

Unable to center align a .swf file vertically

I recently added a .swf file to my webpage within a div element, and I attempted to center it vertically in the middle of the div. Unfortunately, my attempts were only successful in horizontal alignment, which is not the desired outcome. I even tried pla ...

javascripthtmlcssflashdreamweaver

"Looking for a way to eliminate the background of an image on NextJS? Learn

https://i.stack.imgur.com/zAsrJ.png When this image is incorporated into a Nextjs rendering, it unexpectedly includes additional content. <div className="flex flex-col items-start justify-start rounded-3xl p-4 bg-boxi w-1/3"> <div cla ...

javascriptcssreactjsnext.jstailwind-css

Animation scaling on the iPhone seems to abruptly jump away once it finishes

Encountering an issue with animations that is causing unexpected behavior on physical iPhone devices but not in the simulators. The problem arises when the background zooms in and then the div suddenly jumps to the left after the animation completes, as sh ...

cssreactjstypescriptanimationstyled-components

Personalizing HTML input fields

I am looking to create a contact form that will display an image depending on whether the input entered is correct or incorrect. My goal is to achieve this using only HTML and CSS, without needing any JavaScript. While there are similar posts on this topic ...

htmlcss

Adjust Image Width to Full - Bootstrap

I am having trouble creating a full-width header using Bootstrap v5. Despite searching the site, I have not been able to find a solution that works for me. *{ box-sizing: border-box; font-size: 16px; } .no-padding { padding-l ...

htmlcsstwitter-bootstrap

Unusual addition symbols in the Bootstrap stylesheet

Something unusual is occurring in my bootstrap css code. I am noticing strange plus signs that seem out of place, and I cannot pinpoint a reason for their existence. Here's an example (you might need to enlarge the view as they are quite small): Thi ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Positioning a div with a set size to the right while allowing a div with a variable width to the left

Even though I achieved the desired outcome in this example (http://jsfiddle.net/jcx3X/40/), I am intrigued by the reasons why this other scenario (http://jsfiddle.net/jcx3X/41/) does not work. What is the significance of the div being floated first in th ...

htmlcsswidth

I'm feeling pretty lost when it comes to understanding how line-height and margins work together

When creating a webpage layout, my goal is to maintain balance by ensuring there is an equal amount of spacing between sections and elements. However, when dealing with varying font sizes and line heights, achieving this can be challenging. To provide fur ...

htmlcss

RTL mode causing issues with Bootstrap breadcrumb functionality

I'm currently working on integrating a Bootstrap breadcrumb into my next.js application. Everything seems to be functioning correctly when in LTR mode, following the sample code provided in Bootstrap's documentation. However, when attempting to s ...

reactjstwitter-bootstrapnext.jsbootstrap-5

Is there a way to customize the appearance of the current slide in slick.js with jQuery?

I am looking to customize the appearance of the currently active slide by giving it an orange border. Keep in mind that the class for the active slide is : slick-active and the structure is as follows : <div class='slick-slide slick-active' ...

jquerycssslick.js

Disabling the scaling feature in IE11's WebBrowser control: A step-by

After investing 48 hours into resolving this particular issue, I am reaching out to the knowledgeable StackoverFlowers community for assistance. My current project involves developing an application for large 27-inch multi-touch screens using C# 4.5. Withi ...

javascriptc#css.netinternet-explorer

"Applying a background color to a BorderPane element is successful when done inline, but encounters issues when

So I have a border pane and I am trying to set its background color to black using CSS. When I directly set the style inline, like this: borderPane.setStyle("-fx-background-color: black;"); it works perfectly fine. However, when I try to add a class s ...

javacssjavafx

What is the most effective method for enlarging elements using Javascript?

I have come across many different methods for expanding elements on webpages, such as using divs with javascript and jquery. I am curious to know what the most optimal and user-friendly approach is in terms of performance, among other things. For instance ...

javascriptjquerycsshtml

container that fades away, while the popup remains visible

Is it possible to fade the background of a container without affecting the pop-up form inside? I've come across some solutions, but they all seem to treat them separately. Here's what I'm trying to achieve: <div class='wrapper ...

jqueryhtmlcss

Is there a way to ensure that my background color extends across the entire webpage background?

I'm curious about how to make sure that the background color of sections 1 and 2 fills the entire webpage, similar to this example. Currently, the background color only covers half of the webpage, but I want it to extend across the entire background o ...

css

Unable to scroll when utilizing ng-html-bind functionality

My device specifications: $ ionic info Your system details: Cordova CLI: 6.2.0 Gulp version: CLI version 3.9.1 Gulp local: Ionic Framework Version: 1.2.4 Ionic CLI Version: 2.0.0 Ionic App Lib Version: 2.0.0-beta.20 OS: Distributor ID: LinuxMint Desc ...

javascripthtmlcssangularjsionic-framework

Navigate to another HTML division using data-toggle

I have 2 HTML documents index.html and services.html In services.html, I have the following code: <a class="nav-link" data-bs-toggle="tab" href="#ds-tab">Data Science</a> <a class="nav-link" data-bs- ...

javascripthtmlcssbootstrap-4bootstrap-5

Using jQuery to create a flawless animation

I am currently working on an animation project, and I have shared my progress on jsfiddle. Below is the code snippet I have utilized: /* JavaScript: */ var app = function () { var self = this; var allBoxes = $('.box&apos ...

javascriptjqueryhtmlcssanimation

Top div click causes bottom div to slide

I'm currently working on a project that involves using CSS and jQuery, but I've encountered an issue that I haven't been able to solve. https://i.sstatic.net/CSovs.png Here is the demo link: . When the second div is clicked, why does the t ...

jquerycss

Switch between display modes by clicking using collections

I am trying to figure out how to create a function that will only show content for the specific element in which my button is located. Currently, when I click the button it shows content for all elements with the 'one' class, but I want it to dis ...

javascripthtmlcss