Implement a dynamic card display using Bootstrap to ensure optimal responsiveness

Does anyone know how to create a card view using Bootstrap in HTML and CSS?
https://i.sstatic.net/3hIsf.png

I've been trying to replicate the image above with no success. Here is the code I have so far:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cardview">
    <div class="card">
        <div>
            <div class="numbers">94%</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div>       
    <div class="card">
        <div>
            <div class="numbers">193</div>
            <div class="percentage">6% since last year</div>
        </div> 
    </div>
    <div class="card">
        <div>
            <div class="numbers">13%</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
    <div class="card">
        <div>
            <div class="numbers">24.5</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div>
    <div class="card">
        <div>
            <div class="numbers">13%</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
    <div class="card">
        <div>
            <div class="numbers">24.5</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
</div>

Any assistance would be greatly appreciated.

htmlcssbootstrap-4

Answer №1

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col-6 p-2">
          <div class="card">
              <div>
                  <div class="numbers">94%</div>
                  <div class="percentage">6% since last year</div>
              </div>                
          </div>  
        </div>
        <div class="col-6 p-2">
          <div class="card">
              <div>
                  <div class="numbers">193</div>
                  <div class="percentage">6% since last year</div>
              </div> 
          </div>
        </div>
        <div class="col-6 p-2">
          <div class="card">
              <div>
                  <div class="numbers">13%</div>
                  <div class="percentage">6% since last year</div>
              </div>                
          </div> 
        </div>
        <div class="col-6 p-2">
          <div class="card">
              <div>
                  <div class="numbers">24.5</div>
                  <div class="percentage">6% since last year</div>
              </div>                
          </div>
        </div>
      </div>
    </div>
    <div class="col-6 p-2">
      <div class="card h-100">
          <div>
              <div class="numbers">13%</div>
              <div class="percentage">6% since last year</div>
          </div>
      </div>
    </div>
    <div class="col-3 p-2">
    <div class="card">
        <div>
            <div class="numbers">24.5</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
    </div>
    <div class="col-3 p-2">
    <div class="card">
        <div>
            <div class="numbers">24.5</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
    </div>
    <div class="col-3 p-2">
    <div class="card">
        <div>
            <div class="numbers">24.5</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
    </div>
    <div class="col-3 p-2">
    <div class="card">
        <div>
            <div class="numbers">24.5</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
    </div>
  </div>
</div>

Answer №2

You might find it helpful to utilize the Bootstrap card view generator for crafting your card designs!

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

Adjusting the height of a vertical slider in Vuetify2 is not customizable

I've been trying to adjust the height of a vertical slider in vuetify2, but setting it to "800px" or using style="height:800px" doesn't seem to work as intended. Even though the box within my grid expands, the height of the slider remains unchan ...

javascriptcssvue.jsvuetify.js

Styling the arrow of a CSS select box

