Spanning the title of a bootstrap 4 card group - html

I have a bootstrap card group with a title. Currently, the title is within a card, but I would like this to span over the card group. How can this be done?
<div class="card-group">
<div class="card border-right-0 border-top-0">
<div class="card-header bg-white border-bottom-0 h5 font-weight-light">Project Status Overview</div>
<div class="card-body">
<h1 class="card-text text-primary text-center">#ViewBag.ActiveProjects</h1>
<p class="card-title text-center font-weight-bold">Active Projects</p>
</div>
</div>
<div class="card border-right-0 border-top-0">
<div class="card-header bg-white border-bottom-0 h5 font-weight-light"> </div>
<div class="card-body">
<h1 class="card-text text-secondary text-center">#ViewBag.ArchivedProjects</h1>
<p class="card-title text-center font-weight-bold">Archived Projects</p>
</div>
</div>
<div class="card border-right-0 border-top-0">
<div class="card-header bg-white border-bottom-0 h5 font-weight-light"> </div>
<div class="card-body">
<h1 class="card-text text-warning text-center">3</h1>
<p class="card-title text-center font-weight-bold">Pending Dimensions</p>
</div>
</div>
<div class="card border-top-0">
<div class="card-header bg-white border-bottom-0 h5 font-weight-light"> </div>
<div class="card-body">
<h1 class="card-text text-success text-center">32</h1>
<p class="card-title text-center font-weight-bold">Estimates Available</p>
</div>
</div>
</div>


You can solve this by using Flex box. Wrap the .card-group div in a flex box div, and then move the title div outside the .card-group div.
Example
<div class="d-flex flex-column">
<div class="bg-white border-bottom-0 h5 font-weight-light">title</div>
<div class="card-group"><!-- cards here --></div>
</div>
When using display: flex; (.d-flex), the title div will align with the .card-group div.
Solution:
<div class="d-flex flex-column">
<div class="bg-white border-bottom-0 h5 font-weight-light">Project Status Overview</div>
<div class="card-group">
<div class="card border-right-0 border-top-0">
<div class="card-body">
<h1 class="card-text text-primary text-center">23</h1>
<p class="card-title text-center font-weight-bold">Active Projects</p>
</div>
</div>
<div class="card border-right-0 border-top-0">
<div class="card-body">
<h1 class="card-text text-secondary text-center">5</h1>
<p class="card-title text-center font-weight-bold">Archived Projects</p>
</div>
</div>
<div class="card border-right-0 border-top-0">
<div class="card-body">
<h1 class="card-text text-warning text-center">3</h1>
<p class="card-title text-center font-weight-bold">Pending Dimensions</p>
</div>
</div>
<div class="card border-top-0">
<div class="card-body">
<h1 class="card-text text-success text-center">32</h1>
<p class="card-title text-center font-weight-bold">Estimates Available</p>
</div>
</div>
</div>
</div>
Jsbin example here: https://jsbin.com/xeyiroyasa/edit?html,output

Related

HTML body leaving a little space in the side

