I am creating a website that contains a horizontal bootstrap card and I want to fill the image to the full of the height of the left side of the horizontal card. Here are My codes!
<div
class="card mb-3 card_focus"
style="max-width: 60rem; height: 100%"
>
<div class="row no-gutters">
<div class="col-md-4">
<div
class="card text-white bg-primary mb-3 d-flex"
style="max-width: 100%; height: 20rem"
>
<div class="card-body">
<i class="fas fa-file-code"></i>
</div>
</div>
</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>
and my related CSS
#main_cont div div i {
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: clamp(70px, 6vw, 200px);
}
here is how it is looking right now:
A Froala design block will help you to understand the basic layouts. I hope it will be a good addition!
Example
Code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<section class="fdb-block">
<div class="col-fill-left" style="background-image: url(https://i.imgur.com/3U2Fd7P.jpg);">
</div>
<div class="container">
<div class="row justify-content-end">
<div class="col-12 col-md-5 text-center">
<h1>Froala Blocks</h1>
<p class="lead">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove</p>
<p class="mt-4">Learn More <i class="fas fa-angle-right"></i></p>
</div>
</div>
</div>
</section>
Add margin-bottom: 0% !important; to class="card text-white bg-primary mb-3 d-flex" like this:
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<title>Bright!</title>
</head>
<link rel="stylesheet" href="style.css">
<body bgcolor='#303030'link=" #ffbd59" vlink=" #ffbd59" alink=" #ffbd59">
<div
class="card mb-3 card_focus"
style="max-width: 60rem; height: 100%"
>
<div class="row no-gutters">
<div class="col-md-4">
<div
class="card text-white bg-primary mb-3 d-flex"
style="max-width: 100%; height: 20rem;margin-bottom: 0% !important "
>
<div class="card-body">
<i class="fas fa-file-code"></i>
</div>
</div>
</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>
</body>
</html>
Related
The section I am doing is just 6 cards, 3 cards in a row of 2. When the screen goes to small (mobile phone size) I want each card just to be on their own row. Each card showing one by one as the user scrolls.
It functions this way when I resize the screen however, when I go to google tools, it does not show my desired outcome.
.row {
padding: 4rem;
background-color: #F8F8FF;
border: 4px black;
colour: red;
}
.card {
background-color: #ddf;
padding: 30px;
margin: 20px;
transition: 0.40s;
}
.card:hover {
transform: scale(1.05);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container ">
<h1 class="display-4">My Projects/Work</h1>
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-4">
<div class="card" id="proj1">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_1" />
<div class="card-body">
<h5 class="card-title">Blog Project</h5>
<p class="card-text">
A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.
</p>
Click to see
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card" id="proj2">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_2" />
<div class="card-body">
<h5 class="card-title">Social media clone </h5>
<p class="card-text">
A social media clone with all the main features of a social media site such as Facebook.In order to achieve this I used Django and React.
</p>
Click to see
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card" id="proj3">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_3" />
<div class="card-body">
<h5 class="card-title">E-commence site</h5>
<p class="card-text">
This is a website I build for a small tech company in my local area that specialized in databases .
</p>
Click to see
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
</div>
</div>
You can put classes on "row" or "column" https://getbootstrap.com/docs/4.6/utilities/flex/#align-items
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<section class="bg-light pt-5 pb-5 shadow-sm">
<div class="container">
<div class="row pt-5">
<div class="col-12">
<h3 class="text-uppercase border-bottom mb-4">Bootstrap Responsive</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blog Project</h5>
<p class="card-text mb-4">A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.</p>
Click to see
</div>
</div>
</div>
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blog Project</h5>
<p class="card-text mb-4">A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.</p>
Click to see
</div>
</div>
</div>
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blog Project</h5>
<p class="card-text mb-4">A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.</p>
Click to see
</div>
</div>
</div>
</div>
</div>
</section>
I just created 4 card using bootstraps 4.5 version but the spacing is really bad and I do not know how to reduce the spacing of card you can the image if you still confuse
.card {
width : 55%;
min-height: 100;
margin: 2%;
}
.card-img-top {
height: 150px;
object-fit: cover;
}
.card-body{
box-shadow: 0 0 20px 7px rgba(0,0,0,0.1);
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card text-md-center">
<img src="Nike.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Shoes</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-md-center">
<img src="chevrolet.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Car</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-md-center">
<img src="asuslap.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Laptop</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-md-center">
<img src="asusphone.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Phone</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
</div>
I have searched it in google but I still not find it (How to reduce spacing of Card), maybe you can help me
If you don't problem about the width card, you can remove width : 55%; in your CSS. It would be better.
OR
You can change the value in every col-md class. The spacing the of every card is caused by that.
I added a flex-display to your .row class and justified everything in the center. Spacing looks fine to me.
.card {
width: 55%;
min-height: 100;
margin: 2%;
}
.card-img-top {
height: 150px;
object-fit: cover;
}
.card-body{
box-shadow: 0 0 20px 7px rgba(0,0,0,0.1);
}
.row {
display: flex;
justify-content: center;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card text-md-center">
<img src="Nike.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Shoes</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-md-center">
<img src="chevrolet.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Car</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-md-center">
<img src="asuslap.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Laptop</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
The Bootstrap way to do so is to dynamically adjust the column width depending on the width of the browser/screen. Do not set the width manually. Let the media query breakpoints do the job.
HTML
<div class="container">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<div class="card text-md-center">
<img src="http://placehold.jp/320x180.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Shoes</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="card text-md-center">
<img src="http://placehold.jp/320x180.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Car</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="card text-md-center">
<img src="http://placehold.jp/320x180.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Laptop</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="card text-md-center">
<img src="http://placehold.jp/320x180.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Phone</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
</div>
CSS
.card {
/* width: 55%; */
min-height: 100;
margin: 2%;
}
.card-img-top {
height: 150px;
object-fit: cover;
}
.card-body {
box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.1);
}
JSFiddle demo
I would like my columns to take the full width of my container, I have tried many things but haven't find a solution how to fix it.
Here's an example of what I want:
While it looks like this for now:
See the little red arrows? This is the space that I don't want to see.
HTML:
<div class="container">
<div class="row">
<div class="col ml-auto">
<div class="card card-body justify-content-center" style="height:150px">
<h5 class="card-title">Privacy & Security</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 class="col mr-auto">
<div class="card card-body justify-content-center" style="height:150px">
<h5 class="card-title">Privacy & Security</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>
</section>
CSS:
.framework {
background: rgb(27,28,30);
background: linear-gradient(180deg, #1b1c1e 0%, #27262d 200%);
display:grid;
max-width:100%;
padding:30px 10px 30px 10px;
margin-top:0.5em;
height:100%;
margin-left: auto;
margin-right: auto;
.card {
background: #27262d;
border-radius:5px;
}
img {
width:50px;
height:auto;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:15px;
}
}
CSS (for Mobile version) :
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#800&display=swap');
.framework {
.card-title {
font-family:'Open Sans',sans-serif;
font-weight:800;
font-size:14pt;
text-align:left;
text-transform:uppercase;
}
.card-text {
font-family:geomanist,sans-serif;
color:rgba(255, 255, 255, 0.377);
font-weight:400;
font-size:10pt;
letter-spacing:-0.1px;
line-height:15px;
text-align:left;
}
#media only screen and (max-width: 600px) {
.card-title {
font-size:11pt;
}
.card-text {
font-size:9pt;
}
}
}
edit (10/19/2020 | 12:09 [brussels])kind of fixed it by adding class ".mx-md-n5" next to class ".row" in the same div, this aint perfect but it satisfies me
<div class="col-12 mb-3">
<div class="card card-body justify-content-center" style="height:150px">
<h5 class="card-title">Privacy & Security</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 class="col ml-auto">
<div class="card card-body justify-content-center" style="height:150px">
<h5 class="card-title">Privacy & Security</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 class="col mr-auto">
<div class="card card-body justify-content-center" style="height:150px">
<h5 class="card-title">Privacy & Security</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>
Please add pl-0 and pr-0 class for the remove the padding
<div class="col align-self-start pl-0">
<div class="card card-body justify-content-center" style="height:150px">
<h5 class="card-title">Privacy & Security</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 class="col align-self-end pr-0">
<div class="card card-body justify-content-center" style="height:150px">
<h5 class="card-title">Privacy & Security</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>
Please use the predefined Bootstrap classes at first and if you have any custom CSS add it in a new classes.
Is this what you search for:
HTML
<div class="container" style="border:1px red dotted">
<div class="row " style="border:1px blue dotted">
<div class="col pl-0">
<div class="card card-body justify-content-center" style="height:150px">
<h5 class="card-title">Privacy & Security</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 class="col pr-0">
<div class="card card-body justify-content-center" style="height:150px">
<h5 class="card-title">Privacy & Security</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>
this is a demo for what exactly you want I have just remove padding for the full-width box and for the next two box I remove padding-left for left side box and padding-right for the right side box.
this is the code snippet which helps you to understand what I do.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container p-0">
<div class="row m-0">
<div class="col-12 p-0 mb-4">
<div class="card bg-primary card-body text-center justify-content-center" style="height: 150px; font-size: 50px; color: red;">
Box 1
</div>
</div>
<div class="col-6 pl-0">
<div class="card bg-primary card-body text-center justify-content-center" style="height: 150px; font-size: 50px; color: red;">
Box 2
</div>
</div>
<div class="col-6 pr-0">
<div class="card bg-primary card-body text-center justify-content-center" style="height: 150px; font-size: 50px; color: red;">
Box 3
</div>
</div>
</div>
</div>
</body>
</html>
I hope this answer will help you to solve your problem this time and also help you in future for this type of structure.
Thank you...
I have an idea for a dashboard which I like to create using Bootstrap. Please find the following image of the layout I would like to achieve using Bootstrap 4.
Layout Image
I can make everything happen but except the left box highlighted in red. Following is my current code and appreciate if anyone could help.
JSFIDDLE
HTML
<div class="d-flex">
<!-- Side Nav Start -->
<ul class="navbar-nav sidebar">
<!-- Nav Item - Dashboard -->
<li class="nav-item active d-flex justify-content-center mt-12" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="#">
Side Menu
</a>
</li>
</ul>
<div class="content-wrapper d-flex flex-column">
<div class="content">
<nav class="navbar navbar-top navbar-expand navbar-light bg-white topbar mb-4 static-top border-bottom">
<!-- Topbar Search -->
<div class="logo mr-auto ml-md-3 my-2 my-md-0 mw-100">Header</div>
</nav>
<div class="container-fluid">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
</div>
<div class="row">
<div class="col-sm-4 mb-5">
<div class="card">
<div class="card-body">
<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-sm-4 mb-5">
<div class="card">
<div class="card-body">
<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-sm-4 mb-5">
<div class="card">
<div class="card-body">
<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>
</div>
</div>
CSS
.navbar-nav {
&.sidebar {
width: 5.6rem !important;
min-height: 100vh;
background-color: #000;
.nav-item {
display: block;
width: 100%;
text-align: left;
margin: 15px 0;
&.active {
.nav-link {
color: #fff;
position: relative;
}
}
&:hover {
.nav-link {
color: #fff;
}
}
.nav-link {
color: #5C6A7C;
}
}
}
}
<div class="bg-info">
<div class="container" style="padding: 20px">
<p>Put your Navbar here </p>
</div>
</div>
<div class="row">
<div class="col col-md-2 bg-warning" style="height: 100vh">
<h4>Side Nav</h4>
</div>
<div class="col col-md-10">
<div class="container">
<!-- for the padding in the main body -->
<!-- an other row and cols for the inner content -->
<h5 class="text-center">Main content</h5>
<br /><br />
<div class="row">
<div class="col col-md-4">
<div class="container bg-danger" style="height: 50vh">
<h4>First Block</h4>
</div>
</div>
<div class="col col-md-4">
<div class="container bg-success" style="height: 50vh">
<h4>First Block</h4>
</div>
</div>
<div class="col col-md-4">
<div class="container bg-primary" style="height: 50vh">
<h4>First Block</h4>
</div>
</div>
</div>
</div>
</div>
</div>
The above code snipet would help.
using .row and .col classes will achieve the purpose.
I am trying to create the following component using Bootstrap
What I tried:
<style>
.card-container {
height:150px;
overflow-y: scroll;
}
</style>
<div class="jumbletron">
<div class="card card-inverse">
<div class="card-block">
<h3 class="card-title text">Alerts Card</h3>
<div class="card-container">
<div class="card card-inverse">
<div class="card-block">
<h3 class="card-title text">Alert 1</h3>
</div>
</div>
</div>
<div class="card card-inverse">
<div class="card-block">
<h3 class="card-title text">Alert 2</h3>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/rp51o4se/1/
But unfortunately couldn't figure out a way how to properly do it. How can I accomplish this?
In your example you used jumbletron instead of jumbotron for the class and place one of the cards outside the container.
Updated example here - http://jsfiddle.net/rp51o4se/5/
I also added a padding of 1rem to the card container to make it closer to your attached image.
You have your divs a bit mixed up and not wrapping properly.
.card-container {
height:150px;
overflow-y: scroll;
}
<div class="jumbotron">
<h1>My alert center</h1>
<div class="card-container">
<div class="card card-inverse">
<div class="card-body">
<h3 class="card-title text">Alerts Card</h3>
</div>
</div>
<div class="card card-inverse">
<div class="card-body">
<h3 class="card-title text">Alert 1</h3>
</div>
</div>
<div class="card card-inverse">
<div class="card-body">
<h3 class="card-title text">Alert 2</h3>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<style>
.jumbotron{
height: 200px;
overflow-y: scroll;
}
.mb-10{
margin-bottom: 20px;
}
</style>
<body>
<div class="jumbotron">
<div class="card-container">
<div class="card w-50 mb-10">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card w-50 mb-10">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card w-50 mb-10">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div></div>
</body>
</html>
Try this