Is it possible to place a dropdown arrow inside a select box? I have tried, but the arrow always displays behind the select box. How can I modify the CSS code to position the arrow properly inside the select box? .form-item-custom-search-types::before { ...

htmlcss

Creating a unique look for SELECT (Option) tags using gradients and a personalized arrow design

Feel free to check out my full HTML code here. You can simply copy and paste it into a demo document on your local machine to see exactly what I'm talking about. My goal is to style the boxes to include both a gradient background AND a unique arrow o ...

cssdrop-down-menugradient

What could be causing this `even` function to malfunction when utilizing getElementById?

Need assistance with utilizing document.getElementById? Let's take a look at this code snippet: function even() for (i = 0; i < 10; i++) { if (i % 2 == 0) { alert(i); } } document.getElementById("even").innerHTML = i + &apos ...

javascripthtml

Bootstrap Progress Animation Not Scaling Properly

I am encountering an issue with my Bootstrap 2.3 progress bars. They are supposed to show async file reads and be animated by updating their CSS properties using jQuery. However, the problem I'm facing is that the scale seems to be off - when the prog ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the HTML code to display a table and a video/image side by side?

I'm facing a challenge while trying to create a website. I want to place a table in the center of the page, with videos on either side of it. However, whenever I attempt this, the table ends up below the videos instead of being aligned with them. I&ap ...

javascripthtmlcssfrontendvisual-glitch

JQuery is having trouble with playing multiple sound files or causing delays with events

I've been working on a project that involves playing sounds for each letter in a list of text. However, I'm encountering an issue where only the last sound file is played instead of looping through every element. I've attempted to delay the ...

javascriptjqueryhtmlaudiosettimeout

The position of the scroll bar remains consistent as you navigate between different websites

Is it possible for me to click on a link within my HTML website and have the other website load with me in the exact same position? For example, if I'm halfway down a webpage and click a link, can I be taken to that same point on the new page? If so, ...

javascriptjqueryhtmlcss

"Combining the powers of Ajax, jQuery, and PHP

I have developed a jQuery form that looks like this <div data-role="page" id="page3" data-theme="d" > <div data-role="header"> <h1 style="font-family: 'Open Sans Condensed', sans-serif;font- size:23px">LetsAllSave</h1> ...

phpjqueryajaxhtmljquery-mobile

center the view on the specified element

Utilizing ReactJs, I am developing a horizontal timeline that showcases dates. For instance, there is a list of 100 elements, each containing a date and text content. The dates are displayed horizontally using flex-direction="row" and overflowX ...

javascripthtmlcssreactjs

What is the process for creating a button click listener event in Kotlin or JavaScript?

While working in IntelliJ IDEA, I have created a button in my HTML file with an ID. My goal is to change the header tag to say "button clicked" using Kotlin. After searching through kotlinlang.org and other resources, I am struggling to find a simple refe ...

javascripthtmlintellij-ideakotlinkotlin-js-interop

When jQuery updates the content, the div content disappears temporarily

I am currently using jQuery to generate HTML by fetching data from a JSON file. Below is the code snippet where I create the HTML: $(document).ready(function () { $('#searchForm').submit(function () { var entry= $("#searchFo ...

javascriptjqueryhtml

Adding CSS styles to an HTML page using JavaScript

Unfortunately, I do not have the ability to access the HTML directly as it is generated dynamically by a program. However, I do have access to the JS page that is linked to it. As an example, I am able to manipulate elements using JavaScript like so: ...

javascripthtmlcss

Adding specific tag attributes to user input in PHP

When accepting user input for a post, I want to allow users to include <a href=""></a> tags. However, I need to insert a class like <a class="user" href=""></a> if any <a> tag is included in the post before saving it to the da ...

phphtmlanchor

Difficulty in showcasing error on the website with JavaScript

I have recently developed a webpage that includes several input boxes and a submit button within a form as shown below: <form action="" method="post" name="password"> Upon clicking the submit button, a JavaScript function is triggered to validate i ...

javascripthtml

What is the best way to display the element from a list with a distinct identifier using Thymeleaf within a Spring Boot application?

In my entity class, I have an array list that stores a list of enrolled students. Clicking the student button will display the list of enrolled students. Check out the enroll student page in the screenshot below. However, when clicking on another button to ...

javahtmlspring-bootthymeleaf

Hide other dropdown when one dropdown is clicked

I am currently working with a dropdown data-filter in combination with the isotope plugin. My goal is to have the ability to close an open dropdown when another list item is clicked, and also have the arrow twirl down when the dropdown is open. I am seek ...

javascriptjqueryhtmldrop-down-menu

An empty space separating the header and the navigation bar

As a beginner in HTML and CSS, I decided to create a basic website. However, I encountered an issue with the layout - there seems to be a gap between my header image and navigation bar, but I can't figure out what's causing it. HTML <!DOCTYPE ...

htmlcss

Instead of stacking neatly, the Bootstrap rows are overlapping each other

I am currently working on a webpage design using bootstrap. The layout consists of different sections, each containing a bootstrap row within a container. However, I encountered an issue where new rows are not appearing below the previous row as expected, ...

htmlcssfrontendbootstrap-5

Is there a way for me to perfectly align the image and the h1 header on the webpage?

I'm facing some challenges when it comes to aligning an image and an h1 tag on the same line. I've already tried using display: inline and inline-block, but they only affect the container of the two elements. I also set the width to 100% on the s ...

htmlcsscss-position