I was developing a virtual restaurante menu using bootstrap and i just notice that no matter what i do, my page has a little space at the right that will not be full, i used the inspect tool to see if any element was causing it but i couldn't find anything you can see what i'm talking about in the top right corner
I try setting the min-width to the body but it remains the same
body {
min-width: fit-content;
}
also tried this
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow: auto;
}
<body>
<nav class="navbar sticky-top navbar-dark" style="
padding-top: 0px;" id="navbarprincipal">
<div class="container-fluid navbarsubtitle" style="background-color: #0f1924;">
<div class="d-flex align-items-center align-items-stretch">
<div class="d-flex p-2 bd-highlight"><a class="schedule">Horario de atención: 9:00 a.m - 8:00 p.m</a>
</div>
</div>
</div>
<div class=" container-fluid" style="padding-bottom: 8px;">
<div class="col-2">
<div class="d-flex justify-content-center align-items-center">
<div class="p-2 bd-highlight ">
<a class="navbar-brand" href="#">
<img src="assets/logo.png" alt="" width="" height="" class="d-inline-block align-text-top">
</a>
</div>
</div>
</div>
<div class="col-8">
<div class="d-flex justify-content-center align-items-center">
<div class="p-2 bd-highlight "><a class="active">Carta</a></div>
<div class="p-2 bd-highlight "><a class="headerelement">Ubicanos</a></div>
<div class="p-2 bd-highlight "><a class="headerelement">¡Siguenos!</a></div>
</div>
</div>
<div class="col-2">
<div class="d-flex justify-content-center align-items-center">
<div class="p-2 bd-highlight "><i class="bi bi-person" style="font-size: 30px; color: white;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Iniciar Sesión"></i>
</div>
<div class="p-2 bd-highlight "><i class="bi bi-bag" style="font-size: 30px; color: white;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Carrito de compras"></i>
</div>
</div>
</div>
</div>
</nav>
<div class="row principalbanner align-items-center">
<div class="entregadiv" style="margin-bottom: 25px;">
<div class="col-12" style="margin-top: 20px;">
<h3 style="color: black;">¿Como quieres tu pedido</h3>
</div>
<div class="dropdown-divider"></div>
<div class="col-12">
<div class="row">
<div class="col ">
<div class="col dropdownelement">
<i class="bi bi-bicycle" style="font-size: 30px; color: black;"></i>
<p style="color: black;">Delivery</p>
</div>
</div>
<div class="col ">
<div class="dropdownelement">
<i class="bi bi-cursor-fill" style="font-size: 30px; color: black;"></i>
<p style="color: black;">Retirar</p>
</div>
</div>
</div>
</div>
<div class="col-12" style="margin-top: 10px;margin-bottom: 25px;">
<input type="email" class="form-control " id="exampleInputEmail1" placeholder="Ingresa tu dirección*">
</div>
</div>
</div>
<div class="container-fluid" style="padding-left: 8%;padding-right: 8%;">
<hr>
<div class="d-flex align-items-center justify-content-center">
<div class="p-2 bd-highlight"><span class="badge rounded-pill bg-danger" style="font-size: 18px;">Estamos
cerrados hasta mañana a las 9:00 a.m</span></div>
</div>
<hr>
<div class="d-flex align-items-center justify-content-center">
<div class="p-2 bd-highlight"><a class="menucategories" href="#hamburguesa">Hamburguesas</a></div>
<div class="p-2 bd-highlight"><a class="menucategories" href="#polloalabrasa">Pollos a la brasa</a></div>
<div class="p-2 bd-highlight"><a class="menucategories" href="#combos">Combos</a></div>
<div class="p-2 bd-highlight"><a class="menucategories">Bebidas</a></div>
<div class="p-2 bd-highlight"><a class="menucategories">Guarniciones</a></div>
<div class="p-2 bd-highlight"><a class="menucategories">Postres</a></div>
</div>
<hr>
<div class="d-flex align-items-center justify-content-center" style="background: url(assets/banners/2.jpg);background-size:cover;height: 180px;background-position: center bottom;position: relative;">
<div class="p-2 bd-highlight">
<h3 class="menucategoriestitle">Hamburguesas</h3>
</div>
</div>
<div class="row" id="hamburguesa">
<h1>Hamburguesas</h1>
<div class="col-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Hamburguesa Royal</h5>
<p class="card-text carddescription">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 cardprice">S/10</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/burger.jpg" class="cardimage" onclick="overlayonproduct()">
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Hamburguesa Royal</h5>
<p class="card-text carddescription">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 cardprice">S/10</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/burger.jpg" class="cardimage">
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Hamburguesa Clasica</h5>
<p class="card-text carddescription">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 cardprice">S/6</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/burger.jpg" class="cardimage">
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Hamburguesa Royal</h5>
<p class="card-text carddescription">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 cardprice">S/10</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/burger.jpg" class="cardimage">
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Hamburgesa bacon and cheese</h5>
<p class="card-text carddescription">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 cardprice">S/8</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/burger.jpg" class="cardimage">
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Hamburguesa Royal</h5>
<p class="card-text carddescription">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 cardprice">S/10</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/burger.jpg" class="cardimage">
</div>
</div>
</div>
</div>
</div>
<hr>
<div id="polloalabrasa" class="d-flex align-items-center justify-content-center" style="background: url(assets/banners/3.jpg);background-size:cover;height: 180px;background-position: center bottom">
<div class="p-2 bd-highlight">
<h3 class="menucategoriestitle">Pollos a la brasa</h3>
</div>
</div>
<div class="row">
<h1>Pollos a la brasa</h1>
<div class="col-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Pollo Entero</h5>
<p class="card-text carddescription">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 cardprice">S/40</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/chicken.jpg" class="cardimage">
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Cuarto de pollo</h5>
<p class="card-text carddescription">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 cardprice">S/16</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/chicken.jpg" class="cardimage">
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Pollo broaster</h5>
<p class="card-text carddescription">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 cardprice">S/55</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/chicken.jpg" class="cardimage">
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Cuarto pollo broaster</h5>
<p class="card-text carddescription">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 cardprice">S/18</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/chicken.jpg" class="cardimage">
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Octavo de pollo</h5>
<p class="card-text carddescription">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 cardprice">S/12</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/chicken.jpg" class="cardimage">
</div>
</div>
</div>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title cardtitle">Octavo pollo broaster</h5>
<p class="card-text carddescription">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 cardprice">S/14</p>
<div class="row">
<div class="col-2"><a href="https://wa.link/b1erbu"><i class="bi bi-whatsapp"
style="font-size: 30px; color: #00bb2d;"></i></a>
</div>
<div class="col-6"><button class="btn btn-primary" type="submit">Agregar al
carrito</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img src="assets/imgs/chicken.jpg" class="cardimage">
</div>
</div>
</div>
</div>
</div>
</div>

