Create a stylish card layout using Bootstrap featuring a 3D icon design

I am currently working on accomplishing this layout using Bootstrap 4 along with some custom CSS styles.

https://i.sstatic.net/t3tot.png

This is the code I have implemented so far:

<div class="container">
        <div class="row">
            <div class="col-4">
                <div class="card">
                    <div class="card-header d-flex justify-content-around">
                        <div class="card-icon">
                            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                        </div>
                        <div class="card-category">
                            <p>Used Space</p>
                            <h3>49/50</h3>
                        </div>
                    </div>
                    <div class="card-body ">

                    </div>
                    <div class="card-footer text-muted">
                        2 days ago
                    </div>
                </div>
            </div>
        </div>
    </div>

Despite my efforts, I am struggling to achieve the desired outcome as I am new to CSS and Bootstrap.

htmlcssbootstrap-4

Answer №1

.custom-card {
  width: 300px;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  background-color: #f9f9f9;
  position: relative;
}

.icon {
  background-color: #FF4500;
  border-radius: 10px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
  position: absolute;
  top: -30px;
  left: 25px;
}

.used-space {
  font-size: 32px;
  font-weight: bold;
  margin-top: 35px;
}

.label {
  font-size: 16px;
  color: gray;
  margin-bottom: 25px;
}

.alert-warning {
  font-size: 16px;
  color: red;
}
<div class="container mt-5 d-flex justify-content-center">
    <div class="custom-card">
        <div class="icon">📄</div>
        <div class="used-space">49/50 GB</div>
        <div class="label">Used Space</div>
        <div class="alert-warning">⚠️ Need More Space...</div>
    </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

Scrolling effect made with CSS for displaying a carousel of logos

Seeking assistance in creating a LOGO slider that seamlessly transitions at the end. I have resorted to duplicating a section to ensure continuous movement. I opted for using the translateX value for the animation effect. .box { width: 600px; //ove ...

htmlcss

Enhance your JQuery skills by implementing variables within the .css() function

Attempting to randomly assign values to an image's left and right properties using JQuery. Here is the code snippet: var sides = ["left", "right"] var currentSide = sides[Math.floor(Math.random() * sides.length)]; $("#"+currentImage).css({currentSide ...

javascriptjquerycss

Is there a way to retrieve JSON data from a different domain and incorporate it into my own website?

I am attempting to utilize JSON data from "" and display the data on my website. My goal is to extract the JSON field name "Stats" and retrieve the sub-field name '\"v\"'. You can refer to the documentation provided by purpleair here: h ...

javascriptphphtmljson

Add two columns for mobile devices in the Woocommerce platform

How can I display 2 columns of products in my Woocommerce shop using a child theme based on 'Shopisle'? Is a CSS-only solution the best approach for this task, and will it work smoothly without any bugs? I suspect that the theme is built on Boot ...

csswordpresswoocommerce

The div's width shifts upon reaching the top of the page

Creating a blog site example and trying to lock the position of a div once it reaches the top of the page. Utilizing materialize.css for this task. <div class="row"> <div class="col m8 s12"> <!-- content goes here --> < ...

javascripthtmlcss

What is preventing my HTML/CSS code from generating a button on the webpage?

There seems to be an issue with the image on my webpage - it's displaying a broken page icon instead of the actual image, even though it was showing fine before. The image name and location have not been changed. I'm also having trouble creating ...

htmlcssimage

What is the best way to include a class with Knockout JS?

After going through the basic Knockout tutorial and examining various examples, I decided to try it out myself on jsFiddle. However, I encountered some issues as my attempts did not quite work. The goal is simple - I just want to add the class open to a d ...

javascripthtmlknockout.js

Modify the height using JavaScript and then revert back to the initial CSS height

Looking for assistance with a JavaScript issue that I'm currently facing. Q1: Javascript Function to Return Image Height and Margin My website layout consists of a horizontal scroll of smaller images arranged in a grid, each with different height pe ...

javascriptjqueryhtmlcssheight

Struggling to align materialUI input or textfield horizontally

import {Input} from 'material-ui'; import Select from 'react-select'; I've been trying different ways to adjust the margins and padding, even wrapping them in divs, but I can't seem to get Material UI textfield or input alig ...

cssreactjsmaterial-ui

Having difficulty reaching a div element using either its id or class in a CSS stylesheet

I'm having trouble adding padding to the home section div and I can't seem to access it using either the id or class. Any suggestions on how to solve this issue would be greatly appreciated. Below is the CSS code: body { margin: 0 ; font ...

htmlcssbootstrap-4

Coloring a table in vue.js based on performance rankings

I'm facing an issue with sorting my data performance in vue js. Here is the script I have created so far: <template> <div> <div class="row"> <h2> Campaign Performance </h2> <table class=&q ...

javascripthtmlvue.js

repeating the identical content in the same setting

I am encountering an issue with jquery as I have 2 different sets of icons, each of which I want to do the same thing: My primary codes are <ul> <li> <a href=""> <i class="fa fa-facebook"></i> ...

javascriptjqueryhtmlcss

Revamp the Bootstrap Carousel Control by replacing the default navigation arrows with stylish arrows featuring circle backgrounds

Looking to update the appearance of the carousel icons in Bootstrap 4? How about changing them from simple arrows to arrows with dark semi-opaque circles underneath? If you're wondering how to achieve this modification, keep in mind that the icons ar ...

csssvgbootstrap-4

What is the best way to set the keyframes CSS value for an element to 0%?

Would like to create a progress indicator div using CSS animations? Check out the JSBin link provided. The desired behavior is to have the div width increase from 30% to 100% when the user clicks on stage3 after stage1, rather than starting from 0%. Althou ...

javascriptcsshtmlcss-animations

How can I use jQuery to merge the values of two <h> tags?

There are two <h4> tags, one with a price and the other with a percentage value. I need to calculate the percentage and display it in a new <h4> tag. My previous attempts at calculation resulted in NaN. Even using alert(parseFloat(price)+parseF ...

javascriptjqueryhtml

Adjusting the cell size to align with the height of another cell in the same row

Within a table row, I have two cells that contain divs and the height varies due to changing content. Is there a way for one cell to take up 100% height to match the other cell? You can see an example here. The goal is for the second cell and its div to ...

htmlcsscss-tables

What are the steps to apply material-ui's error-themed style (color) to non-form text?

When it comes to using error styles for form inputs like text fields, the documentation is straightforward. But what about applying the same style to a custom element, such as a text label for a file upload button or another unique component that doesn&apo ...

cssreactjsmaterial-ui

Steps for submitting a form using Bootstrap 4

Hi there! I'm struggling to get this form to function properly by sending data to my email address. I have included bootstrap.js, bootstrapjquery.js, and popper.js in my setup. I was hoping to find a solution within this code snippet that allows the ...

javascriptjqueryhtmlcssbootstrap-4

What is the best way for a client to showcase a constantly fluctuating server-side variable's value?

On my website's homepage (index.html), I want to show a dynamic server-side global variable called serverVariable. This variable is always changing based on the node.js server-side code. However, since the client doesn't know what serverVariable ...

javascripthtmlnode.js

A dynamic input field will appear on the page following the closing </form> tag

I encountered an unusual situation where upon clicking a button with the id #fusk, dynamic elements are added. Here is the code snippet: $('#imgc').append( "<div class='divi'>" + "<input type='hidden' name=' ...

javascriptjqueryhtml