HTML body leaving a little space in the side - html

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.

Related

How to create responsive grid with two sides?

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>

how to disable auto scrolling when going to a section using anchor links?

I made these vertical tabs using HTML + CSS only (because I'm challenging myself not to use ANY SCRIPTING AT ALL). It works but I can't disable the automatic scrolling when I open a section and click on a different section.
I know it's a natural behavior to jump on a different section when using anchor links, but I want to disable this so it would look like normal vertical tabs with scripts on it.
Here's my CodePen for this.
https://codepen.io/bosskeito/pen/qBXzdpX
I'm working on Drupal CMS with Bootstrap 4.6.1
.cstmTabTargetVertical:not(:target) {
display: none;
}
.cstmTabTargetVertical:target {
display: block;
}
.cstmTabBtn {
border-radius: 0 !important;
}
.cstmTabVertical .cstmTabBtn {
width: 100%;
}
.cstmTabTargetVertical:before {
content: "";
display: block;
height: 100px;
margin: -100px 0 0 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap-grid.min.css" integrity="sha512-Xj2sd25G+JgJYwo0cvlGWXoUekbLg5WvW+VbItCMdXrDoZRWcS/d40ieFHu77vP0dF5PK+cX6TIp+DsPfZomhw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap-reboot.min.css" integrity="sha512-ioOlrrQQ3fZN/A7N2rZVm6JXp/Lg7xtda9OaRKornjBcuTW/UqIhTlPyngcGQGrQTOhJgmSltKM4v3Ne03WPug==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270">
<div class="row mx-auto cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 1</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSI_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSI_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSI_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSI_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270 py-5">
<div class="row mx-auto py-5 cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 2</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSA_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSA_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSA_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSA_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270">
<div class="row mx-auto cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 3</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSB_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSB_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSB_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSB_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Why button is overlapping with images in css?

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>

Spanning the title of a bootstrap 4 card group

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

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>