Develop interactive card collections in Bootstrap that adapt to different screen sizes

I am currently working on developing a responsive card deck using Bootstrap. The goal is to have the card deck display one card per row on mobile, 2 cards per row on tablet, and 3 cards per row on desktop.

Below is the snippet of the code I am using:

<div class="container">
<div class="card-deck">
    <div class="card mb-4">
        <img class="card-img-top img-fluid" src="//placehold.it/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 class="card mb-4">
        <img class="card-img-top img-fluid" src="//placehold.it/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 class="card mb-4">
        <img class="card-img-top img-fluid" src="//placehold.it/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 class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>  

</div>

The issue seems to be with the tablet display. Can anyone provide assistance?

csstwitter-bootstrapbootstrap-4

Answer №1

Check out this HTML code snippet:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-4 col-12">
                <div class="card-deck">
                    <div class="card mb-4">
                        <img class="card-img-top img-fluid" src="//placehold.it/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>
            // More similar card structures here
        </div>
    </div>
</body>
</html>

If you need more help, refer to the following link: https://getbootstrap.com/docs/4.0/layout/grid/

Answer №2

Give this code a try after incorporating Bootstrap v4.1.3 into your webpage by downloading it from the following link: https://getbootstrap.com/docs/4.1/getting-started/download/

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text</p>
    <a href="#" class="btn btn-primary">Go somewhere</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

I am experiencing the issue of unexpected borders showing up on the HTML/CSS page that I designed

Greetings, amazing community at StackOverflow! I recently completed an HTML/CSS Project as part of a Codecademy Intensive course. If you're curious to see the project in action, feel free to check it out on GitHub by visiting this link. One thing I ...

htmlcss

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

Creating custom themes in React Native using dynamically loaded JSON data

Is it possible in React Native to override custom styles with dynamically fetched font-size and background color values from a server's JSON data? I am looking to incorporate this JSON data theme into my style themes. Can you provide the syntax for cr ...

cssajaxreactjsreact-nativereact-redux

Left-aligned and centered - Bootstrap

I need help figuring out how to center a list of items on the page, but have them aligned left. I am using bootstrap. I want the text to be in the center of the page but aligned left. <ul class='text-center'> <li class=& ...

htmlcsstwitter-bootstraptext

Is it possible to operate a mobile site automatically alongside a desktop site?

I'm currently working on a website that looks fantastic on desktop, but doesn't quite function properly when viewed on mobile devices. I'm curious if there is a method or system I could implement to automatically load the mobile version of t ...

htmlcssresponsive-design

Exploring the dynamic world of Angular2 animations paired with the

In my layout, I have a row with three columns and two buttons to toggle the visibility of the side panels: col-md-3 col-md-7 col-md-2 ------------------------------------ | | | | | left | middle panel | | ...

csstwitter-bootstrapangularangular2-animation

Tips for positioning a Material UI Button and TextField side by side, perfectly aligned on the same line and height

I am currently working on aligning a <Button> from the Material UI library so that it is positioned at the same height as the <TextField> next to it and perfectly aligned with that field. Both the <Button> and the <TextField> are e ...

cssreactjsmaterial-ui

What is the best way to style divs in this manner?

Imagine you have a div with specific height and width (as shown in the illustration as the innermost one), and you wish for the outer divs to encompass it, with an outer margin of 1 em. How could this be achieved? +--------+ | +-----+| | |+---+|| | || ...

csshtml

Are you looking to test your website's performance under limited bandwidth conditions

Similar Query: How can I test a website for low bandwidth? Would it be possible to mimic a slow internet connection to test my website's performance? I need to simulate lower speed conditions in order to observe how the site behaves. ...

jqueryhtmlcss

What is the correct way to integrate a HTML/CSS/JS theme into a Vue project effectively?

As a newcomer, I recently acquired a bootstrap theme that comes with HTML, CSS, and JavaScript files. My goal now is to integrate this theme into Vue in order to make it fully functional. The challenge I am facing is how to successfully incorporate the the ...

javascripthtmlcssvue.js

Customize your Bootstrap 4 accordion cards with added margin and a sleek design without the usual bottom

After incorporating Bootstrap's accordion component, I made a custom adjustment by including spacing between the cards to achieve this layout (the - and + symbols were my addition and not important here): https://i.stack.imgur.com/5nRrP.png However, ...

htmlcssbootstrap-4

Creating horizontal card overflow with arrow navigation in Bootstrap 4.5: A step-by-step guide

Using Bootstrap, I've created a snippet that generates an overflow card that can be scrolled horizontally. <div class="container"> {{-- If you look to others for fulfillment, you will never truly be fulfilled. --}} <h4 class="mb- ...

phphtmlcsslaravelbootstrap-4

Trouble with CSS matching pattern - not functioning as expected

I am facing a requirement to customize the colors of ribbon styles instead of using the default ones. After researching pattern matching in CSS, I attempted the following code, but it did not work: This is my original CSS: .ms-cui-cg-**tl** .ms-cui-ct-f ...

css

Ways to demonstrate a specific attribute of the item included in the table

Currently, I am utilizing bootstrap vue and facing a challenge in passing relevant information to a component from the data being transferred to the table. <div> <b-table :items="guests" :fields="fields" : ...

bootstrap-4bootstrap-5bootstrap-vue

Is the HTML encoded character displaying strangely due to spacing issues?

I'm having trouble creating a link with a right chevron that has a larger font size. The issue I'm facing is that the right chevron appears to have excessive top margin, causing a significant gap between it and the line above. Additionally, I wa ...

htmlcss

Bug with the button and text input feature in Firefox

I am facing a strange issue where the button and input have the same CSS (except for the background), but Firefox is displaying them differently. This problem does not occur in IE or Chrome. #searchInput { width: 80%; margin: 0 auto; display: ...

htmlcssfirefoxbuttoninput

Unusual performance issues observed in a flexbox when adjusting window size in mobile Chrome

Encountering an unusual issue with flexbox on a mobile browser. For a visual demonstration, view this gif Specifically happening on Chrome mobile on a Google Pixel phone. Using a resize script to adjust element sizes due to limitations with 100vh: windo ...

javascriptcssmobileflexboxvue.js

The HTML content I created is too large for the screen and is extending beyond its borders

The navigation bar and footer on my HTML page adjust themselves according to the screen width, but the main content is not adjusting properly. I tried using a media query for mobile resolution (517px), but when I tested it on a PC with a smaller screen wi ...

htmlcssoverflow

Can applications on Windows 8 operate using JavaScript, HTML5, and CSS3 that adhere to industry standards?

As a .NET developer, I tuned in to the keynote for the Build Event in Anaheim, California and had some questions regarding the new support for creating Windows 8 applications using JavaScript, HTML5, and CSS3. They showcased several examples and mentioned ...

javascripthtmlcsscross-platformwindows-8

Tips for aligning an element to the bottom of its container

Can you please make some major edits and then re-open? I am currently developing a page using Bootstrap 2.3.2, which will eventually serve as a template for Joomla 3.x. Within the header section, I have successfully positioned 6 elements as per the desi ...

htmlcsstwitter-bootstraptwitter-bootstrap-2