What is the best way to combine two DIV table rows within Bootstrap 5?

Looking at the code below, there are 6 cells in 2 rows, but I want to merge cell number "2" and "5".

I know this can be accomplished using CSS Table DIV, but is there a way to do it with Bootstrap? I haven't found any documentation that worked for me.

If anyone knows how to achieve this, please let me know!

The DIV: (Note: Expand the snippet to see the cells displayed correctly)

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2808d8d969196908392a2d7ccd2ccd3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100" style="text-align: center">
      <h1>1</h1>
    </div>
  </div>
  <div class="col">
    <div class="card h-100" style="text-align: center">
      <h1>2</h1>
    </div>
  </div>
  <div class="col">
    <div class="card h-100" style="text-align: center">
      <h1>3</h1>
    </div>
  </div>
  <div class="col">
    <div class="card h-100" style="text-align: center">
      <h1>4</h1>
    </div>
  </div>
  <div class="col">
    <div class="card h-100" style="text-align: center">
      <h1>5</h1>
    </div>
  </div>
  <div class="col">
    <div class="card h-100" style="text-align: center">
      <h1>6</h1>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-5bootstrap-grid

Answer №1

You can create nested elements in this way...

<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="row">
            <div class="col-12">
                <div class="card h-100 border" style="text-align: center">
                    <h1>1</h1>
                </div>
            </div>
            <div class="col-12">
                <div class="card h-100 border" style="text-align: center">
                    <h1>4</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="row h-100 ">
            <div class="col-12">
                <div class="card h-100 border" style="text-align: center">
                    <h1>2 + 5</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="row">
            <div class="col-12">
                <div class="card h-100 border" style="text-align: center">
                    <h1>3</h1>
                </div>
            </div>
            <div class="col-12">
                <div class="card h-100 border" style="text-align: center">
                    <h1>6</h1>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №2

Regrettably, there is no straightforward solution using solely Bootstrap 5 methods for this issue. One option is to utilize a table, as mentioned earlier. Alternatively, you can try a combination of Bootstrap 5 and display grid.

In this case, we are incorporating d-grid - a new class in BS5, along with gap-2 for grid gap support. Currently, the documentation on d-grid in Bootstrap 5 is limited, with one example available in the BS5 docs.

Please note that both custuom-grid and custuom-grid-cell are custom classes and not part of Bootstrap 5.

Additionally, you may find these resources useful: grid-template-columns and grid-area guides. They are utilized in the example below.

.custuom-grid {
  grid-template-columns: 1fr 1fr 1fr;
}
.custuom-grid-cell:nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209170916">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<div class="d-grid gap-2 custuom-grid">
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>1</h1>
    </div>
  </div>
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>2</h1>
    </div>
  </div>
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>3</h1>
    </div>
  </div>
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>4</h1>
    </div>
  </div>
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>6</h1>
    </div>
  </div>
</div>

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

Using AngularJS to link the ng-model and name attribute for a form input

Currently, I am in the process of implementing a form using AngularJS. However, I have encountered an issue that is puzzling me and I cannot seem to figure out why it is happening. The problem at hand is: Whenever I use the same ngModel name as the name ...

htmlangularjsformsinput

Using a custom font in a Django project without relying on the Google Fonts API

I've hit a roadblock in my programming journey and I'm seeking help. As a newcomer to both programming and Django, I've been following a helpful tutorial up until part 4. Everything was going well until I stumbled upon a new font online cal ...

htmlcssdjangofonts

Navigation bar collapse items are not properly aligned in the layout

My navbar collapse button is not aligning the items in the dropdown properly. I suspect it has to do with the way I have structured the divs. How can this issue be fixed? <nav class="navbar navbar-expand-md navbar-light mb-4 row"> <b ...

htmlcssbootstrap-4

Tips for personalizing PNG images within an SVG element

Looking to update the color of a PNG image within an SVG tag. The PNG images I have are transparent, and I want to customize their colors based on user selections. How can this be achieved? Is there anyone out there who can assist me? <HoodieSvg ...

cssreactjssvgpng

What is the best way to dynamically adjust the size of a Google map on my website automatically

I need assistance with placing a Google map on a webpage along with textboxes in the div below it: <div id="map_area"> <div id="map_canvas"></div> </div> <div id="date_range"> <input type="text" id= ...

csshtmlheight

Tips for fading an image as you scroll using CSS and JavaScript?

