Issue
Introduction to Problem: Hello i hope everyone is having a great day. Im dabbing around bootstrap 5 for the first time in 2 years and ran into a problem i couldn't figure out from the documentation from the official bootstrap 5 website. I want to position the new card underneath the main profile information section and still have the post card take up half the screen on the other side i've moved elements around and could't figure this out.
Code For Main User Information Section
<div class="row">
<div class="col">
<main id="profileMain" class="profileContainer">
<div class="card border border-dark border-2 shadow-lg bg-body">
<div class="ml-3 w-100">
<img src="..." class="rounded mx-auto d-block my-3">
<div class="card-body">
<h4 class="mb-0 mt-0 text-center">
Users Full Name
</h4>
<hr>
<div class="row">
<div class="col">
<div class="p-2 mt-2 text-muted d-flex justify-content-start rounded text-white stats">
<div class="d-flex flex-column p-2">
<span class="articles">Posts</span>
<span class="number1">38</span>
</div>
<div class="d-flex flex-column p-2">
<span class="followers">Followers</span>
<span class="number2">980</span>
</div>
<div class="d-flex flex-column p-2">
<span class="followers">Following</span>
<span class="number2">380</span>
</div>
</div>
</div>
<div class="col">
<div class="p-2 mt-2 text-muted d-flex justify-content-end rounded text-white stats">
<div class="dropdown d-flex p-2">
<button class="btn btn-light border border-dark text-black-50" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-gear fa-lg"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="settings.php">Account Settings</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
Code For Post Section
<!-- Post Status Update Section -->
<div class="col">
<main id="profilePost" class="profilePost">
<div class="card p-3 border border-dark border-2 shadow-lg bg-body">
<div class="row">
<div class="col">
<textarea name="statusPostField" id="statusPostField" rows="4" class="postStatusField form-control border border-dark" placeholder="What's on your mind..."></textarea>
<a href="#" class="btn btn-light text-black-50 border-2 rounded-pill border mx my-1 border-dark">Add Photos</a>
<a href="#" class="btn btn-light border border-dark border-2 text-black-50 rounded-pill">Tag Friends</a>
<button class="btn btn-primary mx rounded-pill float-end my-1">Post</button>
</div>
</div>
<hr class="my-1">
<div class="row flex-column my-3">
<div class="col d-flex justify-content-center">
<div class="card w-50" aria-hidden="true">
<div class="card-body">
<h5 class="card-title">
<span class="placeholder-wave col-6"></span>
</h5>
<p class="card-text placeholder-wave">
<span class="placeholder col-5"></span>
<span class="placeholder col-7"></span>
<span class="placeholder col-2"></span>
<span class="placeholder col-3"></span>
<span class="placeholder col-8"></span>
</p>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<h1 class="display-6 text-muted">No Recent Posts</h1>
</div>
</div>
</div>
</main>
</div>
Code for the Friends Section
<div class="row">
<div class="col">
<main class="profileFriendSection" id="profileFriendSection">
<div class="card border border-dark border-2 shadow-lg bg-body">
<div class="card-body">
<div class="row">
<div class="col">
</div>
</div>
</div>
</div>
</main>
</div>
</div>
All Code
.profileContainer {
padding: 15px;
max-width: 900px;
}
.profilePost {
padding: 15px;
}
.postStatusField {
resize: none;
}<script src="https://kit.fontawesome.com/bef4f1371d.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<head>
<div class="container-fluid">
<div class="row">
<div class="col">
<main id="profileMain" class="profileContainer">
<div class="card border border-dark border-2 shadow-lg bg-body">
<div class="ml-3 w-100">
<img src="..." class="rounded mx-auto d-block my-3">
<div class="card-body">
<h4 class="mb-0 mt-0 text-center">
Users Full Name
</h4>
<hr>
<div class="row">
<div class="col">
<div class="p-2 mt-2 text-muted d-flex justify-content-start rounded text-white stats">
<div class="d-flex flex-column p-2">
<span class="articles">Posts</span>
<span class="number1">38</span>
</div>
<div class="d-flex flex-column p-2">
<span class="followers">Followers</span>
<span class="number2">980</span>
</div>
<div class="d-flex flex-column p-2">
<span class="followers">Following</span>
<span class="number2">380</span>
</div>
</div>
</div>
<div class="col">
<div class="p-2 mt-2 text-muted d-flex justify-content-end rounded text-white stats">
<div class="dropdown d-flex p-2">
<button class="btn btn-light border border-dark text-black-50" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-gear fa-lg"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="settings.php">Account Settings</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Post Status Update Section -->
<div class="col">
<main id="profilePost" class="profilePost">
<div class="card p-3 border border-dark border-2 shadow-lg bg-body">
<div class="row">
<div class="col">
<textarea name="statusPostField" id="statusPostField" rows="4" class="postStatusField form-control border border-dark" placeholder="What's on your mind..."></textarea>
<a href="#" class="btn btn-light text-black-50 border-2 rounded-pill border mx my-1 border-dark">Add Photos</a>
<a href="#" class="btn btn-light border border-dark border-2 text-black-50 rounded-pill">Tag Friends</a>
<button class="btn btn-primary mx rounded-pill float-end my-1">Post</button>
</div>
</div>
<hr class="my-1">
<div class="row flex-column my-3">
<div class="col d-flex justify-content-center">
<div class="card w-50" aria-hidden="true">
<div class="card-body">
<h5 class="card-title">
<span class="placeholder-wave col-6"></span>
</h5>
<p class="card-text placeholder-wave">
<span class="placeholder col-5"></span>
<span class="placeholder col-7"></span>
<span class="placeholder col-2"></span>
<span class="placeholder col-3"></span>
<span class="placeholder col-8"></span>
</p>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<h1 class="display-6 text-muted">No Recent Posts</h1>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="row">
<div class="col">
<main class="profileFriendSection" id="profileFriendSection">
<div class="card border border-dark border-2 shadow-lg bg-body">
<div class="card-body">
<div class="row">
<div class="col">
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>If anyone could give me some pointers of how i could do this or what to change to do this i would love that if you know the fix that would be great also.
Solution
Your HTML is fine, but you have to place new cards after the <main> section.
See the snippet below.
.profileContainer {
padding: 15px;
max-width: 900px;
}
.profilePost {
padding: 15px;
}
.postStatusField {
resize: none;
}<script src="https://kit.fontawesome.com/bef4f1371d.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<head>
<div class="container-fluid">
<div class="row">
<div class="col">
<main id="profileMain" class="profileContainer">
<div class="card border border-dark border-2 shadow-lg bg-body">
<div class="ml-3 w-100">
<img src="..." class="rounded mx-auto d-block my-3">
<div class="card-body">
<h4 class="mb-0 mt-0 text-center">
Users Full Name
</h4>
<hr>
<div class="row">
<div class="col">
<div class="p-2 mt-2 text-muted d-flex justify-content-start rounded text-white stats">
<div class="d-flex flex-column p-2">
<span class="articles">Posts</span>
<span class="number1">38</span>
</div>
<div class="d-flex flex-column p-2">
<span class="followers">Followers</span>
<span class="number2">980</span>
</div>
<div class="d-flex flex-column p-2">
<span class="followers">Following</span>
<span class="number2">380</span>
</div>
</div>
</div>
<div class="col">
<div class="p-2 mt-2 text-muted d-flex justify-content-end rounded text-white stats">
<div class="dropdown d-flex p-2">
<button class="btn btn-light border border-dark text-black-50" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-gear fa-lg"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="settings.php">Account Settings</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<div>NEW CARD 1</div>
<div>NEW CARD 2</div>
<div>NEW CARD 3</div>
</div>
<!-- Post Status Update Section -->
<div class="col">
<main id="profilePost" class="profilePost">
<div class="card p-3 border border-dark border-2 shadow-lg bg-body">
<div class="row">
<div class="col">
<textarea name="statusPostField" id="statusPostField" rows="4" class="postStatusField form-control border border-dark" placeholder="What's on your mind..."></textarea>
<a href="#" class="btn btn-light text-black-50 border-2 rounded-pill border mx my-1 border-dark">Add Photos</a>
<a href="#" class="btn btn-light border border-dark border-2 text-black-50 rounded-pill">Tag Friends</a>
<button class="btn btn-primary mx rounded-pill float-end my-1">Post</button>
</div>
</div>
<hr class="my-1">
<div class="row flex-column my-3">
<div class="col d-flex justify-content-center">
<div class="card w-50" aria-hidden="true">
<div class="card-body">
<h5 class="card-title">
<span class="placeholder-wave col-6"></span>
</h5>
<p class="card-text placeholder-wave">
<span class="placeholder col-5"></span>
<span class="placeholder col-7"></span>
<span class="placeholder col-2"></span>
<span class="placeholder col-3"></span>
<span class="placeholder col-8"></span>
</p>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<h1 class="display-6 text-muted">No Recent Posts</h1>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="row">
<div class="col">
<main class="profileFriendSection" id="profileFriendSection">
<div class="card border border-dark border-2 shadow-lg bg-body">
<div class="card-body">
<div class="row">
<div class="col">
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>Answered By - Cervus camelopardalis Answer Checked By - David Marino (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.