My problem is that the property of card-deck (The .card-deck class creates a grid of cards that are of equal height and width. The layout will automatically adjust as you insert more cards.) does not seem to be applying.
This is the code:
<div class="container-fluid">
<div class="card-group">
<div class="card" id="col1m">
<div class="card-header text-center" style="color: #888" id="display1_title">CAUDAL abcdefghi (BPM)</div>
<div class="card-body text-center" id="col1">
<p class="card-text" style="font-family:roboto; font-weight: bold; color:#888" id="display1_value">0</p>
</div>
</div>
<div class="card" id="col2m">
<div class="card-header text-center" style="color: #888;" id="display2_title">VOL. TOTAL (BBL)</div>
<div class="card-body text-center" id="col2">
<p class="card-text" style=" font-family:roboto; font-weight: bold; color: #888" id="display2_value"> 0 </p>
</div>
</div>
</div>
</div>
You have a closing div at the end of your code with an opening div
here is your code working fine
https://codepen.io/growload/pen/QWwMybX?editors=1000
<div class="card-group">
<div class="card" id="col1m" >
<div class="card-header text-center" style=" color: #888" id="display1_title">CAUDAL (BPM)</div>
<div class="card-body text-center" id="col1" >
<p class="card-text" style=" font-family:roboto; font-weight: bold; color: #888" id="display1_value"> 0 </p>
</div>
</div>
<div class="card" id="col2m" >
<div class="card-header text-center" style=" color: #888 ; " id="display2_title" >VOL. TOTAL (BBL)</div>
<div class="card-body text-center" id="col2" >
<p class="card-text" style=" font-family:roboto; font-weight: bold; color: #888" id="display2_value"> 0 </p>
</div>
</div>
</div>
Related
So, basicly i have bootstrap cards in a for loop in flask. Everything works well, but when ever i pass 3 cards a new column starts and it gets really annoying.
Screenshot Example: https://ibb.co/jTvtSbq
Even the vertical spacing look pretty weird on the bottom.
Here is my HTML Code:
<div class="col">
<div class="card" id='cardPostPost' style="width: 400px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white; bottom: -22pc; left: -18pc; ">
<h5 class="card-header border-bottom border-light" style="color: white" >Teacher's Homework</h5>
<div class="card-body" style="color: white" >
<h5 class="card-title">Homework</h5>
<p class="card-text">No </p>
Learn More
</div>
</div>
</div>
<div class="col">
<div class="card" id='cardPostPost' style="width: 400px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white; bottom: -22pc; left: -18pc; ">
<h5 class="card-header border-bottom border-light" style="color: white" >SomeNewTask</h5>
<div class="card-body" style="color: white" >
<h5 class="card-title">Homework</h5>
<p class="card-text">Yes </p>
Learn More
</div>
</div>
</div>
<div class="col">
<div class="card" id='cardPostPost' style="width: 400px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white; bottom: -22pc; left: -18pc; ">
<h5 class="card-header border-bottom border-light" style="color: white" >wdaadadawdawdad</h5>
<div class="card-body" style="color: white" >
<h5 class="card-title">Test</h5>
<p class="card-text">Yes </p>
Learn More
</div>
</div>
</div>
<div class="col">
<div class="card" id='cardPostPost' style="width: 400px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white; bottom: -22pc; left: -18pc; ">
<h5 class="card-header border-bottom border-light" style="color: white" >wdadwadadadwadawdad</h5>
<div class="card-body" style="color: white" >
<h5 class="card-title">Test</h5>
<p class="card-text">Yes </p>
Learn More
</div>
</div>
</div>
</div>
</div>
Does anyone know how to fix this problem?
You have to make a parent <div class="col"> in every card.
Remove card width: 400px; bottom: -22pc; left: -18pc;
Full code below -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row row-cols-auto g-4">
<div class="col">
<div class="card" id='cardPostPost'
style=" border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header border-bottom border-light" style="color: white">Teacher's Homework</h5>
<div class="card-body" style="color: white">
<h5 class="card-title">Homework</h5>
<p class="card-text">No </p>
Learn More
</div>
</div>
</div>
<div class="col">
<div class="card" id='cardPostPost'
style=" border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header border-bottom border-light" style="color: white">SomeNewTask</h5>
<div class="card-body" style="color: white">
<h5 class="card-title">Homework</h5>
<p class="card-text">Yes </p>
Learn More
</div>
</div>
</div>
<div class="col">
<div class="card" id='cardPostPost'
style=" border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header border-bottom border-light" style="color: white">SomeNewTask</h5>
<div class="card-body" style="color: white">
<h5 class="card-title">Homework</h5>
<p class="card-text">Yes </p>
Learn More
</div>
</div>
</div>
<div class="col">
<div class="card" id='cardPostPost'
style=" border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header border-bottom border-light" style="color: white">SomeNewTask</h5>
<div class="card-body" style="color: white">
<h5 class="card-title">Homework</h5>
<p class="card-text">Yes </p>
Learn More
</div>
</div>
</div>
<div class="col">
<div class="card" id='cardPostPost'
style=" border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header border-bottom border-light" style="color: white">SomeNewTask</h5>
<div class="card-body" style="color: white">
<h5 class="card-title">Homework</h5>
<p class="card-text">Yes </p>
Learn More
</div>
</div>
</div>
<div class="col">
<div class="card" id='cardPostPost'
style=" border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header border-bottom border-light" style="color: white">Teacher's Homework</h5>
<div class="card-body" style="color: white">
<h5 class="card-title">Homework</h5>
<p class="card-text">No </p>
Learn More
</div>
</div>
</div>
<div class="col">
<div class="card" id='cardPostPost'
style=" border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header border-bottom border-light" style="color: white">Teacher's Homework</h5>
<div class="card-body" style="color: white">
<h5 class="card-title">Homework</h5>
<p class="card-text">No </p>
Learn More
</div>
</div>
</div>
<div class="col">
<div class="card" id='cardPostPost'
style=" border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header border-bottom border-light" style="color: white">Teacher's Homework</h5>
<div class="card-body" style="color: white">
<h5 class="card-title">Homework</h5>
<p class="card-text">No </p>
Learn More
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am newbie to Bootstrap and trying to create the 5 column grid system similar to Exiger, But it's not showing exactly like left and right gap.
I tried with the below code.
<div class="container" style="margin-top: 100px;">
<div class="row">
<div class="col-lg-4 col-sm-12 col-xs-12 col-md-12">
<div class="row">
<div class="col-lg-12 ">
<div class="card">
<div class="card-body ">
<h5 class="card-title">IT'S ALL ABOUT THE HOW</h5>
<hr class="hrmargin_b_10">
<h5 class="card-title">IT'S ALL ABOUT THE HOW</h5>
<hr class="hrmargin_b_10">
<p class="card-text">
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-12 col-xs-12 col-md-12" style="text-align: center;">
<div class="row">
<div class="col-lg-6 col-sm-12 col-xs-12 col-md-6 row_border" style="padding-left: 10px;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 30px;
min-height: 260px;
max-height: 260px;" >
<div class="card-body menuo-no-borders">
<img src="./images/exiger/3rd_part_risk#2x.gif" style="width:70px;height: 70px;">
<h5 class="card-title">CMMC Level 1</h5>
<p class="card-text" style="display: none;">
</p>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-xs-12 col-md-6 row_border" style="padding-left: 10px;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 30px;
min-height: 260px;
max-height: 260px;" >
<div class="card-body menuo-no-borders align-content-center">
<img src="./images/exiger/3rd_part_risk#2x.gif" style="width:70px;height: 70px;">
<h5 class="card-title">CMMC Level 2</h5>
<p class="card-text" style="display: none;">
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-12 col-xs-12 col-md-12" style="text-align: center;">
<div class="row">
<div class="col-lg-6 col-sm-12 col-xs-12 col-md-6 row_border" style="padding-left: 10px;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 30px;
min-height: 260px;
max-height: 260px;" >
<div class="card-body menuo-no-borders">
<img src="./images/exiger/3rd_part_risk#2x.gif" style="width:70px;height: 70px;">
<h5 class="card-title">CMMC Level 1</h5>
<p class="card-text" style="display: none;">
</p>
</div>
</div>
<div class="col-lg-6 col-sm-12 col-xs-12 col-md-6 row_border" style="padding-left: 10px;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 30px;
min-height: 260px;
max-height: 260px;" >
<div class="card-body menuo-no-borders align-content-center">
<img src="./images/exiger/3rd_part_risk#2x.gif" style="width:70px;height: 70px;">
<h5 class="card-title">CMMC Level 2</h5>
<p class="card-text" style="display: none;">
</p>
</div>
</div>
</div>
</div>
</div>
</div>
and the result is below picture. I am trying to set the borders to the left and right of the boxes but it's not working properly.
Any help on this?
What I want to achieve is that my DIV element is not cut off by the Print option. I have used the code BREAK-INSIDE: AVOID code and it doesn't work, in the end my DIV ends up sliced in half.
HTML
<block-ui></block-ui>
<div class="content-wrapper container-xxl p-0">
<div class="content-body">
<div class="card">
<div class="row">
<div class="col-xl-9 col-md-8 col-12">
<div class="row m-1">
<div class="m-1 dont-break" *ngFor="let QRID of printData.results">
<div class="d-flex align-items-center flex-column"
style="width: 4.5cm; height: 8cm; max-width: 4.5cm; border: 1px dashed #000000; padding: .25cm;">
<h6 class="mb-0" style="font-size: 10px;">Name:</h6>
<h6 class="mb-30">{{ QRID.proyecto }}</h6>
<img [src]="QRID.foto" style="height: 3.5cm; width: 3.5cm; margin-bottom: 7px;">
<ngx-qrcode-styling [config]="config" [type]="'canvas'" [shape]="'square'" [width]="110" [height]="110"
[margin]="0" [data]="QRID.qr">
</ngx-qrcode-styling>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-4 col-12 invoice-actions mt-md-0 mt-2">
<div class="card">
<div class="card-body">
<a class="btn btn-outline-secondary btn-block mb-75" href="javascript:window.print();" rippleEffect>
Print
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#media print {
div.dont-break {
break-inside: avoid !important;
page-break-inside: avoid !important;
-webkit-break-inside: avoid !important;
}
}
I am trying to do nested cards in my project, so basically I have three cards. The parent one Research Dashboard, the second one which holds the category ex. Recently Added Research and lastly, the third one or the third card which contains the image/card title and button. However, I am getting trouble when viewing it on a mobile browser. As you can see in the image the third card stretches up until the first card which is I do not like, the third card should only go to the second card which is Recently Added Research.
I've tried readjusting the width of the cards, but it gets destroy whenever I view it on the desktop browser which is I do not like.
<style>
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 0 auto;
float: none;
margin-bottom: 10px;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
body {
background-color: #003366;
}
</style>
</head>
<body>
<div class="container-fluid" style="padding-top: 50px;">
<div class="card">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Research Dashboard
</div>
<div class="card-body">
<div class="container-fluid" style="padding-top: 50px;">
<div class="row">
<div class="col">
<div class="card h-100">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Recently Added Research
</div>
<div class="card-body">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="admin/files/Images/pagenotfound.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Card title</h5>
<button class="btn btn-info justify-content-start">View </button>
<button class="btn btn-info align-items-end">View </button>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="admin/files/Images/pagenotfound.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Library Management System</h5>
<p class="card-text">Date added: <span>May 23, 2021</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is my ideal result. However, this image was a screenshot in desktop view.
try this
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 0 auto;
float: none;
margin-bottom: 10px;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
body {
background-color: #003366;
}
<div class="container-fluid" style="padding-top: 50px;">
<div class="card">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Research Dashboard
</div>
<div class="card-body">
<div class="container-fluid" style="padding-top: 50px;">
<div class="row">
<div class="col">
<div class="card h-100">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Recently Added Research
</div>
<div class="card-body">
<div class="row">
<div class="col">
<div class="card" style="max-width: 18rem;">
<img class="card-img-top" src="admin/files/Images/pagenotfound.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Card title</h5>
<button class="btn btn-info justify-content-start">View </button>
<button class="btn btn-info align-items-end">View </button>
</div>
</div>
</div>
<div class="col">
<div class="card" style="max-width: 18rem;">
<img class="card-img-top" src="admin/files/Images/pagenotfound.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Library Management System</h5>
<p class="card-text">Date added: <span>May 23, 2021</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have a page divided in half. On one side I have a giant box and on the other side I have a set of cards. When I inspect the page or increase / reduce its size, the cards are no longer responsive. The small cards are above the large box. The goal is that when they cross, the cards will go down.
Does anyone help me make this responsive?
Thank you very much
HTML
<div class="col-md-6">
<div class="row">
<div class="col-6">
<div class="card" style="margin-left: 16px; margin-right: 16px; line-height: 1;">
<div class="card-header header">
<h1> M </h1>
</div>
<div class="card-body">
</div>
</div>
</div>
<div class="col-6">
<div class="card" style="margin-left: 8px; margin-right: 16px;">
<div class="card-header header">
<h1> I </h1>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card card-small" style="margin-left: 16px; margin-right: 16px; margin-top: 16px;">
<div class="card-header header">
<h1> C </h1>
</div>
<div class="card-body" style="overflow: auto;">
</div>
</div>
</div>
<div class="col-6">
<div class="card card-small" style="margin-left: 8px; margin-right: 16px; margin-top: 16px;">
<div class="card-header header">
<h1> D </h1>
</div>
<div class="card-body" style="overflow: auto;">
</div>
</div>
</div>
<div class="col-6">
<div class="card card-small" style="margin-left: 16px; margin-right: 16px; margin-top: 16px;">
<div class="card-header header">
<h1> S </h1>
</div>
<div class="card-body" style="overflow: auto;">
</div>
</div>
</div>
<div class="col-6">
<div class="card card-small" style="margin-left: 8px; margin-right: 16px; margin-top: 16px;">
<div class="card-header header">
<h1> T </h1>
</div>
<div class="card-body" style="overflow: auto;">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.Title{
width: 150px;
height: 30px;
font-family: 'Noto Sans';
font-size: 20px;
letter-spacing: 0;
color: #4D4F5C;
}
.header{
width: 435px;
height: 40px;
background: #ECF2F9 0% 0% no-repeat padding-box;
border-radius: 8px 8px 0px 0px;
}
.header h1{
text-align: center;
font-family:'Noto Sans';
font-size: 14px;
letter-spacing: 0;
color: #4D4F5C;
}
The reason they aren't responsive is because you have the cards and the .drop item set to fix widths using px's. Try setting the width of the items using percentages.