I have a card which looks like this
I'm wondering if it would be possible to change the gray head part to be the picture that's inside of it right now.
My HTML code
<div class="card-set">
<div class="card-deck">
<div class="card">
<div class="card-header">
<img src="../../img/boxA.jpeg" style="width: 300px;">
</div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-header">
<img src="../../img/boxB.jpeg" style="width: 300px; height: 70px;">
</div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-header"></div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-header"></div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
</div>
</div>
If you’re asking if the image can fill the full size of the card-header, yes, if you set the padding to 0, hide the overflow (the overflow is so the image corners follow the header border-radius), and set the image to 100% width.
<div class="card-set">
<div class="card-deck">
<div class="card">
<div class="card-header overflow-hidden p-0">
<img class="w-100" src="boxA.jpg" >
</div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-header">
<img src="boxB.jpg" >
</div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
</div>
</div>
You don’t have any rows or columns in your sample, so the width will expand to fill the available space (and the image will adjust accordingly).
Related
I have this Stackblitz and the Stackblitz Url that has 2 bootstrap cards inside a page layout with columns.
Problem - With the Name (.card-title) of the card being greater than 11 characters longs (max 15), when I shrink the screen between 768px-1200px the name at the top of the card squishes the star/rating down to the next line.
Question - Is there a way to truncate the name (ex. AnneMariesPlace) between 768px-1200px with ellipses, so that the star/rating remains on the same line?
ex. AnneMari...
This would mean the max length would be 8 plus the ellipses (3 chars)
Can it be done with pure CSS using?
FYI - I tried a couple of things with text-overflow: ellipsis; and white-space: nowrap;
but I didn't have much luck.
Here is the code I'm using
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container my-3 my-xl-5">
<div class="row">
<div class="col-lg-3">
something here
</div>
<div class="col-lg-9">
<div class="row">
<div class="col">
<div class="mb-4">
</div>
<div class="row row-cols-1 row-cols-sm-2">
<div class="col mb-4">
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img class="yogaband-img img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1450,h_1450/f_auto/v1569538700/mainpage/iStock-860080282_bkhfsu.jpg" alt="yogaband">
</div>
<div class="col-md-7">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<b class="card-title d-inline">AnneMariesPlace</b>
<span class="float-right center-star">
★3.43
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">Private</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Events</span>
<span class="float-right">323</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">Park</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img class="yogaband-img img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1450,h_1450/f_auto/v1569538700/mainpage/iStock-860080282_bkhfsu.jpg" alt="yogaband">
</div>
<div class="col-md-7">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<b class="card-title d-inline">AnneiMaries</b>
<span class="float-right center-star">
★3.43
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">Private</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Events</span>
<span class="float-right">323</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">Park</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To make ellipsis work you need conditions. First, the element must NOT be inline. Yours it is even with an !important condition (which I don't know why you set it), second it needs a width set (it does not matter if percent or fixed) and last, it needs overflow:hidden and white-space:nowrap (so the content won't ever take a second line).
Basically, and based on your example, you need this:
.d-inline {
display: inline-block;
overflow: hidden;
width: calc(100% - 44px);
white-space: nowrap;
}
Unfortunately, it looks like your "score" will never get more width space than 44px. Use a bit more to feel safe just in case (browser zooming and such.)
What I want - I'm using Bootstrap grid cards to create two cards in a row that are aligned horizontally on wider screens both with equal height. I want to keep the 1st image (col-md-4, col-md-8) and make the 2nd image (col-md-5, col-md-7) to show more of the image in the card, but when I do this the 2nd cards image gets taller in height. You can see this in the Stackblitz and image below.
Problem - The 1st image is a 1:1 and the second image is a 16:9 and I want more of the 2nd image (16:9) showing (wider) in the 2nd card. But increasing the column size in the second image increases the height, which is not what I want.
Stackblitz - component, url
What have I tried - I can and have created 2 cards both using a horizontal placement in the card using a row and columns (col-md-4, col-md-8), which makes the images both equal height. I used a class of "h-100" on each card. But when I change the columns of the second image to (col-md-5, col-md-7) to show more of the image, the card increases in size making the 1st card not sized correctly.
I guess another way I can say it is, I don't want the images expanding higher than the text (right side column).
Here is an image from my Stackblitz. The top row is what I have with equal columns for each image and the bottom row is when I increase the size of the column for the 2nd image. Note - I don't want the height to increase, just the width.
Here is the code I'm using.
<div class="container my-3 my-xl-5">
<div class="row">
<div class="col-lg-3">
some text
</div>
<div class="col-lg-9">
<div class="py-2">
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-4">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>
<div class="col-md-8">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Brad</h5>
<span class="float-right center-star">4.4</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Level</span>
<span class="float-right">3</span>
</div>
<div class="col-12">
<span>Experience</span>
<span class="float-right">Expert</span>
</div>
<div class="col-12">
<span>Instructed</span>
<span class="float-right">14</span>
</div>
<div class="col-12">
<span>Education</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-4">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
</picture>
</div>
<div class="col-md-8">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Park</h5>
<span class="float-right center-star">
3.4
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">None</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Hosted</span>
<span class="float-right">2</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-2">
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-4">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>
<div class="col-md-8">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Brad</h5>
<span class="float-right center-star">4.4</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Level</span>
<span class="float-right">3</span>
</div>
<div class="col-12">
<span>Experience</span>
<span class="float-right">Expert</span>
</div>
<div class="col-12">
<span>Instructed</span>
<span class="float-right">14</span>
</div>
<div class="col-12">
<span>Education</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-5">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
</picture>
</div>
<div class="col-md-7">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Park</h5>
<span class="float-right center-star">
3.4
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">None</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Hosted</span>
<span class="float-right">2</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Targetting the image column of the card by creating a class works for me.
for example,
1# Here is the HTML for a card.
<div class="col mb-4 bg-green1">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-4 my-custom-class">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>
<div class="col-md-8">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Brad</h5>
<span class="float-right center-star">4.4</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Level</span>
<span class="float-right">3</span>
</div>
<div class="col-12">
<span>Experience</span>
<span class="float-right">Expert</span>
</div>
<div class="col-12">
<span>Instructed</span>
<span class="float-right">14</span>
</div>
<div class="col-12">
<span>Education</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2# I created a class my-custom-class to target the image area.
<div class="col-md-4 my-custom-class">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>
3# Here is the CSS property I wrote
.my-custom-class{
min-height: 130px;
overflow: hidden;
}
NOTE: It doesn't make any issue in the responsiveness of the card.
Result
Desktop Version
Responsive Version
I am trying to develop a grid of cards using rows and columns.
Since I started using bootstrap, I always had doubts about how to use the column breakpoints correctly. I intend that in desktop size, it will have three columns, but in mobile size, these three columns will "become" just one.
Does anyone know how I can configure breakpoints in order to get just everything in one column, in mobile size?
DEMO
.html
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row" style="height:50%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
<div class="row" style="height:calc(50% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row" style="height:25%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
<div class="row" style="height:calc(75% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body">
dayly
</div>
</div>
</div>
</div>
</div>
</div>
Problem
I set the moblie size and get 3 columns, how can I get everything in just one column and occupying the entire screen?
Instead use col-sm on the columns...
<div class="row">
<div class="col-sm">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col-sm">
<div class="row">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
<div class="col-sm">
<div class="card" style="height:100%">
<div class="card-body"> This is some text within a card body. </div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col-sm">
<div class="card">
<div class="card-body"> a </div>
</div>
</div>
<div class="col-sm">
<div class="card">
<div class="card-body"> s </div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="card">
<div class="card-body"> s </div>
</div>
</div>
<div class="col-sm">
<div class="card">
<div class="card-body"> Ta </div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 16px;">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="row" style="height:50%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
<div class="row" style="height:calc(50% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="row" style="height:25%">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
<div class="row" style="height:calc(75% - 16px); margin-top:16px">
<div class="col">
<div class="card" style="height:100%">
<div class="card-body"> dayly </div>
</div>
</div>
</div>
</div>
</div>
https://codeply.com/p/DPFuoonZgF
Also, you can use the padding utils (ie: pb-3) on some of the columns to create vertical spacing on mobile.
This is 1 column on mobile & 3 columns otherwise, based on a 12 column grid.
<div class="col-12 col-md-4">...</div>
The instruction is - fill all 12 columns by default (mobile first), and fill 4 of the columns otherwise.
I think your issue may come from nesting cols within cols, so for simplicity I've reduced this to just one level deep:
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<div class="card">
<h1>Card 1</h1>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<h1>Card 2</h1>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<h1>Card 3</h1>
</div>
</div>
</div>
</div>
Codepen here.
https://getbootstrap.com/docs/4.0/layout/grid/
I have this layout made with bootstrap each witdth is 4 units
This is what im trying to achive
Basically I want last elements to stretch to fill.
If there were only four elements last one should be full width.
My attempt
I tried to add flex-fill and flex-grow-1 to each column but it doesn't seem to change anything.
Can I achive this effect whithout js?
Code
<div class="container">
<div class="d-flex justify-content-around row">
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Assuming you want the default columns to have width 4, like col-md-4, I can suggest the following approach:
Do not specify column width in the HTML and justify the content evenly:
<div class="container">
<div class="d-flex justify-content-evenly row">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Then set the minimum size of all columns:
.my-2 {
flex-basis: 33.3%;
min-width: 33.3%;
}
Use equal-width utility of bootstrap. Divide the area in 2 rows with same width (col-md-8 here) and then place as many divs of equal width.
Sample below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="d-flex justify-content-around row">
<!-- row-1 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
</div>
<!-- row-2 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
You can create using 'Equal-width', for more details go through the Bootstrap 4 Grid System.
https://getbootstrap.com/docs/4.0/layout/grid/#equal-width
Bootstrap comes up with a lot of different solutions to achieve multiple views. What you've been trying so far was almost correct. However, your last col ist currently just looking a bit wrong. You might exchange your last cols classes by the following.
<div class="my-2 col flex-grow">
This does simply 2 things.
Using col you're letting flexbox decide how much space to take
Adding flex-grow you're telling flexbox to use and fill up any left space
This question already has an answer here:
Bootstrap 4.0 Grid System Layout not working
(1 answer)
Closed 4 years ago.
My page has three cards in it as shown in image 1. The cards are not the same width in columns 1. When testing it on the mobile (Chrome) they are all different widths and the bottom two cards are touching as shown in image 2.
How do I get the columns on the left to be the same width and maintain responsiveness and size when on mobile? I'm expecting uniform width and height on both web and mobile.
My code is:
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
<div class="col-lg-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">More Numbers</h6>
</div>
<div class="card-body" style="font-size: small;">
My Content
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Some stuff</h6>
</div>
<div class="card-body" style="font-size: small;">
My Content
</div>
</div>
</div>
</div>
Layout on web page:
The layout on mobile:
https://www.codeply.com/go/Fia8Y6YPNl
You're breaking the bootstrap rule of always having div.col-* being a child of a div.row. A div.col-* cannot be a direct child of another div.col-*. This is likely your issue.
Try this:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
</div>
<div class="col-md-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
</div>
</div>
</div>