I want something like this, but there is some problems.
My code looks like:
<style>
.red{
background-color: red;
}
</style>
{% endblock stylesheets %}
{% block content %}
<div class="container-flex m-3">
<div class="row">
<div class="col-sm">
<div class="d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-150 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">LONG TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-150 communicate p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-150 communicate p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">LONG LONG TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="h-150 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
But result is in photo, without correction.
Each card is with title, context and icon. And context som times is longer then other which also breaks up my code.
How can I set height by each element responsive? And how to create this grid on all page height with bootstrap? What I need to modify in my code to get result what is in picture?
The h- class uses set percentages. If you want them to fill 100% of the available height, you just set it to h-100. The other side is the same way, so you can use whatever you want for that or you can do a custom percentage using CSS. h-150 isn't a valid use of these classes (remove it and you'll notice nothing changes, it just auto fits).
https://getbootstrap.com/docs/5.0/utilities/sizing/
.red {
background-color: red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container-flex m-3">
<div class="row">
<div class="col-sm">
<div class="d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">LONG TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 communicate p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 communicate p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">LONG LONG TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="min-vh-100 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
Related
What changes do I need to make to get the result like in the image?
What I want is three segments. navigation bar, left and right side. Navigation is fixed to the bottom, but the left and right side are 50% each. And all the boxes on the left side to get all possible height.
I am using react so style is a litle bit different
My code looks like:
body,
html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
div {
overflow: hidden;
}
.box {
min-height: 100px;
min-width: 100px;
transition: transform .6s;
}
.color {
background-color: rgba(58, 140, 190, 255);
}
.icon-white {
color: white;
}
.card-text {
color: white;
}
.title {
color: rgba(255, 255, 255, 0.418);
font: 1.5vw sans-serif;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container-flex m-3">
<div class="row">
<div class="col-sm">
<div class="d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h4 class=" title">LONG TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">LONG LONG TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class=" color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h4 class=" title">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class="fixed-bottom bg-dark" style={{ height: '150px' }}>
<h3 class="text-success">BOTTOM NAV BAR</h3>
</div>
</div>
Use the vh unit to split the screen half :
set 50vh to your navigation element and the "left and right side elements" row, or split the virtual height between to values like 90vh and 10vh, or even better if you navigation is 34px, set the top row to be calc(100vh - 34px)
set display: flex; flex-direction: column; justify-content: space-between in you left column element to take all the needed space. Regarding your illustration it will probably do what you want. Otherwise, set height: 100%; to all child rows elements for the blue boxes to fill all the space.
I will let you decide if you choose to use the bootstrap classes or custom css
Heres the bootstrap way. Your HTML, body tag, and the div on which react is mounted will also all need height: 100%.
Codesandbox: https://codesandbox.io/s/wonderful-leftpad-sxold7?file=/src/App.js:0-4551
<div class="d-flex m-3 flex-column h-100">
<div class="d-flex flex-row col overflow-auto">
<div class="col">
<div class="d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h4 class=" title">LONG TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">LONG LONG TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class=" color p-3 box red" style={{ borderRadius: '5%' }}>
<div>
<h4 class=" title">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class="col bg-dark" style={{flex: '0 0 150px'}}>
<h3 class="text-success">BOTTOM NAV BAR</h3>
</div>
</div>
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.
I am new to web devlopment and stuck on this issue for quite some time now.
I wish to make a table(in 2nd col-6) with buttons at top and than changing content(scrollable cards) below it based on button click.
I tried to implement it but my cards and buttons overlap how to tackle this and overlapping makes buttons non reactive.
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="container">
<div >
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I hope you are using bootstrap 4 or higher, Try this
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="row">
<div class="col-md-12">
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div class="col-md-12">
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My Requiremnet Align 8 cards in a single row. Each card to include 4 types of data say Average,Range,Min & Max.
What I have tried
The code I've tried for this is
<div class="row">
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
</div>
But it gives some distorted display as shown in the below image. I am not able to remove the extra padding\space between\within each card. If I remove the padding some of the items - icons, text... - go out of the card.
Please help me to make the cards aligned properly in the same row.
My expected output of the card is as shown in the below image
Updated code using answer from Nisharg Shah
<div class="row">
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
</div>
This displays as shown in the below image
I want to make the top icon smaller and to remove the extra space between above footer marked in green arrows in the image. Please help
You can add px-1 class in all col classes, so it reduces the gap between cards.
px-1 = .5rem = 8px, If you want to reduce more gap, you can add custom CSS on all col classes.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
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