You have a white space on the right because your principalbanner row isn’t inside a container. Usually, the container contains the row, so the row fits the width of the display. Because you’re missing the container, your row is now wider than the display.
You can tell if something is too wide if there’s a horizontal scrollbar at the bottom of the browser window (I suspect there’s a horizontal scrollbar on your browser, but the image you provided is cutting off the bottom of the window).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js"></script>
<nav class="navbar sticky-top navbar-dark" style="
padding-top: 0px;" id="navbarprincipal">
<div class="container-fluid navbarsubtitle" style="background-color: #0f1924;">
<div class="d-flex align-items-center align-items-stretch">
<div class="d-flex p-2 bd-highlight"><a class="schedule">Horario de atención: 9:00 a.m - 8:00 p.m</a>
</div>
</div>
</div>
<div class=" container-fluid" style="padding-bottom: 8px;">
<div class="col-2">
<div class="d-flex justify-content-center align-items-center">
<div class="p-2 bd-highlight ">
<a class="navbar-brand" href="#">
<img src="assets/logo.png" alt="" width="" height="" class="d-inline-block align-text-top">
</a>
</div>
</div>
</div>
<div class="col-8">
<div class="d-flex justify-content-center align-items-center">
<div class="p-2 bd-highlight "><a class="active">Carta</a></div>
<div class="p-2 bd-highlight "><a class="headerelement">Ubicanos</a></div>
<div class="p-2 bd-highlight "><a class="headerelement">¡Siguenos!</a></div>
</div>
</div>
<div class="col-2">
<div class="d-flex justify-content-center align-items-center">
<div class="p-2 bd-highlight "><i class="bi bi-person" style="font-size: 30px; color: white;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Iniciar Sesión"></i>
</div>
<div class="p-2 bd-highlight "><i class="bi bi-bag" style="font-size: 30px; color: white;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Carrito de compras"></i>
</div>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row principalbanner align-items-center">
<div class="entregadiv" style="margin-bottom: 25px;">
<div class="col-12" style="margin-top: 20px;">
<h3 style="color: black;">¿Como quieres tu pedido</h3>
</div>
<div class="dropdown-divider"></div>
<div class="col-12">
<div class="row">
<div class="col ">
<div class="col dropdownelement">
<i class="bi bi-bicycle" style="font-size: 30px; color: black;"></i>
<p style="color: black;">Delivery</p>
</div>
</div>
<div class="col ">
<div class="dropdownelement">
<i class="bi bi-cursor-fill" style="font-size: 30px; color: black;"></i>
<p style="color: black;">Retirar</p>
</div>
</div>
</div>
</div>
<div class="col-12" style="margin-top: 10px;margin-bottom: 25px;">
<input type="email" class="form-control " id="exampleInputEmail1" placeholder="Ingresa tu dirección*">
</div>
</div>
</div>
</div>
I’ve revised your code to have container-fluid around your principalbanner row. To see the effect of the container, you can open the snippet full-screen and use your browser’s developer tools to turn off all of the attributes for the container. Then a scrollbar will appear at the bottom of the browser window with 24px of space on the right.

