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

Tips for maintaining alignment of components within an Angular Material tab:

I am facing an issue with keeping items aligned properly. Initially, I had a form with two Angular Material lists placed side by side, each occupying 6 units and it looked good. However, when I tried to enclose these two lists within a material tab, they e ...

cssangularangular-material

Bootbox Dialog Form

Looking to implement a functionality where a Bootbox dialog pops up with an "OK" button. Upon clicking the "OK" button, it should initiate a POST request, sending back the ID of the message to acknowledge that the user has read it. The Bootbox dialog fun ...

javascripttwitter-bootstrapbootbox

Alter the appearance of the mouse cursor when hovering over input fields in HTML

I am working with a variety of HTML elements that can be moved via Drag'n'Drop. In order to indicate to the user where these elements can be dropped, I change the cursor's appearance using CSS classes applied through JavaScript. This method ...

htmlcssdrag-and-dropmouse-cursor

Conceal and reveal elements using a specific identifier with

Web Development Guide <ul id="menüü"> <li id="meist"> <p><a href="meist.html">Meist</a></p> </li> </ul> <div id="submenu"> <ul id="submeist"> ...

jqueryhtmlcssweb

Strategies for Locating XPath Using Text Content within Table Cells (td / tr)

Need help with searching for specific text within a large HTML table of emails and selecting a button within the element? You can easily find the table body via XPATH by using: //*[@id="reportList"]/tbody Within this table, there are multiple rows (tr). ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver

The utilization of bootstrap can lead to CSS interruptions

I am trying to create a navigation button that transforms from 3 horizontal lines to an X shape when clicked. var anchor = document.querySelectorAll('button'); [].forEach.call(anchor, function(anchor) { var open = false; an ...

htmlcsstwitter-bootstraptransition

What steps can I take to ensure that it is responsive?

I recently purchased this template and am currently editing it. It utilizes bootstrap, however, I seem to be encountering an issue with the sizing of an image on different monitors. I attempted to add: .responsive {width: auto; height: auto;} to resolve ...

cssimageresponsive

Having trouble resolving a setInterval problem with JavaScript?

Yesterday, I learned about the setInterval function which allows me to execute a task or function after a specific amount of time. While I have successfully implemented the interval in my code, it keeps adding new lines with the date each time. What I re ...

javascripthtmlfunctiondatesetinterval

Using jQuery to remove all inline styles except for a specific one

Just a quick inquiry: Our Content Management System (CMS) utilizes CKEditor for clients to modify their websites. The front-end styles include the use of a pre tag, which we have customized to our desired appearance. However, when their team members copy a ...

javascriptjqueryhtmlcss

The Bootstrap alert refuses to close when the close button is clicked

I'm attempting to utilize a Bootstrap alert for displaying a warning. The alert automatically fades and dismisses after a period of time, but I want to provide the user with the option to manually close it. I've included jQuery and js/bootstrap.m ...

javascriptangularjstwitter-bootstrapgoogle-chrome-app

Is there a peculiar issue with CSS float:right in IE9?

These are the styles I'm using: For the parent container: div.musicContainer { width:820px; height:54px; margin-bottom:20px; } And for the child containers: div.hardcorePlayer { width:400px; float:left; border:n ...

csshtmlinternet-explorer-9

Icon for local system displayed on browser tab

I am currently trying to set a Browser Tab icon for the local system, but it is not working. However, when using an HTTP static icon, it works perfectly. Can someone please help me understand what the issue might be? PAGE 1 : Icon Not Showing <link re ...

javascriptjqueryhtmlajaxbrowser

Having difficulty populating a table with JSON data in Angular without encountering any error messages

After executing a query on my database, I realized that although the JSON data is correct (as confirmed through the console), the table does not populate as expected. Here is the code snippet for my component: @Component({ selector: 'app-envios&apo ...

htmljsonangularngfor

Adjust the position of an unordered list element in CSS to move it lower on

I have a ul element in my navigation bar at the top of the webpage that I want to adjust slightly downwards. Take a look at the current navigation bar: image To align the text with the white bar at the top of the page, I need to move it down just a bit. ...

htmlcss

The Codepen demo for SemanticUI is not functioning properly

Click here to view the example on CodePen $('.ui.sidebar').sidebar({ context: $('.bottom.segment') }) .sidebar('attach events', '.menu .item'); I am currently trying to replicate this specific functiona ...

javascripthtml

Ensure that the cursor is consistently positioned at the end within a contenteditable div

I'm working on a project where I need to always set the caret position at the end of the text. By default, this works fine but when dynamically adding text, the caret position changes to the starting point in Chrome and Firefox (Internet Explorer is s ...

javascriptjqueryhtmlpositioncaret

Create a responsive DIV element within a website that is not originally designed to be responsive

I am looking to optimize the positioning of an ad div on my non-responsive website. The current setup has the ad displayed at 120x600 pixels, always floating to the right of the screen. While this works well for desktop or large devices, the display become ...

htmlcss

Having trouble with changing the class using Jquery click function

Originally, I had the code in an ASP.Net project, but to troubleshoot, I moved it to a separate web server. However, I am still unable to switch between the tab panes with the buttons. Any assistance in debugging this issue would be greatly appreciated. S ...

jqueryhtml

Replacing elements with preg_replace in HTML including diacritics

Can someone assist me in using preg_replace for the following scenario: <p style="background:white"> <span style="font-size:10.0pt;font-family:&quot;Trebuchet MS&quot;,&quot;sans-serif&quot;"> Coût de la prestation : 43.19 . ...

phphtmlpreg-replacediacritics

Sending Data via Ajax

I am currently working on implementing an ajax invitation script that allows users to invite their friends to an event. The javascript code I have used in other parts of the website works perfectly, but for some reason, it is not functioning correctly in t ...

phpjavascriptjqueryhtmlajax