I have run into a problem when trying to code my semester project.
I'm trying to center all of this content right in the middle of the bootstrap card but It just can't seem to work:(
If someone can help me I would be really grateful!
Also if I can the card height taller.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="card mt-5 container p-5 card-w ">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://via.placeholder.com/600" class="card-img" alt="apples">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title h1 pl-5 mx-2 d-flex">Apple, Empire</h5>
<p class="card-text pl-5 mx-2 lead font-weight-bold d-flex">1.94$/kg</p>
<div class="container d-flex alignmentcard">
<div class="d-flex mx-3">
-
<p class="pt-2 lead">1</p>
+
<button class="buttonshad buttonstyling bg-primary text-light mx-5">Add to cart</button>
</div>
</div>
<div class="container pt-4">
<p>
<a class="mx-5" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
More details
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quos ullam, earum commodi autem fuga, aliquam maiores dolorem libero inventore, molestiae omnis nam ipsam error consequatur ut nisi eveniet dolorum!
</div>
</div>
</div>
</div>
</div>
</div>
Try wrapping every piece of your div from the beggining to the end with a <center></center> tag. After that, you would have something like this:
<center>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="card mt-5 container p-5 card-w ">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://via.placeholder.com/600" class="card-img" alt="apples">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title h1 pl-5 mx-2 d-flex">Apple, Empire</h5>
<p class="card-text pl-5 mx-2 lead font-weight-bold d-flex">1.94$/kg</p>
<div class="container d-flex alignmentcard">
<div class="d-flex mx-3">
-
<p class="pt-2 lead">1</p>
+
<button class="buttonshad buttonstyling bg-primary text-light mx-5">Add to cart</button>
</div>
</div>
<div class="container pt-4">
<p>
<a class="mx-5" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
More details
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quos ullam, earum commodi autem fuga, aliquam maiores dolorem libero inventore, molestiae omnis nam ipsam error consequatur ut nisi eveniet dolorum!
</div>
</div>
</div>
</div>
</div>
</div>
</center>
Related
I am following this BootStrap 5 Crash Course: https://www.youtube.com/watch?v=4sosXZsdy-s. This end-result website is: https://www.frontendbootcampdemo.com
In it, there's a part where Cards are used. The problem I am seeing is that if the text length differs, the cards do not align properly. Here is the HTML for that:
<section class="p-5">
<div class="container">
<div class="row text-center g-4">
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-secondary text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybrid</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In Person</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
I have tried adding h-100 to the card-body. The problem is that, while all the cards keep the same height, the buttons are not aligned at the bottom.
How do I keep the cards at the same height and keep the buttons aligned at the bottom?
Thank you!
You can play around with flex CSS. Let me demo to you by using back your code.
add .h-100 to .card
add .d-md-flex and .flex-column to .card-body
add .flex-grow-1 to .card-text
Voila~ My method is just demonstratte one of the method to achieve what you want but still it is depends on what you want the layout to become in different screen sizing at the end.
You can refer this page for full capability of flexbox for Bootstrap 5.
Hope it helps.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<section class="p-5">
<div class="container">
<div class="row text-center g-4">
<div class="col-md">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur.
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-secondary text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybrid</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In Person</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
I wrote below code. The issue was between image and font of refreshment-1 (classes are refreshment s-info-1 and refreshments-pic-1, a gap that just showed the background color of equipment-section and wasn't padding or margin. I tried setting gutters, padding and margins of all elements to 0 but that didn't help.
This is the code that worked. I changed col-lg-3 col-12 d-lg-block d-flex to col-lg-3 col-12 d-flex flex-column , which caused it to work
<div class="equipment-section">
<h1 class="equipment-h1">Our Stock</h1>
<h2 class="equipment-h2">IS AWESOME!</h2>
<div class="container-fluid collage-padding">
<div class="row gx-0">
<div class="col-lg-3 col-8 rackets-info">
<i class="bi bi-tag"></i>
<h3 class="equipment-h3">Racquets</h3>
<span class="separator"></span>
<h4 class="equipment-h4">Yonex Astrox</h4>
<p class="equipment-p">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione
exercitationem, ex ipsam aliquam eius consequatur ducimus
repellendus nobis delectus at?
</p>
<h4 class="equipment-h4">FRRM 9.99$</h4>
</div>
<div class="col-lg-3 col-4 rackets-pic"></div>
<div class="col-lg-3 col-12 d-flex flex-column">
<div class="col-lg-12 col-8 refreshments-info-1">
<i class="bi bi-tag"></i>
<h3 class="col-small-h3">Refreshments</h3>
<span class="separator-orange"></span>
<h4 class="col-small-h4">PIZZA</h4>
<h5 class="col-small-h5">FROM 4.99$</h5>
</div>
<div class="col-lg-12 col-4 refreshments-pic-1"></div>
</div>
<div class="col-lg-3 col-12 d-lg-block d-flex">
<div class="col-lg-12 col-8 refreshments-pic-2"></div>
<div class="col-lg-12 col-4 refreshments-info-2">
<i class="bi bi-tag"></i>
<h3 class="col-small-h3">Refreshments</h3>
<span class="separator-orange"></span>
<h4 class="col-small-h4">SHAWARMA</h4>
<h5 class="col-small-h5">FROM 15.99$</h5>
</div>
</div>
</div>
I understand why display:flex with flex-direction as column gives me needed result. I want to know why d-lg-block wouldn't give me same result in large screen view. My implementation was this: I had two col-12s inside a col-3 inside a row inside a container.
I am trying to learn bootstrap. I took the code from the bootstrap docs for the 'Flush' Accordion but mine just looks completely wrong. I don't understand why. I've linked the CSS stylesheet and the JS Bundle. This is what it looks like.
I haven't tampered with the default code at all. I don't understand what I am doing wrong. Any help appreciated, thank you.
Here is my code: (the accordion is at the very bottom)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-2 fixed-top">
{ }
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navmenu">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
Courses
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
<section class="bg-white text-light p-5 p-lg-0" id="home">
<div class="container">
<div class="d-sm-flex align-items-center">
<div class="text-center text-sm-start">
<h1 class="text-dark">Become a <span class="text-primary">Web Developer</span></h1>
<p class="lead text-dark">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste labore voluptatum nisi non error
impedit alias ullam. Sint numquam quae minus quam, aut rem, sed officiis inventore consectetur
eveniet veniam.
</p>
<button class="btn btn-primary btn-lg">Start Now</button>
</div>
<img src="/images/home.jpg" class="img-fluid w-50 d-none d-md-inline-block" alt="Responsive image">
</div>
</div>
</section>
<section class="bg-dark text-light p-5">
<div class="container d-flex justify-content-center">
<div class="d-md flex justify-content-between align-items-center">
<h3 class="mb-3 mb-md-0 pb-2">Sign Up For Our Newsletter</h3>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Email" aria-label="Enter email"
aria-describedby="button-subscribe">
<button class="btn btn-primary" type="button" id="button-subscribe">Subscribe</button>
</div>
</div>
</div>
</section>
<section>
<div class="pt-5" id="courses">
<div class="container">
<div class="row text-center">
<div class="col-md">
<div class="card bg-dark text-light p-3">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
asperiores
tempora itaque delectus quod quasi.</p>
Read More
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light p-3">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybird</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
asperiores
tempora itaque delectus quod quasi.</p>
Read More
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light p-3">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In-Person</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
asperiores
tempora itaque delectus quod quasi.</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container text-center">
<div class="row align-items-center justify-content-between">
<div class="col-md">
<img src="/images/learn.jpg" alt="Learn image" class="img-fluid w-100">
</div>
<div class="col-md p-5">
<h2>Learn The Fundamentals</h2>
<p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed autem
quibusdam alias
magnam molestias facere.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, culpa libero.
Libero, sunt nam.
Vel voluptatum accusamus cupiditate dolore, distinctio, sapiente perspiciatis harum nihil
expedita repellat amet inventore non deleniti?</p>
<a href="" class="btn btn-primary mt-3">
<i class="bi bi-chevron-right"></i> Read More</a>
</div>
</div>
</div>
</section>
<section class="bg-dark">
<div class="container text-center">
<div class="row align-items-center justify-content-between text-light">
<div class="col-md p-5">
<h2>Build Projects</h2>
<p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed autem
quibusdam alias
magnam molestias facere.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, culpa libero.
Libero, sunt nam.
Vel voluptatum accusamus cupiditate dolore, distinctio, sapiente perspiciatis harum nihil
expedita repellat amet inventore non deleniti?</p>
<a href="" class="btn btn-primary mt-3">
<i class="bi bi-chevron-right"></i> Read More</a>
</div>
<div class="col-md">
<!-- <img src="" alt="Learn image" class="img-fluid w-100"> -->
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h1 class="text-center">Frequently Asked Questions</h1>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion
body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion
body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion
body. Nothing more exciting happening here in terms of content, but just filling up the
space to make it look, at least at first glance, a bit more representative of how this would
look in a real-world application.</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>
This is because you have bootstrap#4.0.0 in your link and in the script below you have bootstrap#5.1.3
Replace your link at the top with this one
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
That should make work your Accordion
This question already has answers here:
Bootstrap 4 card-deck with number of columns based on viewport
(11 answers)
Boostrap 4 - Card deck and different sizes
(3 answers)
bootstrap 4 card-deck containing cards with different width
(1 answer)
Closed 1 year ago.
I've seen a couple similar questions, but none of them seem to address cards that are generated. My goal is to have 4 or less cards per row, at a fixed height/width. Below is the code I currently have:
<div class="container">
<div class="card-deck">
#foreach (var item in Model)
{
<div class="card shadow">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="#item.TrainingId">#Html.DisplayFor(modelItem => item.Title)</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
#Convert.ToDateTime(item.DateCreated).ToString("MM/dd/yy")
</div>
#Html.DisplayFor(modelItem => item.Description)
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
#Html.DisplayFor(modelItem => item.Topic.Topic)
</div>
</div>
</div>
}
</div>
</div>
Currently it puts all the cards on a single row, and each card itself is incredibly thin. What do I have to add to get it to break off into multiple rows of fixed size?
Thanks for any help!
You can use Bootstrap’s grid system with row-cols-1 row-cols-md-2 to define how many cards in a row at each breakpoint. All of the cards will be the same height.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
</div>
</div>
</nav>
<div class="container mt-5">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">First Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/21/21
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 7 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Second Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/22/21
</div>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 6 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Third Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/24/21
</div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 5 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Fourth Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/25/21
</div>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 4 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Fifth Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/26/21
</div>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 3 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Sixth Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/27/21
</div>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 2 days ago
</div>
</div>
</div>
</div>
</div>
</div>
Hello the code below generates a Bootstrap page with some lorem text and a sidebar however when the height of the pages content is small than the size of the window the sidebar does not fill the screen vertically how do I make the height of the sidebar fill the screen vertically taking into account that the content of the page can be bigger than 100vh.
(To see the issue you have to view the full page preview)
.sidebar-user-box {
padding: 4px;
margin-bottom: 4px;
font-weight: bold;
cursor: pointer;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Media Site</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Media Site</a>
<div class="d-flex align-items-center">
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4" style="background-color: blue;"></div>
<div class="col-md-4 col-sm-4" style="background-color: white;">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
</div>
<div class="col-md-3 col-sm-3" style="background-color: blue;"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4" style="background-color: darkblue;"></div>
<div class="col-md-4 col-sm-4" style="background-color: gray;">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate in? </p>
</div>
<div class="col-md-3 col-sm-3" style="background-color: darkblue;"></div>
</div>
</div>
</main>
<nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
Add this to your css code .sidebar { height: 100vh;}
.sidebar-user-box {
padding: 4px;
margin-bottom: 4px;
font-weight: bold;
cursor: pointer;
color: white;
}
.sidebar { height: 100vh;}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Media Site</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Media Site</a>
<div class="d-flex align-items-center">
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4" style="background-color: blue;"></div>
<div class="col-md-4 col-sm-4" style="background-color: white;">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
</div>
<div class="col-md-3 col-sm-3" style="background-color: blue;"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4" style="background-color: darkblue;"></div>
<div class="col-md-4 col-sm-4" style="background-color: gray;">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate in? </p>
</div>
<div class="col-md-3 col-sm-3" style="background-color: darkblue;"></div>
</div>
</div>
</main>
<nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
The correct way would be to use d-flex flex-column vh-100 on the body, and then flex-grow-1 on the container. Then set the row to h-100 so it fill the height of the container...
<body class="d-flex flex-column vh-100">
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Media Site</a>
<div class="d-flex align-items-center">
</div>
</div>
</nav>
<div class="container-fluid flex-grow-1">
<div class="row h-100">
<main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
<div class="row">
<div class="col-md-5 col-sm-4" style="background-color: blue;"></div>
<div class="col-md-4 col-sm-4" style="background-color: white;">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
</div>
<div class="col-md-3 col-sm-3" style="background-color: blue;"></div>
</div>
<div class="row">
<div class="col-md-5 col-sm-4" style="background-color: darkblue;"></div>
<div class="col-md-4 col-sm-4" style="background-color: gray;">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate in? </p>
</div>
<div class="col-md-3 col-sm-3" style="background-color: darkblue;"></div>
</div>
</main>
<nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
https://codeply.com/p/WyZu1eBAfQ
Also, remove the inner container-fluids -- there not doing anything and it's not recommended to nest containers.
Related: v4 bootstrap full height sidebar
A full page is called a 'viewport' and you can design an element according to its viewport in CSS3.
Such units are called viewport-percentage lengths and are relative to the size of the initial containing block.
Viewport-Height is called vh. The complete height of a page is
100vh.
Viewport-Width is called vw. The complete height of a page is
100vw.
There also exist vmin (viewport minimum length) and vmax (viewport
maximum length).
So now, your problem can easily be solved by adding the following to your CSS:
.sidebar {
height: 100vh;
}
Here is information about the Viewport-relative lengths
The complete code then would be:
.sidebar-user-box {
padding: 4px;
margin-bottom: 4px;
font-weight: bold;
cursor: pointer;
color: white;
}
.sidebar {
height: 100vh;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Media Site</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Media Site</a>
<div class="d-flex align-items-center">
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4" style="background-color: blue;"></div>
<div class="col-md-4 col-sm-4" style="background-color: white;">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
</div>
<div class="col-md-3 col-sm-3" style="background-color: blue;"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4" style="background-color: darkblue;"></div>
<div class="col-md-4 col-sm-4" style="background-color: gray;">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate in? </p>
</div>
<div class="col-md-3 col-sm-3" style="background-color: darkblue;"></div>
</div>
</div>
</main>
<nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
Since your sidebar is not embedded in any size-constrained element, even height: 100% would work in your case.
Hope I could help