I am unsure of the best method to position this using flex in Bootstrap 5

Introduction to Bootstrap 5 Challenge: Greetings! I am currently exploring Bootstrap 5 after a hiatus of two years, and I have encountered a problem. Despite reviewing the documentation on the official Bootstrap 5 website, I am unable to position the new card below the main profile information section while ensuring that the post card still occupies half the screen on the other side. I have attempted moving elements around but haven't been able to find a solution.

Code Snippet 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">
              ...
          </div>
        </main>
      </div>

Code Snippet 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>
        </main>
      </div>

Code Snippet for the Friends Section

      <div class="row">
      <div class="col">
        <main class="profileFriendSection" id="profileFriendSection">
          ...
    </div>

All CSS 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232475c405c42">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
...
</head>

          <div class="container-fluid">
    <div class="row">
      <div class="col">
        <main id="profileMain" class="profileContainer">
          ...
      <!-- Post Status Update Section -->
      <div class="col">
        <main id="profilePost" class="profilePost">
          ...
      </div>
    </div>
    ...

  </div>
</head>
               
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88eae7e7fcfbfcfae9f8c8bda6baa6b8">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

View Image of the Page

If you have any insights or solutions on how to address this issue with my Bootstrap 5 layout, I would greatly appreciate your input!

cssflexboxbootstrap-5

Answer №1

Your HTML is good, but remember to insert new cards after the <main> section.

Check out the code snippet provided below for reference.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbaeb5a9b5ab">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<head>
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <main id="profileMain" class="profileContainer">
          <!-- Existing Card Structure -->
          <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>
          
          <!-- Insert New Cards Here -->
          <div>NEW CARD 1</div>
          <div>NEW CARD 2</div>
          <div>NEW CARD 3</div>
          
        </main>
     </div>
      <!-- Post Status Update Section -->
      <div class="col">
        <main id="profilePost" class="profilePost">
         <!-- Card Structure for Post Status Update Section //-->
        </main>
      </div>
</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56343939222522243726166378647866">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to have the logo centered with the menu bar?

I found a cool theme: Check it out here! Does anyone know how to center the logo and menubar on this template? <section class="page_toplogo ls s-pt-25 s-pb-20 s-py-md-30"> <div class="container"> ...

htmlcss

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

I am looking to implement a feature where I can hide and show overflow content in a div. When I click on the expand button, it expands the content. However, I want this button to toggle and change text as well. Thank you! function descriptionHeightMo ...

javascriptjqueryhtmlcss

"Ensure that the horizontal border line is properly aligned with the header div

