Using Bootstrap's card component, design a grid layout for your website

I am attempting to construct a grid using the Bootstrap 4 card component. After reviewing the documentation and utilizing the card-deck feature, I aim to have each row consist of two columns with the behavior similar to col-12 col-md-6. Additionally, the second column needs to be split into two rows, each containing a horizontal card. Below is the snippet of code I currently have:

<div class="container">
    <div class="row">
        <div class="card-deck">
            <div class="card">
                <img
                    class="card-img-top"
                    src$="{{getArticleImage2(article1)}}"
                />
                <div class="card-body py-2">
                    <div class="d-flex justify-content-start align-items-center mb-2">
                        <img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article1)}}>
                        <a class="card-link medium-text" target="_blank" href$="https://{{getSources(article1)}}">
                            {{getSources(article1)}}
                        </a>
                    </div>
                    <p class="card-text article-headline medium-text">
                        {{article1.schema:headline}}
                    </p>
                </div>
            </div>

            <div class="card">
                <div class="row no-gutters">
                    <div class="col-md-5">
                        <img
                            class="card-img"
                            src$="{{getArticleImage2(article2)}}"
                        />
                    </div>
                    <div class="col-md-7">
                        <div class="card-body p-2">
                            <div class="d-flex justify-content-start align-items-center mb-2">
                                <img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article2)}}>
                                <a class="card-link medium-text" target="_blank" href$="https://{{getSources(article2)}}">
                                    {{getSources(article2)}}
                                </a>
                            </div>
                            <p class="card-text article-headline medium-text">
                                {{article2.schema:headline}}
                            </p>
                        </div>
                    </div>
                </div>                        
            </div>

            <div class="card">
                <div class="row no-gutters">
                    <div class="col-md-5">
                        <img
                            class="card-img"
                            src$="{{getArticleImage2(article2)}}"
                        />
                    </div>
                    <div class="col-md-7">
                        <div class="card-body p-2">
                            <div class="d-flex justify-content-start align-items-center mb-2">
                                <img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article3)}}>
                                <a class="card-link medium-text" target="_blank" href$="https://{{getSources(article3)}}">
                                    {{getSources(article3)}}
                                </a>
                            </div>
                            <p class="card-text article-headline medium-text">
                                {{article3.schema:headline}}
                            </p>
                        </div>
                    </div>
                </div>                        
            </div>
        </div>
    </div>
</div>

The issue I am encountering is that instead of having only two columns, I'm getting three. The last two cards are being displayed horizontally but they should be stacked one below the other. You can view the code snippet here. How can I resolve this?

htmlcssbootstrap-4

Answer №1

When you insert a div with the class card-columns like this:

<div class="card-deck">
            <div class="card-columns">
                <div class="card">
                    <img
                        class="card-img-top"
                        src=""
                    />
                    <div class="card-body py-2">
                       //.................

You will see two columns, one displaying a card vertically and the other containing two cards side by side.

Don't forget to check out the last section of the documentation as it may help you specify how many cards you want in each column. https://getbootstrap.com/docs/4.3/components/card/

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

What is the best way to transfer data from an HTML input field to a PHP script?

Within my patient_display.php file, I am calling the patient_history.php script and passing along the P_ID. Here is an outline of my code. patient_display.php: echo '<form name="Patient" action="patient_history_display.php" method="get">'; ...

phphtmlsqlforms

Having trouble with an onClick function not working on a .php webpage?

I recently developed a simple JavaScript script that dynamically loads an image based on user input in a text field (e.g., entering 'brick1' loads brick1.jpg). Although this works fine on a regular HTML page, I faced issues triggering the onClick ...

javascriptphpjqueryhtml

Can child elements be centered using their pseudo-elements using CSS alone?

Consider the code snippet below: <div class="example-container"> <p class="example">a</p> <p class="example">bbb</p> <p class="example">cc</p> </div> and the cor ...

htmlcss

Learn how to easily incorporate a drop-down list into the material-UI Search component within the navbar to enhance the search results

I integrated a Material UI search bar into my React app's navbar following the instructions from the official documentation on MUI. However, the article does not provide any guidance on how to add a dropdown list when selecting the search input field. ...

javascriptcssreactjsmaterial-ui

Adding flair to a fresh element and then removing it upon its inception

