Responsive cards using Bootstrap styling

Currently trying my hand at mastering flexbox for responsive design with Bootstrap. In the picture, there are 4 cards where 2 should be displayed at the bottom and the other 2 at the top, but on mobile phones, they should all stack at the bottom. I attempted a solution but it wasn't successful. Any suggestions on what steps to take next?

view image reference

Appreciate any help.

.card{
    display: flex;
    flex-wrap: wrap;
}



@media (max-width: 500px) {
   .card{
    flex-direction: row;
  }
}
<!DOCTYPE html>
<html>
<head>
  <title>A</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c7ddc5ddc3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
...
            ...
        ...


    ...








...






...







...
        
        

...




...


...

htmlcssbootstrap-4

Answer №1

  1. Make the cards responsive by using col and remember to add .d-flex .flex-wrap to the container.
  2. The layout options you can use are col-12 col-md-6 col-lg-3. Start with col-12, which follows a mobile-first approach.

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

<section class='container d-flex flex-wrap border p-2'>
  <article class='card col-12 col-md-6 col-lg-3'>
    <img src="https://picsum.photos/200/200">
    <section class='card-title'>Lorem Ipsum</section>
  </article>
  <article class='card col-12 col-md-6 col-lg-3'>
    <img src="https://picsum.photos/200/200">
    <section class='card-title'>Lorem Ipsum</section>
  </article>
  <article class='card col-12 col-md-6 col-lg-3'>
    <img src="https://picsum.photos/200/200">
    <section class='card-title'>Lorem Ipsum</section>
  </article>
  <article class='card col-12 col-md-6 col-lg-3'>
    <img src="https://picsum.photos/200/200">
    <section class='card-title'>Lorem Ipsum</section>
  </article>
</section>

Answer №2

If you want to create a split screen layout, consider utilizing the Grid System from Bootstrap.

After implementing this approach, your code might look something like this: https://i.sstatic.net/NF0OW.png

<div class="container">
  <div class="row">
    <div class="col">
           <div class="card mb-4">
            <img class="card-img-top img-fluid" src="https://via.placeholder.com/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">1 Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
    <div class="col">
            <div class="card mb-4">
            <img class="card-img-top img-fluid" src="https://via.placeholder.com/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">2 Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm--></div>

    </div>
    <div class="w-100"></div>
    <div class="col">
            <div class="card mb-4">
            <img class="card-img-top img-fluid" src="https://via.placeholder.com/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">3 Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
    <div class="col">
     <div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>
        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="https://via.placeholder.com/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">4 Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
  </div>
</div>

Answer №3

When utilizing Bootstrap 5 for responsive card design, you can employ the class row-cols-md-2. If you require 4 cards in a row on larger screens, simply switch row-cols-md-2 to row-cols-md-4.

<!doctype html>
<html lang="en>

<head>
    <meta charset="utf-8">
    <title>Responsive Cards with Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e1ececf7f0f7f1e2f3c3b6adb3adb1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594a4d1cad4cad6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>
<div class="row row-cols-1 row-cols-md-2 g-4">

                <div class="col">
                     <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">Card 1</h5>
                            <p class="card-text">Text 1</p>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">Card 2</h5>
                            <p class="card-text">Text 2</p>
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">Example of list item</li>
                            <li class="list-group-item">Another one</li>
                        </ul>
                        <div class="card-footer">
                            <small class="text-muted">A footer</small>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">Card 3</h5>
                            <p class="card-text">Text 3</p>
                        </div>
                    </div>

                </div>
                <div class="col">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">Card 4</h5>
                            <p class="card-text">Text 4</p>
                        </div>
                    </div>
                </div>
</div>

Answer №4

**Give This a Shot**

<div class="panel" style="width: 20rem;">
    <div class="panel-body">
    <h3 class="panel-title">Panel title</h3>
    <h5 class="panel-subtitle mb-2 text-muted">Panel subtitle</h5>
     <p class="panel-text">Some quick example text to showcase in the panel and 
       fill the majority of the panel's content.</p>
      <a href="#" class="panel-link">Panel link</a>
      <a href="#" class="panel-link">Another connection</a>
     </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

Exploring the world of animation with Jquery and images

I'm delving into the world of jQuery to create some captivating animations. Currently, I've been tasked with an assignment involving images that expand, contract, change opacity, and eventually hide. Below is my code snippet: function play_pic1 ...

jqueryhtmlcss

Building a Next.js project encounters issues with the <img> HTML tag

Lately, I've dived into creating websites using Next.js and have been experimenting with a combination of Image and img for different purposes. I am aware that Image is an integral part of Next.js and the preferred option, but there are instances whe ...

htmlnode.jsreactjsnpmnext.js

Expression Engine presents a dilemma with breadcrumbsOr:Expression Engine

Having a slight issue with Expression Engine. I've created a breadcrumb snippet using {if segment_} coding. While setting up if rules for each page on the small site, I encountered a problem with one of the breadcrumb trials. The issue arises when tr ...

phphtmlexpressionenginebreadcrumbs