How to set the backgroundcolor of a Bootstrap card fo the whole column?

I've got a questtion about the Bootstrap Card Deck.
I create a Card Deck with two cards in a row. On the first card I've got some text under the header and in the second card there is no text under the header. In this case the grey color does not fill the whole card as you can see in the example. How can I fix it, that the hole column is also grey?
Thanks for your help!
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<p class="font-weight-light text-muted mb-2">Some text</p>
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">50</p>
</div>
</div>
</div>
</a>
</div>

If you want to have the height be equals the container, you can use h-100 on the div row mx-0.
More information can be found here: https://getbootstrap.com/docs/4.0/utilities/sizing/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<p class="font-weight-light text-muted mb-2">Some text</p>
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal"></p>
</div>
</div>
</div>
</a>
</div>

Ideally you should not play around with left/right margins of row and col in bootstrap. You should use no-gutters class with row to have the effect you want. Additionally, you should add h-100 on the second row to take full height. Also a better way to center align your number is like I have done in the snippet by using justify-content-center d-flex align-items-center.
Also your code was missing a container element so that scrollbar was coming in your snippet. I have added that too.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="container">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 no-gutters">
<div class="col-md-8 grey lighten-4 rounded-left">
<h5 class="font-weight-bold p-2">Header</h5>
<p class="font-weight-light text-muted mb-2 px-2">Some text</p>
</div>
<div class="col-md-4 text-center justify-content-center d-flex align-items-center">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 no-gutters">
<div class="col-md-8 grey lighten-4 rounded-left">
<h5 class="font-weight-bold p-2">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2 px-2">No text</p> -->
</div>
<div class="col-md-4 text-center justify-content-center d-flex align-items-center">
<p class="h2 font-weight-normal">50</p>
</div>
</div>
</div>
</a>
</div>
</div>
Please check the code differences https://i.stack.imgur.com/0Q2IX.png

Using anchor tag as it will not consider a height and width so you have to set a class in card-body using this class="card-body p-0 grey lighten-4".
Remove the class "grey lighten-4" from class="col-md-8 rounded-left pt-2" & set to class="card-body p-0 grey lighten-4"
.grey {
background-color: #f5f5f5 !important;
}
/*OR*/
.grey.lighten-4 {
background-color: #f5f5f5 !important;
}
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0 grey lighten-4">
<div class="row mx-0">
<div class="col-md-8 rounded-left pt-2">
...
</div>
<div class="col-md-4 text-center pt-3">
...
</div>
</div>
</div>
</a>
</div>

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>