I'm working with a JavaScript code that creates a new element when a button is clicked. I have a question about it. Here's the JavaScript code snippet: var comment = document.querySelector("#AddComment"); var req = new XMLHttpRequest(); if(comm ...

javascripthtmlcssajax

Problem with CSS creating the Typewriter effect when the third line of text is added

I've been working on a website for my new company and I want to incorporate a typewriter effect on the main page. I came across a tutorial on Medium.com but I'm having trouble adding an additional span to the provided code. Take a look at the lin ...

htmlcss

Ways to locate CSS file path within a web browser

Currently, I am focusing on the theme development aspect of Magento2. After compiling the .less file, I noticed that two css files are generated: styles-l.css styles-m.css Despite trying to inspect the element and view the applied CSS in the browser, i ...

cssmagento2

Experience the dynamic expansion of a droppable div as you elegantly drop an element within

When the questions "question1" and "question2" are dragged into "questionslots," I want the "questionSlots" div to expand its size dynamically when the second question is dropped into it. This means that both questions should be accommodated and visible wi ...

jqueryhtmlcssjquery-uidraggable

Utilizing nested createHtmlOutputFromFile in Google Apps Script HtmlService to generate jQuery code

Embarking on a new journey, I am diving headfirst into the world of JQuery WebApp with Google Apps Script. Every day is filled with new discoveries and excitement as I immerse myself in learning to piece things together. Starting off with some examples an ...

jqueryhtmlgoogle-apps-script

Condense a lineup of names into only two rows

I have a challenge where I need to showcase a list of names separated by commas, pulled from an array in my React component. The HTML output should appear as follows: <div> <span>Liza</span>, <span>Eric</span>, <span>Mic ...

javascriptcssreactjs

Prevent typing in text box when drawer is activated by pressing a button

update 1 : After removing unnecessary files, I need assistance with https://codesandbox.io/s/0pk0z5prqn I am attempting to disable a textbox. When clicking the advanced sports search button, a drawer opens where I want to display a textbox. The toggleDra ...

javascripthtmlreactjsreduxmaterial-ui

Tips for adjusting image size to take up only half of the screen in NextJS

Struggling to resize an image to fit only 50% of the screen in NextJS? The Image component provided by NextJS comes with its own inline styling, making it tricky to customize. Currently, I attempt to style the image by wrapping the Image component in a spa ...

javascriptcssreactjssassnext.js

The presence of ng-show dynamically adjusts the minimum height of a div element

I am encountering an issue with a div that has the class of wrapper. Inside this div, there is a parent div with the class of content-wrapper. The wrapper div includes a conditional directive ng-show which toggles between displaying or hiding its content. ...

javascripthtmlcssangularjs

Discover the process of extracting HTML content that's stored within a JavaScript variable

Having a HTML snippet stored in a variable, like this: var parse= 'Hello<i class="emoji emoji_smile" title=":smile:"></i><i class="emoji emoji_angry" title=":angry:"></i>World' I am looking to extract the value of the "t ...

javascriptjqueryhtml

What's the best way to align three images in a row?

I am having trouble centering three social media icons next to each other. I can't seem to figure out the proper way to do it. https://i.stack.imgur.com/Zf5p9.png <div class="maintext flipInX animated"> <div class="socials wow bounce an ...

javascripthtmlcss

Python web scraper unable to locate specified Xpath

My question was previously posted here: Xpath pulling number in table but nothing after next span In testing, I successfully located the desired number using an XPath checker plugin in Firefox. The extracted results are displayed below. Although the XPa ...

pythonhtmlseleniumxpathselenium-webdriver

Angular material tree with nested branches broken and in disarray

I'm facing a challenge with the UI issue of expanding trees on the last node, as it always creates excessive lines from the nodes, similar to the image below. I attempted to adjust the left border height but saw no change at all. Does anyone have any ...

cssangularmaterial-ui

showing errors in case the username does not match the specified pattern

As I work with symfony, one of the challenges is displaying errors when the username does not fit the specified pattern. How can this be achieved? {{ form_widget(form.username, {'attr':{'pattern': '[a-zA-Z]*'} }) }} ...

angularjsregexhtmlsymfony

Ways to dynamically update a div with data from a JSON response

I'm currently in the process of developing a search platform. I have three static divs on the search results page that display certain content, all containing similar code. For example: <div id="result" class="card"> <img src="hello.png" ...

javascriptjqueryhtmlcssloops

Implementing Google Fonts into Next.js with the combination of Sass, CSS, and Semantic UI React

I have set up my next.config.js file with the following configuration: const withSass = require('@zeit/next-sass'); const withCss = require('@zeit/next-css'); module.exports = withSass(withCss({ webpack (config) { config.module. ...

cssreactjssassnext.js