I have been dedicating my day to mastering the art of website development. However, I am facing a challenge that is proving to be quite difficult. I am looking to create a smooth transition effect where an image gradually blurs while scrolling down, and re ...

javascripthtmljquerycss

Utilizing AngularJs to differentiate between arrays and strings within an HTML template

I'm currently facing a challenge with creating a dynamic HTML template. In order to present data in a table, I need to distinguish between a regular String and an Array. Firstly, the HTML template is embedded within another template using the data-ng- ...

javascriptjqueryhtmlangularjsarrays

Clicking on Bootstrap Select Does Not Trigger Dropdown Opening

Currently, I am working on generating a dynamic set of bootstrap-select widgets that include a dropdown. My main challenge lies in preventing the select from closing the dropdown, which requires me to use 'event.stopPropagation()' on the dropdown ...

javascripttwitter-bootstrapbootstrap-select

The container is unable to contain the overflowing Slick carousel

The carousel in Slick is overflowing the container. Expected Result - First Image / Current State, Second Image Parent Container HTML (layout) <main> <div class="layout__main-container p-4"> <app-discover-animals clas ...

htmlcssangularjssliderslick.js

What is the process for eliminating the hover effect on a Bootstrap button?

I have customized a Bootstrap button in my stylesheet to make it dark, but it still has a hover effect from Bootstrap that I want to remove. How can I get rid of this hover effect? Take a look at the code snippet below for reference: .btn-dark { min-w ...

htmlcsstwitter-bootstrap-3

``How can I prevent browser popups/tooltips from appearing when a user exceeds the maximum value in a number

Is there a way to prevent the tooltip from appearing on the image when a user manually enters a quantity that exceeds the maximum allowed? The tooltip pops up when the form is submitted, and I need to find a way to turn it off. It seems like this tooltip ...

htmlreactjsmaterial-uireact-hook-form

How to prevent npm from being accessed through the command prompt

I recently began working on a ReactJs project. However, I am facing an issue where after starting npm in Command Prompt, I am unable to enter any text. Should I close the cmd window or is there a way to stop npm? You can now access your project at the fol ...

javascriptcssreactjsnpmcmd

The Django server fails to display the CSS files upon activation

Despite having all the static files in place, only the plain HTML loads without any styles for some unknown reason. I've attempted using collectstatic and even setting up a new project, but to no avail. STATIC_URL is also properly specified along with ...

pythoncssdjangodjango-templatesdjango-admin

Achieving consistent text alignment in HTML and CSS without relying on tables

As I delve into the world of HTML and CSS, I've taken a traditional approach by crafting a login page complete with three input controls (two text inputs and one button). To ensure proper alignment of these elements, I initially turned to the trusty & ...

javascripthtmlcssuser-interface

The <img> tag is displaying with dimensions of 0 x 0 pixels even though its size was specified

Is there a way to control the image size within an <img> tag placed inside an html5 video element? Currently, it keeps defaulting back to 0 x 0 pixels. The reason behind using this img is to serve as a fallback for outdated browsers where the video ...

csshtmlimagehtml5-video

Ways to monitor and measure clicks effectively

Within my website, I have a table element with one column and numerous rows. Each row serves as a hyperlink to an external shared drive. <tr><td ><a href="file://xxx">Staff1</a></td></tr> <tr ><td ><a h ...

javascripthtml

JavaScript Fullcalendar script - converting the names of months and days

I recently integrated the Fullcalendar script into my website (https://fullcalendar.io/). Most of the features are functioning correctly, however, I am seeking to translate the English names of months and days of the week. Within the downloaded package, ...

javascripthtml

Utilize Python to extract a table from an HTML document

I would like to retrieve a table from an HTML file. Below is the code-snippet I have written in order to extract the first table: import urllib2 import os import time import traceback from bs4 import BeautifulSoup #find('table',{'class&ap ...

pythonhtmlcsvbeautifulsoup

Unable to find '/images/img-2.jpg' in the directory 'E:React eact-demosrc'

My code is giving me trouble when trying to add an image background-image: url('/images/img-2.jpg'); An error occurred during compilation. ./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src?? ...

javascripthtmlcssreactjs

Exploring jQuery Efficiency: Comparing CSS and Animation Techniques

I am trying to steer clear of using the animation property because it tends to be slower compared to CSS3 animations. My query is whether utilizing the css method is faster than the animation property, but still slower than a direct CSS3 animation with tr ...

jqueryperformancecssjquery-animate