I have a problem wherein the items inside cards does not align with each other when I add other text/s.
as you can see in the image below the items from books and recommended books are matched/aligned..
and here's the image when I am adding the view count in recommended books.
as you can see, the items in book 1 is adjust and I do not want that to happen I want to match/align from number 1 in books and number 1 in recommended books even after adding the view count in recommended books.
So here's my code for the cards.
<div class="col">
<div class="card w-100 h-100" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">Books</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">1</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">2</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">3</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">4</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card w-100 h-100" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">Recommended Books</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">1</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">2</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">3</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>.
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">4</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
</div>
</div>
as far as I know that w-100 and h-100 makes the cards responsive to each other. However I want the items from books and recommended books items to match.. I did w-100 and h-100 to make responsive with the width and height of the card.
Edit: I have removed the h-100 in my card and this was the result. I want the books' and recommended's height should be matched. However when I am returning it back, the items are not aligning as shown in the second image.
Remove the h-100 class on the card-body wrapper:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row">
<div class="col">
<div class="card w-100" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">Books</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">1</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">2</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">3</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">4</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card w-100 h-100" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">Recommended Books</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">1</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">2</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">3</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>.
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
<p class="p-3 mr-2">4</p>
<div>
<a class="fancybox" href="admin/files/Images/Networking_Security.png">
<img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
<span class="col m-0">Views: 28</span>
<button class="col m-0 btn btn-info btn-sm">View</button>
</div>
</div>
</div>
</div>
</div>
Related
I am having trouble figuring out how to adjust every <p> tag. It always goes beside the the name should be here. I want the should be below the name.
<div class="card" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">The title should be here...</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2">
<div>
<a class="fancybox" href="admin/files/Images/ProfilePicture.png">
<img src="admin/files/Images/ProfilePicture.png" style="width: 100px; height: 100px">
</a>
</div>
<p class="col p-2 m-0">The name should be here...</p>
</div>
<div>
</div>
</div>
Try this
<div class="card" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">The title should be here...</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2">
<div>
<a class="fancybox" href="admin/files/Images/ProfilePicture.png">
<img src="admin/files/Images/ProfilePicture.png" style="width: 100px; height: 100px">
</a>
</div>
<div class="card-body">
<p class="card-text">The name should be here...</p>
<p class="card-text">age</p>
<p class="card-text">address</p>
</div>
</div>
</div>
Below will also work
<div class="card" style="width: 25rem;">
<div class="card-body bg-light">
<h5 class="card-title text-center">The title should be here...</h5>
</div>
<div class="card-img-top d-flex align-items-top bg-light p-2">
<div>
<a class="fancybox" href="admin/files/Images/ProfilePicture.png">
<img src="admin/files/Images/ProfilePicture.png" style="width: 100px; height: 100px">
</a>
</div>
<table cellpadding="0" cellspacing="0">
<tr><td><p class="col p-2 m-0">The name should be here...</p></td></tr>
<tr><td><p class="col p-2 m-0">Age</p></td></tr>
<tr><td><p class="col p-2 m-0">Address</p></td></tr>
</table>
</div>
<div>
</div>
</div>
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 the web designing and I am trying to put a button and a text on an image. I could do this but the problem is that it's not responsive. Could somebody help me fix it?
My code:
.imagewrap {display:inline-block;position:relative;}
.bookbutton {position:absolute;bottom:25px;left:505px;}
.bottom-left {
position: absolute;
bottom: 25px;
left: 20px;
font-weight: bold;
font-stretch:ultra-condensed;
font-size: 20px;
padding-right: 10px;
padding-left: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="main_heading my-5">
<div class="text-center">
<h1 class="display-1">Games available for paying</h1>
<h5 class="display-6">Book your slot now</h5>
<hr class="w-25 mx-auto" />
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
<figure>
<img src="https://via.placeholder.com/150" alt="FIFA 2020" class="img-fluid naFIFA ">
</figure>
<div class="bottom-left p-6 mb-0 bg-secondary text-light "> FIFA 2020 </div>
<button type="button" class="btn btn-info bookbutton ">Book Now</button>
</div>
<div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
<figure>
<img src="https://via.placeholder.com/150" alt="NFS Heat" class="img-fluid naNFS">
</figure>
<button type="button" class="btn btn-info bookbutton">Book Now</button>
<div class="bottom-left p-6 mb-0 bg-secondary text-light"> NFS- Heat </div>
</div>
<div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
<figure>
<img src="https://via.placeholder.com/150" alt="Controller" class="img-fluid naNFS">
</figure>
<button type="button" class="btn btn-info bookbutton">Book Now</button>
<div class="bottom-left p-6 mb-0 bg-secondary text-light"> DualShock 4 </div>
</div>
</div>
</div>
</section>
I have done it with the help of some online tutorials and I want to use Bootstrap in my code.
Edit:
I forgot to mention that I have the problem with the button, which always stays in the same place when I resize the browser. Other items seem to be OK to me, but kindly point out if I have made any other blunders in my code as a newbie.
Change left:505px; on .bookbutton to right: 0; and it will stay on the right side of the container.
full code:
.imagewrap {
display: inline-block;
position: relative;
}
.bookbutton {
position: absolute;
bottom: 25px;
right: 0;
}
.bottom-left {
position: absolute;
bottom: 25px;
left: 20px;
font-weight: bold;
font-stretch: ultra-condensed;
font-size: 20px;
padding-right: 10px;
padding-left: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<section class="main_heading my-5">
<div class="text-center">
<h1 class="display-1">Games available for paying</h1>
<h5 class="display-6">Book your slot now</h5>
<hr class="w-25 mx-auto" />
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
<figure>
<img src="https://via.placeholder.com/150" alt="FIFA 2020" class="img-fluid naFIFA ">
</figure>
<div class="bottom-left p-6 mb-0 bg-secondary text-light "> FIFA 2020 </div>
<button type="button" class="btn btn-info bookbutton ">Book Now</button>
</div>
<div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
<figure>
<img src="https://via.placeholder.com/150" alt="NFS Heat" class="img-fluid naNFS">
</figure>
<button type="button" class="btn btn-info bookbutton">Book Now</button>
<div class="bottom-left p-6 mb-0 bg-secondary text-light"> NFS- Heat </div>
</div>
<div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
<figure>
<img src="https://via.placeholder.com/150" alt="Controller" class="img-fluid naNFS">
</figure>
<button type="button" class="btn btn-info bookbutton">Book Now</button>
<div class="bottom-left p-6 mb-0 bg-secondary text-light"> DualShock 4 </div>
</div>
</div>
</div>
</section>
Here is your answer just change your images and don't forget to link bootstrap 4.
Otherwise it will overlap the content.
.bookbutton {
position: absolute;
bottom: 25px;
right: 20px;
}
.bottom-left {
position: absolute;
bottom: 25px;
left: 20px;
font-weight: bold;
font-stretch: ultra-condensed;
font-size: 20px;
padding-right: 10px;
padding-left: 10px;
}
<section class="main_heading my-5">
<div class="text-center">
<h1 class="display-1">Games available for paying</h1>
<h5 class="display-6">Book your slot now</h5>
<hr class="w-25 mx-auto" />
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 mb-4">
<div class="position-relative">
<img
src="https://placeimg.com/640/480/nature"
alt="FIFA 2020"
class="img-fluid naFIFA"
/>
<span class="bottom-left p-6 mb-0 bg-secondary text-light">
FIFA 2020
</span>
<button type="button" class="btn btn-info bookbutton">
Book Now
</button>
</div>
</div>
<div class="col-12 col-md-6 mb-4">
<div class="position-relative">
<img
src="https://placeimg.com/640/480/nature"
alt="FIFA 2020"
class="img-fluid naFIFA"
/>
<span class="bottom-left p-6 mb-0 bg-secondary text-light">
NFS-HEAT
</span>
<button type="button" class="btn btn-info bookbutton">
Book Now
</button>
</div>
</div>
<div class="col-12 col-md-6 mb-4">
<div class="position-relative">
<img
src="https://placeimg.com/640/480/nature"
alt="FIFA 2020"
class="img-fluid naFIFA"
/>
<span class="bottom-left p-6 mb-0 bg-secondary text-light">
Dualshock 4
</span>
<button type="button" class="btn btn-info bookbutton">
Book Now
</button>
</div>
</div>
</div>
</div>
</section>
I have 4 cards that i need to add some spacing between all of them because it looks like they are one into another. I've tried with adding margin-left but it doesn't really work also I've tried to add the class ml-2 but if i do that it will place one card into another row which i also don't want that:(
Code:
<div class="container">
<h2>Test:</h2>
<div class="row">
<div class="col-sm-3">
<div class="card ml-2" style="width: 20rem;">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0lnPcJXGCIDU-L8lq6wdfh9vFzaLupc405LLlxlcKqx4zYnnQ" alt="Card image cap">
<div class="card-body text-center">
<p class="card-text text-center" style="color:black">Dacia Logan</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-md-6">
<i class="material-icons"></i><span>15800</span>
</div>
<div class="col-md-6">
<i class="material-icons"></i><span>Bucuresti</span>
</div>
</div>
</li>
</ul>
<button href="#" class="btn btn-danger">Save</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card ml-2" style="width: 20rem;">
<img class="card-img-top" src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Card image cap">
<div class="card-body text-center">
<p class="card-text text-center" style="color:black">Dacia Logan</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-sm-6">
<i class="material-icons"></i><span>5800</span>
</div>
<div class="col-sm-6">
<i class="material-icons"></i><span>Bucuresti</span>
</div>
</div>
</li>
</ul>
<button href="#" class="btn btn-danger">Save</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card ml-2" style="width: 20rem;">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0lnPcJXGCIDU-L8lq6wdfh9vFzaLupc405LLlxlcKqx4zYnnQ" alt="Card image cap">
<div class="card-body text-center">
<p class="card-text text-center" style="color:black">Dacia Logan</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-sm-6">
<i class="material-icons"></i><span>5800</span>
</div>
<div class="col-sm-6">
<i class="material-icons"></i><span>Bucuresti</span>
</div>
</div>
</li>
</ul>
<button href="#" class="btn btn-danger">Save</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://www.carmag.co.za/wp-content/uploads/2016/11/Golf10.jpg" alt="Card image cap">
<div class="card-body text-center">
<p class="card-text text-center" style="color:black">Dacia Logan</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-sm-6">
<i class="material-icons"></i><span>5800</span>
</div>
<div class="col-sm-6">
<i class="material-icons"></i><span>Bucuresti</span>
</div>
</div>
</li>
</ul>
<button href="#" class="btn btn-danger">Save</button>
</div>
</div>
</div>
</div>
Thanks!
Try to put padding on the card class:
padding: 10px;
You could use one of the Bootstrap spacing utilities.
https://getbootstrap.com/docs/4.1/utilities/spacing/
For example, place this div between two cards:
<div class="mt-3" />
I am developing a responsive column layout for an online shopping website. I want to render 5 columns in the big-screen and 2 columns in the mobile screen using Bootstrap4. Below 576px only one column renders in fullscreen instead of two columns. How do I fix it? I have tried inserting .d-block .d-sm-none class but it is not rendering properly. I have attached the code to the same.
<div class="container">
<div class="card-deck">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="images/shoe7.png" alt="adidas 1">
<div class="card-body text-center">
<h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i> 800</span></h4>
<h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i> 350</span></b></h2>
<h5>It is inspired by two icons of big Air: the Air Max 180</h5>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="images/shoe6.png" alt="Card image cap">
<div class="card-body text-center">
<h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i> 800</span></h4>
<h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i> 350</span></b></h2>
<h5>Vostro winner sports shoes for gents</h5>
</div>
</div>
<div class="d-block d-sm-none">
<!-- wrap every 2 on xs-->
</div>
<div class="w-100 d-none d-sm-block d-md-none">
<!-- wrap every 2 on sm-->
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="images/shoe9.png" alt="Card image cap">
<div class="card-body text-center">
<h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i> 800</span></h4>
<h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i> 350</span></b></h2>
<h5>With a textured upper that flaunts a perforated effect</h5>
</div>
</div>
<div class="w-100 d-none d-md-block d-lg-none">
<!-- wrap every 3 on md-->
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="images/shoe10.png" alt="Card image cap">
<div class="card-body text-center">
<h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i> 800</span></h4>
<h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i> 350</span></b></h2>
<h5> Pure adidas heritage with modern materials</h5>
</div>
</div>
<div class="d-block d-sm-none">
<!-- wrap every 2 on xs-->
</div>
<div class="w-100 d-none d-sm-block d-md-none">
<!-- wrap every 2 on sm-->
</div>
<div class="w-100 d-none d-lg-block d-xl-none">
<!-- wrap every 4 on lg-->
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="images/shoe1.png" alt="Card image cap">
<div class="card-body text-center">
<h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i> 800</span></h4>
<h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i> 350</span></b></h2>
<h5>Inspired by the popular Gatorade flavor</h5>
</div>
</div>
<div class="w-100 d-none d-xl-block">
<!-- wrap every 5 on xl-->
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="images/shoe8.png" alt="Card image cap">
<div class="card-body text-center">
<h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i> 800</span></h4>
<h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i> 350</span></b></h2>
<h5>This features floating laces and a welded heel piece</h5>
</div>
</div>
<div class="d-block d-sm-none">
<!-- wrap every 2 on xs-->
</div>
<div class="w-100 d-none d-sm-block d-md-none">
<!-- wrap every 2 on sm-->
</div>
<div class="w-100 d-none d-md-block d-lg-none">
<!-- wrap every 3 on md-->
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="images/shoe3.png" alt="Card image cap">
<div class="card-body text-center">
<h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i> 800</span></h4>
<h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i> 350</span></b></h2>
<h5>Adidas Originals Hu Pharrell Williams' sock-like knit</h5>
</div>
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="images/shoe4.png" alt="Card image cap">
<div class="card-body text-center">
<h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i> 800</span></h4>
<h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i> 350</span></b></h2>
<h5>Stone-cracked reflective mesh upper with pigskin</h5>
</div>
</div>
<div class="d-block d-sm-none">
<!-- wrap every 2 on xs-->
</div>
<div class="w-100 d-none d-sm-block d-md-none">
<!-- wrap every 2 on sm-->
</div>
<div class="w-100 d-none d-lg-block d-xl-none">
<!-- wrap every 4 on lg-->
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="images/shoe5.png" alt="Card image cap">
<div class="card-body text-center">
<h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i> 800</span></h4>
<h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i> 350</span></b></h2>
<h5>Women Soft Leather Breathable Comfy Flats</h5>
</div>
</div>
<div class="w-100 d-none d-md-block d-lg-none">
<!-- wrap every 3 on md-->
</div>
<div class="card mb-4">
<img class="card-img-top img-fluid" src="images/shoe2.png" alt="Card image cap">
<div class="card-body text-center">
<h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i> 800</span></h4>
<h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i> 350</span></b></h2>
<h5>Limnos CAT 3 IDP Shoes. Black-Barbados Cherry.</h5>
</div>
</div>
</div>
</div>
You need to use this if you want 5 cards across on md and up...
<div class="w-100 d-none d-md-block">
<!-- wrap every 5 over md -->
</div>
And, this every 2 cards...
<div class="w-100 d-block d-md-none">
<!-- wrap every 2 under md -->
</div>
And, the only way to prevent stacking into 1 column on xs widths is to override the Bootstrap card-deck like this...
#media (max-width:576px){
.card-deck .card {
flex: 1 0 0%;
margin-left: 15px;
margin-right: 15px;
}
}
Demo: https://www.codeply.com/go/dM24G9jdal