Bootstrap Flexbox horizontal scrolling element not workin - html

I have written some CSS and used bootstrap to create a horizontal div with scroll ability but the output is not proper if I add
<meta name="viewport" content="width=device-width, initial-scale=1">
In My Code
Code Output
My Code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<style>
::-webkit-scrollbar {
width: 1px;
height: 0px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.scrolling-wrapper{
overflow-x: auto;
}
.card-block{
height: 200px;
width: 163px;
background-color: #141414;
border: none;
background-position: center;
background-size: cover;
transition: all 0.2s ease-in-out !important;
border-radius: 8px;
}
.card-block img{
display: block;
border-radius: 50%;
height: 82px;
width: 82px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.card-block span{
display: block;
font-size: 18px;
color: #fff;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
}
.card-block a{
background-color: #007bdc;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
margin-right: auto;
margin-left: auto;
text-decoration: none;
color: #fff;
font-size: 12px;
border-radius: 4px;
margin-top: 12px;
}
</style>
<div class="scrolling-wrapper row flex-row flex-nowrap mt-6 pb-6 pt-3">
<div class="col-2">
<div class="card card-block card-1">
<img src="http://placehold.it/80x80">
<span>
Om Prakash
</span>
<a href="#">
More Info
</a>
</div>
</div>
<div class="col-2">
<div class="card card-block card-2">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-3">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-4">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-5">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-6">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-7">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-8">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-9">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-10">
<img src="http://placehold.it/80x80">
</div>
</div>
</div>
<br/>
<br/>
<br/>


try using col-auto instead of col-2 and mx-0 with row
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<style>
::-webkit-scrollbar {
width: 1px;
height: 0px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.scrolling-wrapper{
overflow-x: auto;
}
.card-block{
height: 200px;
width: 163px;
background-color: #141414;
border: none;
background-position: center;
background-size: cover;
transition: all 0.2s ease-in-out !important;
border-radius: 8px;
}
.card-block img{
display: block;
border-radius: 50%;
height: 82px;
width: 82px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.card-block span{
display: block;
font-size: 18px;
color: #fff;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
}
.card-block a{
background-color: #007bdc;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
margin-right: auto;
margin-left: auto;
text-decoration: none;
color: #fff;
font-size: 12px;
border-radius: 4px;
margin-top: 12px;
}
</style>
<div class="scrolling-wrapper row mx-0 flex-nowrap mt-6 pt-3">
<div class="col-auto">
<div class="card card-block card-1">
<img src="http://placehold.it/80x80">
<span>
Om Prakash
</span>
<a href="#">
More Info
</a>
</div>
</div>
<div class="col-auto">
<div class="card card-block card-2">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-3">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-4">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-5">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-6">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-7">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-8">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-9">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-10">
<img src="http://placehold.it/80x80">
</div>
</div>
</div>
<br/>
<div> <p>Hello I'm a Text</p></div>
<br/>
<br/>

Related

How to fix card css grid

I try adding removing max width for the grid will be used but it's not satisfying to see when the whole card get the width of the site
This is the home page when not searching
Then this is the image when two cards appear in the search
.card-grid, .food-list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
align-items: flex-start;
padding-top: 1rem;
}
.card {
--padding: 1rem;
background: #e8eef1;
border: 1px solid #777;
border-radius: .25rem;
overflow: hidden;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
.card.card-shadow {
border: none;
box-shadow: 0 4px 21px -12px rgba(0, 0, 0, .79);
max-width: 700px;
}
.card-header {
font-size: 1.5rem;
padding: var(--padding);
padding-bottom: 0;
margin-bottom: .5rem;
}
.card-header.card-image {
padding: 0;
overflow: hidden;
}
.card-header.card-image > img {
display: block;
width: 100%;
max-height: 200px;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
transition: 200ms transform ease-in-out;
}
.card:hover > .card-header.card-image > img {
transform: scale(1.025);
}
.card-body {
font-size: .9rem;
text-align: center;
padding: 0 var(--padding);
}
.card-footer {
margin-top: 1rem;
padding: var(--padding);
padding-top: 0;
text-align: center;
}
<div class="card-grid" >
<div class="food-list" id="food-list">
<div class="card card-shadow">
<div class="card-header card-image">
<img src="/img/Sisig.webp">
</div>
<div class="card-body" >
<h3> Sisig </h3>
</div>
<div class="card-footer">
<button class="btn">Get Recipe</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header card-image">
<img src="/img/Adobo.webp">
</div>
<div class="card-body" >
<h3> Adobo </h3>
</div>
<div class="card-footer">
<button class="btn">Get Recipe</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header card-image">
<img src="/img/Porkchop.webp">
</div>
<div class="card-body" >
<h3>Porkchop with Gravy</h3>
</div>
<div class="card-footer">
<button class="btn">Get Recipe</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header card-image">
<img src="/img/Omelette.webp">
</div>
<div class="card-body" >
<h3>Omelette</h3>
</div>
<div class="card-footer">
<button class="btn">Get Recipe</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header card-image">
<img src="/img/Sinigang.webp">
</div>
<div class="card-body" >
<h3> Sinigang </h3>
</div>
<div class="card-footer">
<button class="btn">Get Recipe</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header card-image">
<img src="/img/Lumpia.webp">
</div>
<div class="card-body" >
<h3> Lumpia</h3>
</div>
<div class="card-footer">
<button class="btn">Get Recipe</button>
</div>
</div>
</div>
</div>
i already try flex but the responsive of the site didn't go well it become vertical cards of options

Bootstrap container overflowing into footer

I am building a page based on bootstrap5, yet I am having a problem in the positioning of the footer and the main content container.
The page was working fine until I added the footer:
before footer picture:
after footer picture:
I am providing a simplified code as a snippet here (all mages and some styles are broken, but notice the overflow at the bottom of the page):
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
:root {
--top-header-top-position: 0rem;
--header-height: 3.5rem;
--nav-width: 68px;
--chat-width: 100px;
--primary-color: var(--bs-primary);
--secondary-color: var(--bs-secondary);
--field-gray: var(--bs-field-grey);
--field-grey-transparency: var(--bs-field-grey-transparency);
--white-color: var(--bs-white);
--body-font: 'Arimo', 'Montserrat', sans-serif;
--normal-font-size: 1rem;
--z-fixed: 51;
--z-lnavbar: 50;
--z-chat: 50;
--z-topbar: 51;
}
*,
::before,
::after {
box-sizing: border-box
}
.modal-backdrop {
z-index: 100000 !important;
}
.modal {
z-index: 100001 !important;
}
.top-header {
width: 100%;
height: var(--top-header-top-position);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--secondary-color);
z-index: var(--z-topbar);
transition: .5s;
text-align: center !important;
}
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: var(--top-header-top-position);
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--primary-color);
z-index: var(--z-fixed);
transition: .5s
}
.main-container-page {
padding-top: calc(var(--header-height) + var(--top-header-top-position) + 5rem);
z-index: 5000;
}
.header_toggle {
color: var(--primary-color);
font-size: 1.5rem;
cursor: pointer;
}
.header_img {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.header_img img {
width: 40px
}
#account-icon:hover {
color: var(--white-color);
}
.l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--primary-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-lnavbar);
}
.r-navbar {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100vh;
background-color: var(--primary-color);
padding: 1rem 0 0 1rem;
transition: .5s;
z-index: 5000;
padding: 1rem 0 0 1rem;
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
margin-top: 5rem;
}
.nav_logo,
.nav_link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 1.5rem 2rem;
text-decoration: none;
}
.nav_link {
position: relative;
color: var(--white-color);
margin-bottom: 0rem;
transition: .3s
}
.nav_logo {
margin-bottom: 3rem
}
.nav_logo-icon {
font-size: 1.25rem;
color: var(--white-color)
}
.nav_logo-name {
color: var(--white-color);
font-weight: 700
}
.nav_link:hover {
color: var(--secondary-color) !important;
}
.nav_icon {
margin-left: -1rem;
font-size: 1.2rem;
}
.nav_name {
margin-left: -0.5rem;
font-size: 1rem;
}
.secondary-bs-color {
color: var(--bs-secondary)
}
.white-bs-color {
color: var(--white-color)
}
.show-left-nav {
left: 0;
width: calc(var(--nav-width) + 156px);
}
.show-right-nav {
width: 100%;
}
.body-chat-pd {
padding-right: calc(var(--chat-width) + 1rem);
}
.chat-font {
font-size: small;
}
.time-span-chat {
font-size: smaller;
color: var(--white-color);
}
#chatContainer {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
#chatContainer::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
.active {
font-weight: bold;
color: var(--secondary-color);
}
.active::before {
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--secondary-color)
}
.height-100 {
height: 100vh
}
.float-icon-chat {
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: var(--secondary-color);
color: var(--white-color);
border-radius: 50px;
text-align: center;
vertical-align: middle;
z-index: 100;
}
.coin-dropdown-item {
color: var(--white-color);
}
.coin-dropdown-item:hover {
color: var(--secondary-color);
background-color: var(--field-grey-transparency);
font-weight: bold;
}
#media screen and (min-width: 768px) {
.header {
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 1.5rem;
}
.header_img {
width: 40px;
height: 40px
}
.header_img img {
width: 45px
}
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.r-navbar {
right: 0;
padding: 1rem 0 0 1rem;
width: 0;
}
.show-left-nav {
width: calc(var(--nav-width) + 188px)
}
.body-menu-pd {
padding-left: calc(var(--chat-width) + 188px)
}
.show-right-nav {
width: calc(var(--chat-width) + 188px)
}
.body-chat-pd {
padding-right: calc(var(--chat-width) + 192px)
}
}
/* Media queries for conditional borders on games */
.game-col {
border-left: none;
}
.game-block {
border-bottom: none;
}
.game-top {
border-top: 1px solid var(--white-color);
}
#media (min-width: 576px) {
.game-col {
border-left: 1px solid var(--white-color);
}
.game-block {
border-bottom: 1px solid var(--white-color);
}
.game-top {
border-top: none;
}
}
/* crash game */
.crash-canvas {
height: 90%;
width: 100%;
max-width: 750px;
border-radius: 7px;
background-color: #0f1923;
margin: 0rem auto 2rem auto;
}
/* betting menu */
.bet-menu-buttons {
border-radius: 0.8rem;
width: 55px;
height: 50px;
font-size: 1.0rem;
color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
background-color: #262833;
color: #fff;
}
.crash-result {
border-radius: 0.8rem;
width: 40px;
height: 35px;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
background-color: #262833;
color: #fff;
}
.bettor-table-item {
border-bottom: 1px solid var(--white-color);
}
.bet-box1 {
border-left: 0.5px solid var(--field-grey-transparency);
border-top: 0.5px solid var(--field-grey-transparency);
border-right: 0.0px solid var(--field-grey-transparency);
border-bottom: 0.5px solid var(--field-grey-transparency);
}
.bet-box2 {
border-left: 0.0px solid var(--field-grey-transparency);
border-top: 0.5px solid var(--field-grey-transparency);
border-right: 0.0px solid var(--field-grey-transparency);
border-bottom: 0.5px solid var(--field-grey-transparency);
}
.bet-box3 {
border-left: 0.5px solid var(--field-grey-transparency);
border-top: 0.5px solid var(--field-grey-transparency);
border-right: 0.5px solid var(--field-grey-transparency);
border-bottom: 0.5px solid var(--field-grey-transparency);
}
.bet-box3:focus {
border-left: 0.5px solid var(--field-grey-transparency);
border-top: 0.5px solid var(--field-grey-transparency);
border-right: 0.5px solid var(--field-grey-transparency);
border-bottom: 0.5px solid var(--field-grey-transparency);
}
/* pre-footer */
.pre-footer {
height: 700px;
}
#media (min-width: 576px) {
.pre-footer {
height: 200px;
}
.footer-padding {
padding-left: var(--nav-width);
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--Container Main start-->
<div class="height-100 main-container-page">
<div class="container h-100">
<div class="row gx-0">
<div class="col-12 col-sm-5 order-sm-1 order-2 bg-transparent text-center game-top pt-5 pb-5 ps-5 pe-5 d-flex flex-column justify-content-evenly">
<div class="input-group mb-3 pb-3">
<span class="bet-box1 bg-primary text-white fw-bold input-group-text">Amount</span>
<span class="bet-box2 bg-primary text-white fw-bold input-group-text">TC</span>
<input type="text" class="bet-box3 bg-primary text-white form-control" placeholder="select value here" aria-label="Dollar amount (with dot and two decimal places)">
</div>
<div class="d-flex justify-content-between mb-3 pb-3">
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
2x
</div>
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
10x
</div>
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
1/2
</div>
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
+5
</div>
<div class="bet-menu-buttons bg-primary text-white border border-field-grey-transparency">
+10
</div>
</div>
<div class="d-block flex-column justify-content-center align-items-start mb-3 pb-3">
<span class="text-white fw-bold">
Select your side
</span>
</div>
<div class="d-block justify-content-arround h-100 w-100 mb-3 pb-3">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2">
</div>
<div class="d-flex flex-column mb-3 pb-3">
<button class="btn btn-secondary fw-bold border border-secondary rounded-pill">Bet</button>
</div>
<div class="d-flex justify-content-between pt-3">
<div class="d-block ps-3">
<i class="fas fa-expand fa-2x text-white"></i>
</div>
<div class="d-flex pe-3">
<div class="d-block">
<i class="fas fa-history fa-2x text-white"></i>
</div>
<div class="d-block ps-3">
<i class="fas fa-volume-mute fa-2x text-white"></i>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-7 order-sm-2 order-1 bg-transparent text-center game-col pb-5">
<div class="d-block h-80 game-block pt-4 ps-4 pe-4">
<div class="d-block h-3 ps-5 pt-3 pb-5">
<div class="d-flex bg-transparent w-92 position-relative" style="height: 22px;">
<span class="position-absolute w-100 start-0 text-white fw-bold">Girando em 00:20</span>
<div id="time-bar" class="d-flex border border-0 border-primary rounded-pill bg-secondary ps-1 pe-1 pt-1 pb-1" style="height: 22px; width: 5%;"></div>
</div>
</div>
<div class="d-flex">
<div class="coin" id="coin" data-spin="tails">
<div class="coin__front"></div>
<div class="coin__edge">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="coin__back"></div>
<div class="coin__shadow"></div>
</div>
</div>
</div>
<div class="d-flex flex-column h-35 game-top ps-3 pt-3 pb-5">
<div class="d-flex text-white fw-bold ms-1 mb-2">
Last runs:
</div>
<div class="d-flex justify-content-start">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin1.png" alt="coin1" style="min-width: 0;">
<img class="coin-bet-button ps-2 pe-2" src="./img/coin2.png" alt="coin2" style="min-width: 0;">
</div>
</div>
</div>
</div>
<!-- Row for displaying bets -->
<div class="row mt-5 pb-5 mb-5 gx-0">
<div class="col-12 col-sm-5 bg-primary mt-5">
<div class="container pt-3 pb-3 ps-3 pe-3">
<div class="row gx-0 border-bottom border-white border-2 pb-4">
<div class="col-4">
<img class="mx-auto d-block w-50" src="./img/coin1.png" alt="heads">
</div>
<div class="col-2"></div>
<div class="col-6 align-self-center">
<div class="text-white" style="font-size: xx-large;"> Win 1.9x</div>
</div>
</div>
<div class="row gx-0">
<div class="col-12 mt-3">
<div class="d-flex justify-content-between">
<div class="d-block">
<span class="text-white">Total bets</span>
</div>
<div class="d-block">
<div class="text-white" style="font-size: larger;"><span class="fw-bold">0 TC</span></div>
</div>
</div>
</div>
</div>
<div class="row gx-0 bg-secondary mt-3">
<div class="col-8 text-left text-white ps-3">User</div>
<div class="col-4 text-center text-white">Bet</div>
</div>
<div class="row gx-0 pt-2 pb-2 ">
<div class="col-8 text-left text-white ps-3">Elon Musk</div>
<div class="col-4 text-center text-white">270 TC</div>
</div>
<div class="row gx-0 pt-2 pb-2 ">
<div class="col-8 text-left text-white ps-3">Tony Ramos</div>
<div class="col-4 text-center text-white">135 TC</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
<div class="col-12 col-sm-5 bg-primary bg-opacity-50 mt-5">
<div class="container pt-3 pb-3 ps-3 pe-3">
<div class="row gx-0 border-bottom border-white border-2 pb-4">
<div class="col-4">
<img class="mx-auto d-block w-50" src="./img/coin2.png" alt="heads">
</div>
<div class="col-2"></div>
<div class="col-6 align-self-center">
<div class="text-white" style="font-size: xx-large;"> Win 1.9x</div>
</div>
</div>
<div class="row gx-0">
<div class="col-12 mt-3">
<div class="d-flex justify-content-between">
<div class="d-block">
<span class="text-white">Total bets</span>
</div>
<div class="d-block">
<div class="text-white" style="font-size: larger;"><span class="fw-bold">0 TC</span></div>
</div>
</div>
</div>
</div>
<div class="row gx-0 bg-secondary mt-3">
<div class="col-8 text-left text-white ps-3">User</div>
<div class="col-4 text-center text-white">Bet</div>
</div>
<div class="row gx-0 pt-2 pb-2 ">
<div class="col-8 text-left text-white ps-3">Elon Musk</div>
<div class="col-4 text-center text-white">270 TC</div>
</div>
<div class="row gx-0 pt-2 pb-2 ">
<div class="col-8 text-left text-white ps-3">Tony Ramos</div>
<div class="col-4 text-center text-white">135 TC</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Container Main end-->
<a class="position-fixed bottom-5 end-5 float-icon-chat" id="chatButton" role="button">
<span class="position-absolute top-15 start-20"><i class="far fa-comment-dots" style="font-size: 40px;"></i></span>
</a>
<div class="pre-footer mt-5 pt-5 mb-5 pb-5"></div>
<footer class="text-center text-lg-start bg-primary text-muted pt-5 mt-5 w-100">
<div class="container text-center text-md-start mt-5">
<div class="row mt-3">
<div class="col-6 mx-auto mt-5 mb-5">
<div class="d-block justify-content-center">
<div class="d-flex justify-content-center">
<img class="w-40 h-auto center-block" src="./img/Logo horizontal.png" alt="Vegaz logo">
</div>
<div class="d-flex justify-content-center mt-3">
<i class="fab fa-instagram fa-4x me-3"></i>
<i class="fab fa-facebook fa-4x"></i>
</div>
</div>
</div>
<div class="col-1"></div>
<div class="col-5 mx-auto mt-4 mb-4 position-relative">
<div class="d-flex">
<h3 class="text-white fw-bold">About Us</h3>
</div>
<div class="d-flex">
Terms of service
</div>
<div class="d-flex">
Privacy policy
</div>
<div class="d-flex position-absolute bottom-0 start-2">
<span>©2022 Vegaz All rights reserved</span>
</div>
</div>
</div>
</div>
</footer>

You're assigning the main containers a fixed height based on the viewport size (classes height-100 and h-100), even when the viewport is smaller than the content of those containers. The content will therefore overflow the container into whatever comes after it, in this case the footer.

How to make psd image in html

I am working on project where in final result, I need to have like this
As you can see in modal, there is background-image and 2 icons, my problem is I don't know how to make it,
I did a div with image background but for icons I have them in psb format and I don't know how to put them on the background in beautiful way .
I tried to screen part of icon and put it but it wasn't good
<section id="about">
<div class="container-fluid mt-0" style="background-image: url(background.png);background-size:cover;height:550px">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading mt-5">Nos activités</h2>
</div>
</div>
<div class="row text-center" >
<div class="col-md-6 image" >
<img src="icon1.png">
</div>
<div class="col-md-6" style="padding-top: 100px">
<img src="icon2.png">
</div>
</div>
<!--
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading ">Nos dernières réalisataions</h2>
</div>
</div>
</div>-->
</section>

This is the structure I'm doing - just replace the images and add the font type
.activities {
background-image: url('http://inspirationhut.net/wp-content/uploads/2013/05/61.png');
background-position: center;
background-size: cover;
width: 100%;
min-height: 100vh;
}
.activities .title {
margin: 0;
padding: 25px 0;
color: #5ABF28;
font-weight: bold;
}
.activities .row {
min-height: calc(100vh - 135px);
align-items: center;
}
.activities .activity {
display: block;
text-decoration: none;
margin: 10px auto;
}
.activities .activity p {
font-weight: bold;
color: #999;
}
.activities .activity button {
width: 30px;
height: 30px;
line-height: 0;
border-radius: 100%;
padding: 0;
margin: 0;
outline: 0;
background: none;
border: 2px solid #aaa;
font-size: 20px;
color: #999;
padding-bottom: 10px;
}
.activities .activity:hover p,
.activities .activity:hover button {
color: #5ABF28;
border-color: #5ABF28;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="activities text-center">
<div class="container">
<h2 class="title pt-5">Nos activités</h2>
<div class="row">
<div class="col-sm">
<a href="#" class="activity">
<img src="https://www.ikea.com/in/en/images/products/smycka-artificial-flower__0903311_PE596728_S5.JPG?f=s" alt="icon 1" height="120" />
<p class="text-uppercase mt-3">entretien de jardin</p>
<button>...</button>
</a>
</div>
<div class="col-sm">
<a href="#" class="activity">
<img src="https://www.ikea.com/us/en/images/products/smycka-artificial-flower-rose-white__0903190_PE596774_S5.JPG" alt="icon 1" height="120" />
<p class="text-uppercase mt-3">creation de jardin</p>
<button>...</button>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

Text coming out of the card and overlay the image

I developed a bootstrap card, inside that bootstrap card I am putting another one.
My problem is that when I reduce the screen size the text comes out of the card and also overlays the image, how can I solve this?
Demo
code
<div class="card-deck cardsZone">
<div class="card myCards">
<div class="card-body">
<div *ngFor="let pr of ProgressDashTasks">
<div class="card mysmallCcards">
<div class="card-body">
<div class="row">
<div class="col-sm-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgDash">
</div>
<div class="col-sm-8">
<span class="brandName">MY PERCENTAGE</span>
<p class="subtitledash">New percentage</p>
</div>
</div>
<hr class="solid">
<div class="row">
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
</div>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
</div>
Image Problem

On .cardsZone you have to use a relative width and not an absolute one. Use width: fit-content:
.cardsZone{
margin-top: 5%;
width: fit-content;
height: 70%;
margin-right: auto;
margin-left: auto;
}
.myCards{
background: #E7EAF180 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
border: none;
}
.card-deck .card {
margin-left: 0px;
}
.mysmallCcards{
width: 100%;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
border: none;
margin-top: 20px;
}
.card-header:first-child {
border-radius: calc(9px - 1px) calc(9px - 1px) 0 0;
}
.mycardHeader{
background-color: white;
}
.imgDash{
width: 40px;
height: 40px;
border-radius: 8px;
}
.brandName{
text-align: left;
font-family: 'Noto Sans', sans-serif;
font-size: 22px;
letter-spacing: 0;
color: #4D4F5C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 0px;
font-weight: re;
}
.subtitledash{
text-align: left;
font-family: 'Noto Sans', sans-serif;
font-size: 13px;
font-weight: bold;;
letter-spacing: 0;
color: #4D4F5C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.imgusersDash{
width: 24px;
height: 24px;
transform: matrix(1, 0, 0, 1, 0, 0);
border-radius: 8px;
margin-left: 15px;
}
hr.solid {
border-top: 1px solid #999;
width:100%
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="card-deck cardsZone">
<div class="card myCards">
<div class="card-body">
<div *ngFor="let pr of ProgressDashTasks">
<div class="card mysmallCcards">
<div class="card-body">
<div class="row">
<div class="col-sm-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgDash">
</div>
<div class="col-sm-8">
<span class="brandName">MY PERCENTAGE</span>
<p class="subtitledash">New percentage</p>
</div>
</div>
<hr class="solid">
<div class="row">
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
</div>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
</div>

display: inline-block wont center in bootstrap

I'm trying to fit the content box to the length of the text, while also centering them under my images. I am using bootstrap grid system.
HTML
<div class="row textbackground">
<div class="col-md-4">
<img class="imgsize img-fluid" src="math.jpg" alt="student">
<p class="subtext text-center" >Student by Day</p>
</div>
<div class="col-md-4">
<img class="imgsize img-fluid" src="coder.jpeg" alt="web design">
<p class="subtext text-center" >Evening Web Developer</p>
</div>
<div class="col-md-4">
<img class="imgsize img-fluid" src="rockstar.jpg" alt="rockstar">
<p class="subtext">Rockstar by Night</p>
</div>
</div>
CSS
.imgsize{
height: 250px;
width: auto;
border-style: solid;
border-width: 10px;
border-radius: 50%;
border-color: #111111;
display: block;
margin:0 auto;
}
.subtext{
padding-top: 20px;
background-color: #6c757d;
display: inline-block;
text-align: center;
}
Result
This is what I end up with

Add text-center class to parent element in your case col-md-4
You try to text the center within the element which itself is not centered nor it is of a full width.

.imgsize{
height: 250px;
width: auto;
border-style: solid;
border-width: 10px;
border-radius: 50%;
border-color: #111111;
display: block;
margin:0 auto;
}
.subtext{
padding-top: 20px;
background-color: #6c757d;
display: inline-block;
text-align: center;
}
.col-md-4{
text-align:center;
}
<div class="row textbackground">
<div class="col-md-4">
<img class="imgsize img-fluid" src="math.jpg" alt="student">
<p class="subtext text-center" >Student by Day</p>
</div>
<div class="col-md-4">
<img class="imgsize img-fluid" src="coder.jpeg" alt="web design">
<p class="subtext text-center" >Evening Web Developer</p>
</div>
<div class="col-md-4">
<img class="imgsize img-fluid" src="rockstar.jpg" alt="rockstar">
<p class="subtext">Rockstar by Night</p>
</div>
</div>
add text-align and make it center as showen in the snippet.