Adding texts beside an image using Bootstrap - html

I am having trouble figuring out how to adjust every <p> tag. It always goes beside the the name should be here. I want the should be below the name.
<div class="card" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">The title should be here...</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2">
<div>
<a class="fancybox" href="admin/files/Images/ProfilePicture.png">
<img src="admin/files/Images/ProfilePicture.png" style="width: 100px; height: 100px">
</a>
</div>
<p class="col p-2 m-0">The name should be here...</p>
</div>
<div>
</div>
</div>


Try this
<div class="card" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">The title should be here...</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2">
<div>
<a class="fancybox" href="admin/files/Images/ProfilePicture.png">
<img src="admin/files/Images/ProfilePicture.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="card-text">The name should be here...</p>
<p class="card-text">age</p>
<p class="card-text">address</p>
</div>
</div>
</div>


Below will also work
<div class="card" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">The title should be here...</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2">
<div>
<a class="fancybox" href="admin/files/Images/ProfilePicture.png">
<img src="admin/files/Images/ProfilePicture.png" style="width: 100px; height: 100px">
</a>
</div>
<table cellpadding="0" cellspacing="0">
<tr><td><p class="col p-2 m-0">The name should be here...</p></td></tr>
<tr><td><p class="col p-2 m-0">Age</p></td></tr>
<tr><td><p class="col p-2 m-0">Address</p></td></tr>
</table>
</div>
<div>
</div>
</div>

Related

Get the 'card-title' to start just above a div

I want the 'title' to start right above 'first yeah', the image should also start there
I've tried several ways (and with some classes) but I haven't succeeded
The card code:
<div class="card border-dark">
<div class="card-body" style="background-color: #706747;">
<h1 class="card-title">
<p class="text-body">
<img src="/assets/logo.gif" alt="" width="60" height="48" class="d-inline-block">
{{cosos}} title
</p>
</h1>
<br>
<div class="d-flex flex-nowrap bd-highlight justify-content-center">
<div class="order-1 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-3 p-2 bd-highlight">Third</div>
<div class="order-4 p-2 bd-highlight">Final yup</div>
</div>
</div>
</div>
I'm using Bootstrap 5 for everything, I have no classes or styles of my own

Step 1: remove class justify-content-center and add p-2 after class card-title. Now you will see your logo.gif and title will align with first nav bar item.
Step 2: Add place-self: center; to the div with class card-body.
Step 3: Assign background-color: #706747; to the class card, remove from card-body div.
The updated HTML will be like this:
<div class="card border-dark" style="background-color: #706747;">
<div class="card-body" style="place-self: center;">
<h1 class="card-title p-2">
<p class="text-body">
<img src="/assets/logo.gif" alt="" width="60" height="48" class="d-inline-block"> {{cosos}} title
</p>
</h1>
<div class="d-flex flex-nowrap bd-highlight ">
<div class="order-1 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-3 p-2 bd-highlight">Third</div>
<div class="order-4 p-2 bd-highlight">Final yup</div>
</div>
</div>
</div>

You can make use of the grid-layout of bootstrap to align the elements.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="card border-dark">
<div class="card-body" style="background-color: #706747;">
<h1 class="card-title">
<p class="text-body">
<div class="row">
<div class="col-3">
</div>
<div class="col-2">
<img src="/assets/logo.gif" alt="" width="60" height="48" >
</div>
<div class="col-7">
<span id="title1"> fdasdstitle</span>
</div>
</div>
</p>
</h1>
<br>
<div class="d-flex flex-nowrap bd-highlight justify-content-center">
<div class="order-1 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-3 p-2 bd-highlight">Third</div>
<div class="order-4 p-2 bd-highlight">Final yup</div>
</div>
</div>
</div>
</body>
</html>

Making card items align with other cards

I have a problem wherein the items inside cards does not align with each other when I add other text/s.
as you can see in the image below the items from books and recommended books are matched/aligned..
and here's the image when I am adding the view count in recommended books.
as you can see, the items in book 1 is adjust and I do not want that to happen I want to match/align from number 1 in books and number 1 in recommended books even after adding the view count in recommended books.
So here's my code for the cards.
<div class="col">
<div class="card w-100 h-100" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">Books</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">1</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">2</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">3</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">4</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card w-100 h-100" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">Recommended Books</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">1</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">2</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">3</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>.
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">4</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
</div>
</div>
as far as I know that w-100 and h-100 makes the cards responsive to each other. However I want the items from books and recommended books items to match.. I did w-100 and h-100 to make responsive with the width and height of the card.
Edit: I have removed the h-100 in my card and this was the result. I want the books' and recommended's height should be matched. However when I am returning it back, the items are not aligning as shown in the second image.

Remove the h-100 class on the card-body wrapper:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row">
<div class="col">
<div class="card w-100" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">Books</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">1</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">2</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">3</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">4</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card w-100 h-100" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">Recommended Books</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">1</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">2</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">3</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>.
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">4</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
</div>
</div>
</div>

Can you guys help me? Why did the bootstrap card stick left in mobile view