How do you center text inside a card in bootstrap? [duplicate]

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
I wrote a code for card in Bootstrap 4. Now I would like to center all the text that is inside the card but I can't find a way on how to do this.
I tried to "text-center" the entire section. I've also tried to use "d-flex" with justifying the content for the entire row/container which didn't work either.
Here's my code :
<section id="jobs">
<!--Employing cards-->
<div class="container-fluid container-fluid-shorter py-4 bg-white">
<!--Assistant card-->
<div class="row">
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/assistant.jpg" alt="assistant" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-capitalize">asistentka</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="assistant.html" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/developer.jpg" alt="developer" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-capitalize">developer</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1">Hledáme kolegu/kolegyni na pozici IT Developer (databáze, aplikace, API, webové služby, apod.)</h5>
<a href="employerform.html" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3 mx-auto">
<div class="card">
<img src="images/advertiser.jpg" alt="advertiser" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-capitalize">obchodník</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1">Do naší firmy hledáme kolegu/kolegyni na pozici IT reklamy a obchodu.</h5>
<a href="employerform.html" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
</div>
</div>
<!--End of employing cards section-->
</section>
.container-fluid-shorter{
max-width: 90rem;
}
What am I doing wrong? Thanks to anyone.

Is it something like this you are after? Using flex and then justify-content-center
.card-body {
flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section id="jobs">
<!--Employing cards-->
<div class="container-fluid container-fluid-shorter py-4 bg-white">
<!--Assistant card-->
<div class="row">
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/assistant.jpg" alt="assistant" class="card-img-top">
<div class="card-body d-flex align-items-center justify-content-center">
<h4 class="card-title text-capitalize">asistentka</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1 text-center">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="assistant.html" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/developer.jpg" alt="developer" class="card-img-top">
<div class="card-body d-flex align-items-center justify-content-center">
<h4 class="card-title text-capitalize">developer</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1 text-center">Hledáme kolegu/kolegyni na pozici IT Developer (databáze, aplikace, API, webové služby, apod.)</h5>
<a href="employerform.html" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3 mx-auto">
<div class="card">
<img src="images/advertiser.jpg" alt="advertiser" class="card-img-top">
<div class="card-body d-flex align-items-center justify-content-center">
<h4 class="card-title text-capitalize">obchodník</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1 text-center">Do naší firmy hledáme kolegu/kolegyni na pozici IT reklamy a obchodu.</h5>
<a href="employerform.html" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
</div>
</div>
<!--End of employing cards section-->
</section>

how to organise the card-deck body

I have card-deck like this
I want to organise these boxs : that the box Total width = Amazon Cost width + BOXI+ width :
below is my code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column justify-content-center align-items-center h-100">
<div class="card-deck w-55">
<div class="card text-center">
<div class="card-header">
<h5 >Amazon Costs</h5>
</div>
<div class="card-body">
<h5 id="amc" class="card-title"></h5>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5 >BOXI+</h5>
</div>
<div class="card-body">
<h5 id="boxiP" class="card-title"></h5>
</div>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5 >Total</h5>
</div>
<div class="card-body">
<h5 id="tt" class="card-title"></h5>
</div>
</div>
</div>

Add a full width DIV (<div class="w-100"></div>) before the last card...
<div class="d-flex flex-column justify-content-center align-items-center h-100">
<div class="card-deck">
<div class="card text-center">
<div class="card-header">
<h5>Amazon Costs</h5>
</div>
<div class="card-body">
<h5 id="amc" class="card-title"></h5>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5>BOXI+</h5>
</div>
<div class="card-body">
<h5 id="boxiP" class="card-title"></h5>
</div>
</div>
<div class="w-100"></div>
<div class="card text-center">
<div class="card-header">
<h5>Total</h5>
</div>
<div class="card-body">
<h5 id="tt" class="card-title"></h5>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/PaLq3R5eXR