Version 4.1 of Bootstrap offers a versatile multirow card layout with two columns

How can I make a two-column, multi-row card display using Bootstrap v4.1? I need this setup three times, with each pair of cards grouped for different tasks. Please see the code below and provide assistance.

body {
    background: url("../img/3E184478-7FEF-4B58-9019-54BAAB274008-25530-00000D973368B5BD.PNG") no-repeat fixed center;
    background-size: cover;
    margin: 8px;
}

#wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

/* CSS styles continue... */

htmlcssbootstrap-4

Answer №1

For those seeking nested columns in Bootstrap 4, examples are available here. The code for achieving this isn't too complex. Simply add another row within one of your columns, followed by the appropriate col-x.

  <div class="container">
    <div class="row">
      <div class="col-4">
        <!--start nested rows here -->
        <div class="row">
          <div class="col-4 text">
            Nest Column One
          </div>
          <div class="col-4 text">
            Nest Column Two
          </div>
        </div>
        <!--end nested rows here -->
     </div>
    </div>
  </div>

An updated jsfiddle example of the code has been provided for demonstration purposes. Hopefully, this explanation helps clarify things.

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

Creating gaps between flexbox divs for a more visually appealing layout

I am curious about the best practices for creating spacing between two divs that use flexbox. For example: https://i.sstatic.net/OZ8cp.png header { background-image: radial-gradient(circle, #72d6c9, #54d1ed, #7ac5ff, #bcb2fe, #f29cd9); height: 80px ...

htmlcssflexbox

Troubleshooting CSS issues in HTML pages

I created an HTML file but the CSS properties are not displaying correctly in the browser. I'm not sure where I made a mistake. Instead of using a separate CSS file, I have included it directly in the HTML file. <!DOCTYPE html> <html> &l ...

htmlcss

Ensure that icons are evenly spaced, regardless of whether they display a notification badge or not

Although not as abundant as depicted in the image below, it is more evident that I am seeking a couple of font awesome icons overlaid with a bootstrap badge to display notifications. The two issues that I am encountering are: There is excessive spacing ...

htmlbootstrap-4

How can I make my slider perfectly accommodate the component inside?

I am working on developing a slider similar to the McDonald's one: The main goal for my slider is to adjust to the container element size, so that when the user clicks the left or right buttons, the slider smoothly moves to the corresponding directio ...

javascriptcssreactjs

Retrieve a div element using two specific data attributes, while excluding certain other data attributes

Here are some examples of divs: <div id="1" data-effect-in="swing" data-effect-out="bounce"></div> <div id="2" data-effect-in="swing"></div> <div id="3" data-effect-out="swing"></div> <div id="4" data-effect-out data ...

javascriptjqueryhtmlcustom-data-attribute

Is it possible that the grid gutter column in Bootstrap 4 might be disrupted if it is defined as to32 (2x

My goal is to create a design system where all sizes and components are multiples of 4, rather than using two margins of 15. This will ensure a more consistent and proportional design throughout. ...

gridbootstrap-4

Issue with collapsing dynamic lists in Asp Core Bootstrap

Struggling with a seemingly simple task here. I'm dealing with a list of 120 dynamically generated items in a .net Core MVC application, and I've included the following code snippet in my View: <table class="table"> <thead ...

jqueryasp.net-mvcasp.net-corebootstrap-4

Adding a border-top overlay to vertical navigation

I'm working on a vertical navigation bar and I'd like to make some styling changes. Here's the current setup (View jFiddle): <style> ul{ list-style-type: none; } li{ display: block; margin: 0; padding: 10; border-top: 1px d ...

htmlcss

A guide to deactivating the Material UI Link API element

Previously, I relied on Material UI's Button component with a disable property that allowed the button to be disabled based on a boolean value. However, I now want to use the Material UI Link component, which resembles a text link but functions like a ...

javascriptcssreactjsmaterial-ui

Troubleshooting Problems with CSS `transform` in JQuery UI's `Slide` Transition

While implementing JQueryUI's slide transition on an element with a CSS transform, I encountered an issue where the top half of the element gets hidden during the animation. Is there a way to tweak either my JQueryUI animation or CSS to avoid this pro ...

javascriptjqueryjquery-uicssangularjs

While the data from Angular $resource can be viewed, it is not accessible in the code

As a newcomer to Angular, I'm facing a frustrating issue that I need help with. My $resource is fetching data from the server in key/value pairs like detail.name and detail.email. While I can access this data using {{detail.name}} in the view, I&apo ...

javascriptphphtmlangularjsgoogle-maps

Is there a way to use the same background image for both the left and right borders?

How can I set this image as both the left and right background image on my webpage? I want it to be displayed on both sides. Any suggestions on how to achieve this? Here is the code snippet I have implemented so far: <%@ Page Language="C#" AutoEventW ...

htmlcssasp.net

Please enter the text in the field provided at the bottom using IE10

Why is the text inside my input appearing at the bottom in IE10, while it displays in the middle on FF and Chrome? http://jsfiddle.net/PXN2e/2/ input.form-text { color: #999999; font-size: 14px; height: 30px; line-height: 30px; paddin ...

htmlcssinput

Here's a guide on how to display texts underneath icons in Buttons using Material UI

Currently, this is the Button I have displayed https://i.sstatic.net/YkHp0.png I am trying to figure out how to position the Dummy Button text beneath the icon. Can someone assist me with this? Below is my code snippet: <Button className={classes.d ...

javascripthtmlreactjsmaterial-ui

The value of the variable is failing to be included in the Ajax request being sent to the server via jQuery

I'm encountering an issue with my contact form where I can't seem to retrieve the $_POST values via ajax for saving to a text file. It seems like there might be a problem with my javascript code. Check out the jQuery code snippet below: functio ...

phpjqueryhtmlajax

Transferring HTML variables to CSS

I've been searching for an answer without much luck. Is it possible to transfer variables from HTML to CSS, maybe using data attributes? I want to display different backgrounds based on vendors using media queries on brand pages. I know inline CSS d ...

csssassshopify

What measures can be taken to stop LESS partials from compiling independently?

When working with LESS, I utilize partials that are included (@include) into the main LESS stylesheet. A common issue I face is that each partial ends up compiling to its own CSS file, leading to project clutter. In SASS, if a file is named with an unders ...

csslessphpstorm

The input field is stretching beyond its intended length

My issue arises from having a div containing a listbox (select), textbox (input text), and button (input submit) inside it, with width:250px set for the entire div and width:100% for each element within. Logically, this should fill the space inside the div ...

htmlasp.netcssinputtextbox

Is it possible to integrate angular-bootstrap-datetimepicker with bootstrap3?

Looking for an accessible date picker solution for my project. The project is built on Bootstrap3, but the angular-bootstrap-datetimepicker has a dependency on Bootstrap4. Can I still integrate angular-bootstrap-datetimepicker with Bootstrap3? ...

angulartwitter-bootstrap-3bootstrap-4accessibilitybootstrap-datepicker

Different methods of transferring PHP post information to JavaScript

Is there a cleaner and more elegant way to pass posted PHP variables to JavaScript for manipulation, rather than using inline JavaScript? I currently have a simple PHP form that posts data to specific variables and then uses inline JavaScript to handle the ...

phpjavascripthtml