I did anything but it still won't work. Maybe you guys can help me?
Here are some photos.
BEFORE
AFTER
I want the card to stay in the middle when I view it in mobile size.
maybe there are some codes that I miss?
I would like to thank you so much if someone solved it for me.
I'm still new using bootstrap and not really pro at HTML and CSS.
here are the codes.
<!-- Members Card -->
<div class="container my-5">
<h1 class="text-center mb-3"><b>MEMBERS</b></h1>
<div class="d-flex justify-content-around">
<div class="row">
<!-- Jennie -->
<div class="col-md col-sm">
<div class="card" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
<!-- Jisoo -->
<div class="col-md col-sm">
<div class="card" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
<!-- Lisa -->
<div class="col-md col-sm">
<div class="card" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
<!-- Rose -->
<div class="col-md col-sm">
<div class="card" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
</div> <!--close tag for row-->
</div> <!--close tag for d-flex -->
</div> <!--close tag for container-->
<!-- End Members Card -->

Just Add classnames d-flex justify-content-center near every col-md col-sm
(i.e) col-md col-sm d-flex justify-content-center
Example:

Add margin-left: auto; margin-right: auto; to the .card inside media query for mobile.

You are using bootstrap, you need add the class mx-auto to each div class="card"and that's it.
Source: bootstrap docs
Copy this code, this is your fixed code:
<h1 class="text-center mb-3"><b>MEMBERS</b></h1>
<div class="d-flex justify-content-around">
<div class="row">
<!-- Jennie -->
<div class="col-md col-sm">
<div class="card mx-auto" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
<!-- Jisoo -->
<div class="col-md col-sm">
<div class="card mx-auto" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
<!-- Lisa -->
<div class="col-md col-sm">
<div class="card mx-auto" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
<!-- Rose -->
<div class="col-md col-sm">
<div class="card mx-auto" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
</div> <!--close tag for row-->
</div> <!--close tag for d-flex -->

How to center last two cards in bootstrap?

I write application in angular, using bootstrap. I want the last 2 cards to be in the middle, instead of to the left. Now it looks like one last card is missing. I want to correct it. How to do it?
html code:
<div class="container" style="padding-top:1.1cm">
<div class="card-columns">
<div class="card text-center" [routerLink]="['/special/arrangements-salon']">
<div class="card-body">
<img [src]="salon" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">salon</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-study']">
<div class="card-body">
<img [src]="study" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">gabinet</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bedroom']">
<div class="card-body">
<img [src]="bedroom" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">sypialnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-kitchen']">
<div class="card-body">
<img [src]="kitchen" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">kuchnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bathroom']">
<div class="card-body">
<img [src]="bathroom" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">łazienka</h5>
</label>
</div>
</div>
</div>
</div>

add d-flex align-items-center justify-content-center to parent => card-columns div or you can add mx-auto to last div
<div class="container" style="padding-top:1.1cm">
<div class="card-columns d-flex align-items-center justify-content-center">
<div class="card text-center" [routerLink]="['/special/arrangements-salon']">
<div class="card-body">
<img [src]="salon" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">salon</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-study']">
<div class="card-body">
<img [src]="study" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">gabinet</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bedroom']">
<div class="card-body">
<img [src]="bedroom" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">sypialnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-kitchen']">
<div class="card-body">
<img [src]="kitchen" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">kuchnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bathroom']">
<div class="card-body">
<img [src]="bathroom" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">łazienka</h5>
</label>
</div>
</div>
</div>
</div>

Bootstrap card-columns uses CSS multi columns and for various reason it's not really possible to center items, or align rows differently.
Instead of using card-columns, use the grid (row > col-*), but you should note this won't give you a masonry layout or top-to-bottom ordering.

How to add gap between cards

I need space between the cards as shown in the picture, how do I add spacing so that structure remains the same
<div class="container" style="padding: 16px;">
<div class="row">
<div class="center">
<div class="card text-white bg-primary mb-r" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
<div class="center">
<div class="card text-white bg-primary mb-r" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
<div class="center">
<div class="card text-white bg-primary" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
<div class="center">
<div class="card text-white bg-primary" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
</div>
</div>
The picture below is the code I have written, I need spacing between them.

To have spacing between cards just use standard Bootstrap layout, that is using row and columns. Columns have gutters by default. Read more: https://getbootstrap.com/docs/4.3/layout/overview/
There were many errors like <h7> tags, using incorrect css properties etc. Just go through my code and see the changes I made.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
</div>
</div>

I know you asked that the structure didn't change however I believe some edits needed to be made, here is a jsFiddle with some suggestions: https://jsfiddle.net/kcozqd9L/2/
CSS
.container{
padding: 16px;
}
.card{
position: relative;
display: inline-block;
width:100px;
height:100px;
margin: auto;
}
/*.card-body{
}
.card-title{
}*/
.card-text{
align-content:flex-end
}
HTML
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="center">
<div class="card text-white bg-primary mb-r">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
<div class="card text-white bg-primary mb-r">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
<div class="card text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
<div class="card text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
</div>
</div>