Can you direct me to resources on the internet that provide information about support for 12 Bit color depth?

I am curious to know when the w3specs will support colors in 12 bits instead of the current 8-bit format used for webcolors like sRGB (#FFFFFF or rgba(255,0,0,100). I wonder if there will ever be a new standard called 12-Bit sRGB where colors can be defin ...

csscolorsphotocolor-depthsrgb

A difference in the way content is displayed on Firefox compared to Chrome, Edge, and Safari

Recently, I encountered an issue with a tool I had developed for generating printable images for Cross-Stitch work. The tool was originally designed to work on Firefox but is now only functioning properly on that browser. The problem at hand is whether th ...

javascripthtmlcssfirefox

Is it possible for a Vue data property to have a value that is determined by another Vue data property object?

Within my HTML form, I have implemented the flatPickr (calendar picker) component which generates an input field. I am currently exploring how to dynamically change the class of the input field if the error class function returns true. Below is the flatPi ...

javascripthtmlajaxvue.jsvuejs2

Bootstrap columns are still disrupted by large images even when they have reached their maximum width and height

I have been using bootstrap templates that allow users to create displays with images and text. I previously added max-width:100% and height:auto to the img CSS, thinking it would resolve issues with large images breaking the container. However, when inse ...

htmlcssbootstrap-4

Bootstrap: Arrange multiple images horizontally within a row

I am trying to design a list item for a game that includes a background, an iconholder with an icon, a title, description, and up to three resources. I have been experimenting with Bootstrap and attempted using a container-fluid with an inner row but the i ...

htmlcssangularbootstrap-4

positioning newly generated dropped elements within the DOM structure dynamically

Hello everyone, I have a query related to drag and drop functionality. I am currently working on an application that allows users to create websites using only drag and drop features. I am facing a challenge in implementing a feature where users can drop e ...

javascriptjquerycssangularjsdrag-and-drop

Tips for including shared information across different ionic tabs

Is there a way to include some shared content, like a canvas, in between the content of different tabs in Ionic? I want this common content to be displayed across all tabs, while each tab still shows its own dynamic data below it. I attempted to add the c ...

javascriptjqueryhtmltabsionic-framework

The art of arranging elements on a webpage using HTML and

I designed a rectangle using position: relative; and placed an icon inside it. However, when I added a new div class called .Home, and included an element <h4>Home</h4> with position: relative;, the element appeared outside of the rectangle. Wh ...

htmlcss

I require assistance on how to properly arrange images in a div so that they stack

I'm having an issue with arranging a series of images within a div where they stack on top of each other. The div has a CSS width of 450px, and the top image always matches this width. Subsequent images vary in size and need to be aligned flush right ...

css

Tips for maintaining tab state using Angular Material

In my Angular 8 application with Angular Material, I have implemented four tabs where each tab allows editing. However, when going back from the edit mode to the tabs, I want the last selected tab to remain selected. My approach so far is as follows: exp ...

htmlangulartypescripttabsangular-material

"Preventing the propagation of a click event on an anchor tag with

Is there a way to prevent the parent anchor from executing its href when a child element is clicked, despite using stopPropagation? Here is the markup provided: <div id="parent"> <h5>Parent</h5> <a id="childAnchor" href="https:// ...

javascriptjqueryhtml

Adding custom fonts to DOMPDF: a step-by-step guide

First, I moved the dompdf library folder to /dompdf Next, I added a /fonts folder containing Roboto-Black.ttf Then, I created an index.php file <?php // Autoloader inclusion require_once 'dompdf/autoload.inc.php'; // Namespace reference ...

phpcssdompdf

Creating visually pleasing HTML emails with uniform table data heights

Struggling with Outlook while designing an HTML template. My row has 2 td elements with different content, and setting equal heights is proving to be a challenge. The fixed height on the td causes issues when switching to mobile view in Outlook as text wra ...

htmlcsshtml-email

Encountering the issue "error TS2339: Property 'user' is not available on type 'Object'."

issue TS2339: The property 'user' is not found on the type 'Object'. export class UserAuthentication implements OnInit { user = new BehaviorSubject<Userlogin>(null); constructor( private route: ActivatedRoute, private rou ...

htmlnode.jsangularjsmongodb-query

Animating Brightness and Contrast in CSS

I come from a strong background and I am looking to create a dynamic loop that changes the brightness using CSS specifically on Chrome. The goal is to have the background color match the user's profile, providing a unique experience each time. For ex ...

css

What is the best way to locate the offspring of a parent div using its data attribute?

If I have a container div called dvMainDiv with multiple child divs inside it, all added programmatically, how can I retrieve a specific child div based on its data-id attribute? <div id="dvMainDiv" class="dvMainDiv"> <div id="dvChildDiv" cla ...

javascriptjqueryhtml

When I try to share a link to my website on Google Plus, the thumbnail does not appear

Previously, I encountered a similar issue on Facebook, but by utilizing the following tag, I was able to resolve it: <meta property="og:image" content="link to image" /> The dimensions of the image in the "link to image" are 200px x 200px, which me ...

facebookhtmlgoogle-plus