I have a CSS-defined header with the following properties: .page-header { display: flex; flex-direction: row; justify-content: space-between; align-content: stretch; align-items: center; padding: 5px 5px 5px 20px margin-left: auto; margin-r ...

htmlcssreactjsalignment

Centered content appears smaller than the surrounding div

After spending an hour trying to troubleshoot and searching for solutions, I am turning here for help. I am attempting to insert a Bootstrap Nav-Bar into a Div. I successfully centered the Nav-Bar, but now my Div is taller than the content inside it. This ...

htmlcsstwitter-bootstrap

The CSS overflow property does not seem to be functioning properly when applied to a span element that

Here is my current setup: http://jsfiddle.net/YKXUb/1/ My CSS looks like this: .two { height: 100%; width: 100%; border:1px solid green; } .hold { float: left; height: 100%; width: 35%; border:1px solid green; } .right { hei ...

htmlcss

When I test my jQuery scripts in jsfiddle, they run smoothly. However, they do not seem to work properly when I

My code is almost perfect, but the jQuery function is giving me trouble. It works fine in jsfiddle, but for some reason, it's not functioning in my HTML file. I don't believe extra characters are being added when copying from the HTML file. I hav ...

javascriptjqueryhtmlcss

What is the best way to ensure the snackbar occupies the full width on smaller screens?

After reviewing this commit: https://github.com/callemall/material-ui/commit/11695dcfa01e802797115d42c6d3d82d7657b6ab#diff-e9014062cd8e3b4344ab619966f35ef2 In the latest update, the snackbar no longer expands to 100% width on mobile screens. Can someone p ...

cssreactjsmaterial-uisnackbar

Vue's reactivity fails to activate when utilizing Bootstrap 5's alert container

Why Vue's reactivity is not triggered when using Bootstrap 5's alert div? Take a look at my code: <template> <div> <div v-if="alertICDMsg!==''" id="alertICDCode" cl ...

vue.jsvuejs3bootstrap-5

A guide to adjusting the size of a mat-button using an svg mat-icon

I have PrimeNg and Angular Materials buttons on the same td. I am attempting to resize my mat-buttons to match the size of my pButtons but they are not adjusting properly. Should I consider using a different type of button with my icon? HTML <button ma ...

htmlcssangular

Tips for saving the latest counter value in CSS and showcasing it as content in HTML

Here is an example of how my CSS code is structured: .page-number:after { counter-increment: page; } If we were to display 6 pages, it would look something like this: .page-number:after { content: 'Page ' counter(page) ' of'; } ...

htmlcsscss-counter

JavaScript slice() method displaying the wrong number of cards when clicked

In my code, I have a section called .registryShowcase. This section is designed to display logos and initially shows 8 of them. Upon clicking a button, it should load the next set of 8 logos until there are no more left to load (at which point the button ...

javascripthtmljquerycss

The Javascript style.opacity function eliminates the leading zero from the input string

In my application, users have the ability to change the color of the background but not the pattern. They can adjust the background behind the pattern and the opacity of the pattern. Users are prompted to input a percentage, which is actually a number betw ...

javascripthtmlcss

Is it possible to apply a tailwind class that fades or transitions into something else after a specific duration?

How can I achieve a transition effect from the bg-red-300 class to bg-transparent, or a different background class, over a 2-second duration? Do I need to use javascript for this effect? I would like an element to be highlighted and then return to its no ...

csstailwind-csstailwind-in-js

What steps can be taken to modify the `select` element in IE?

I came across a solution to display an arrow on a select element in this answer: select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1 ...

css

The button's color cannot be modified due to a malfunctioning event script that is not

Seeking an explanation for why my current implementation isn't working. I'm attempting to create a quiz with a multiple choice section where the correct answer turns green when clicked, and incorrect answers turn red. Despite validating the code ...

javascripthtmlcss

Alter the color of textbox text using JavaScript

I have a text input field. When clicked, I want to change the text color style using JavaScript. Previously, I successfully achieved clearing the inner content of the textbox when clicked and reverting to the default version on blur. This code is currently ...

javascripthtmlcsstextbox

I am faced with the puzzling situation where the value of my input type slider is displayed below the slider

I am currently working with HTML code that allows users to select a percentage using an input type range. Here is the code snippet I am using: <div class="container-fluid"> <div class="row"> <div class="c ...

htmlcssvertical-alignment

Adjust image to fit inside a compact popup window - Implementing React.js and Bootstrap

Hello, I could really use some help with a problem I'm facing. I am currently working on my personal portfolio website using react.js and bootstrap. I've integrated the react popupbox package, but I noticed that on small screens, my picture is no ...

cssreactjsimagebootstrap-4package

Having issues with media queries functioning incorrectly in VS Code

`@media(min-width:300px)and(max-width:400px){ div{ background-color: pink; } }` While experimenting with responsive design techniques, I attempted to implement this code snippet. However, it did not work as expected in Visual Studio Code. ...

htmlcssfrontendresponsiveness

Tips for customizing the appearance of the <select> <option> element with jQuery or CSS

What are some ways to style the <option> HTML tag, using jQuery or CSS? Any suggestions on styling the <option> tag? ...

jquerycss