im trying make a card like this:
Example Card
but, i can't to do that the items are on the bottom:
My Card
Code:
<div class="container">
<div class="row row-cols-1 row-cols-md-2 g-3 my-3">
<div class="col">
<div class="card text-uppercase">
<img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">FUNCIONAL</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col">
<div class="card text-uppercase">
<img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">FUNCIONAL</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col">
<div class="card text-uppercase">
<img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">FUNCIONAL</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col">
<div class="card text-uppercase text-bg-dark">
<img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">FUNCIONAL</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
I tried with d-flex and flex-column in class="card-img-overlay" and mt-auto en class="btn" but don't work
You could add the following built-in classes into .card-img-overlay element:
d-flex flex-column align-items-start justify-content-end
Here the reference: https://getbootstrap.com/docs/5.3/utilities/flex/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="card text-uppercase text-bg-dark" style="width: 500px;">
<img src="https://rb.gy/18mzdx" class="card-img" alt="...">
<div class="card-img-overlay d-flex flex-column align-items-start justify-content-end">
<h5 class="card-title">FUNCIONAL</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
Go somewhere
</div>
</div>
Related
I want to align the "demo" and "github" button group to the bottom left of the card, I don't want it to move with the amount of text written in tag. Please help. I am using HTML, CSS, and Bootstrap 5.
I did try vertical alignment, and justify content but, maybe I used it wrong. Please help.
The photoshopped image below is the where I want the 'demo' and 'github' button group to be placed irrespective of the length of content in <p> tag
Here is my code
With the footer
You just need to utilize the .card-footer, see card layout section of the docs.
Here is an example using .card-footer.bg-white.border-0 as a wrapper around your .btn-group:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row row-cols-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer bg-white border-0">
<div class="btn-group">
button
button
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer bg-white border-0">
<div class="btn-group">
button
button
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer bg-white border-0">
<div class="btn-group">
button
button
</div>
</div>
</div>
</div>
</div>
About Me Webpage with menu.css stylesheet
How do I get the body to conform to the grid function to result in this layout?
Hey i would use bootstrap 5.1 for gridlayouts. Here is an example code for a gridlayout
Here is the website of bootstrap and how to use it : https://getbootstrap.com/docs/5.1/getting-started/introduction/
<div class="container mx-auto height">
<div class="row">
<div class="col-12 col-md-8 mt-2">
<div class="article card">
<div class="card-body bg-light">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 col-md-4 mt-2">
<div class="article card">
<div class="card-body bg-light">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<div class="container mx-auto height">
<div class="row">
<div class="col-12 col-md-4 mt-2">
<div class="article card">
<div class="card-body bg-light">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 col-md-8 mt-2">
<div class="article card">
<div class="card-body bg-light">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<div class="container mx-auto height">
<div class="row">
<div class="col-12 col-md-4 mt-2">
<div class="article card">
<div class="card-body bg-light">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 col-md-4 mt-2">
<div class="article card">
<div class="card-body bg-light">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 col-md-4 mt-2">
<div class="article card">
<div class="card-body bg-light">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
I am using Tailwind with React and I have a grid that looks like this currently.
<div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 place-items-center gap-4">
{cards.map((card) => (
<div
className="h-[auto] w-[320px] px-2 pt-2 pb-4 rounded-md border-2 border-gray-200"
key={card.id}
>
<div className="relative rounded-xl overflow-hidden">
<img src={card.image} alt="fund1" />
<div className="absolute top-4 uppercase right-4 leading-tight font-bold w-[70px] h-[70px] flex items-center justify-center bg-white text-black rounded-full text-[11px] text-center">
Discover your match
</div>
</div>
<article className="px-2">
<h2 className="font-bold text-[25px] hover:text-[#6D9886] transition-colors cursor-pointer my-4">
{card.topic}
</h2>
<p className="font-light text-[14px]">{card.text}</p>
<button className="block mx-auto text-[#6D9886] mt-6">
Read more
</button>
</article>
</div>
))}
</div>
Now, The height of the cards is not balanced from top as I want it straight. Also from bottom of the cards, I want the other cards to adjust as soon as one's height ends.
Here is what I want to achieve:
I have tried setting differed columns and rows properties from grid but no luck.
If you are using Bootstrap you will get
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
</div>
</div>
</div>enter code here
</div>
or if you are using simple css just give a class and give that class to every part
When I put a card inside of a row the image disappears and when its outside the row the image appears. Have no idea why. When its outside the row it shows.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container" id="mainContainer">
<div class="row mt-5 custom-row2 p-5 align-items-center">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider 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>
</div>
</div>
I need to arrange some cards, in a web page with Boostrap 4.
Can you help me?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 03
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 04
</div>
</div>
</div>
</div>
I'm Tried to make bootstrap 4 card like a below image , but my card is not perfect, any idea for how to do correctly this one?
My code:
<div class="row">
<div class="col-md-12 ">
<div class="row">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
</div>
</div>
</div>
You can try as below snippet in Bootstrap-v4.
[Check on Full Page]
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container py-3">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-3 py-3">
<div class="card text-white bg-primary h-100 rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-8 col-lg-9">
<div class="row">
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You should use container and row which based bootstrap grid system. To makes sure your cards are placed right position, Here my sample code (Please run as full screen) the result should be like this image
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<div class="container" style="width: 1240px !important; max-width: 960px !important;">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem; height: 100%">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</div>
</body>
If I understand correctly, you can use flex classes to achieve what you described.
<style>
.box-1 {
width: 100px;
height: 100px;
border: 1px solid red;
margin-bottom: 10px;
}
.box-2 {
width: 200px;
height: 210px;
border: 1px solid red;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="d-flex">
<div class="mr-3">
<div class="box-2">card 01</div>
</div>
<div class="d-flex">
<div class="mr-3">
<div class="box-1">card 02</div>
<div class="box-1 mb-0">card 05</div>
</div>
<div class="mr-3">
<div class="box-1">card 03</div>
<div class="box-1 mb-0">card 06</div>
</div>
<div>
<div class="box-1">card 04</div>
<div class="box-1 mb-0">card 07</div>
</div>
</div>
</div>
</div>
</div>
</div>
You should refer the grid system of bootstrap
(Run as full size)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container p-5">
<div class="row">
<div class="col-md-3">
<div class="card text-white bg-primary h-100 p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To get that grid system you will need to create a grid of your own. You can do this with columns and rows. You can have columns inside of rows, and move each column or row to where you want it. I outlined the basic structure in the snippet below (I used some sample content from G.W Kalpa Sathjana De Silva's code)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container p-5">
<div class="row">
<div class="col-md-3">
<div class="card text-white bg-primary h-100 p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>