How to centrally align text in list items using Bootstrap 5

Incorporating Bootstrap 5 into my project, I am facing a challenge with vertically aligning text in an li element. Despite trying various techniques mentioned in the Bootstrap documentation for middle/center alignment, none of them seem to be effective. I attempted adding the align-middle class to each individual element, and also thought that align-items-center would solve the issue, but it did not. What could I possibly be overlooking?

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">

        <div class=''>
            <i class="bi bi-circle me-2 text-muted" style="font-size: 1.5rem;"></i>
            <label class="form-check-label">
                <a target="_blank" class="text-success" href="https://www.facebook.com/">Follow on Facebook</a>
            </label>
        </div>
        <span class="badge bg-primary rounded-pill">+2</span>
        
    </li>

    <li class="list-group-item d-flex justify-content-between align-items-center">

        <div class=''>
            <i class="bi bi-circle me-2 text-muted" style="font-size: 1.5rem;"></i>
            <label class="form-check-label">
                <a target="_blank" class="text-success" href="https://www.instagram.com/">Follow on Instagram</a>
            </label>
        </div>
        <span class="badge bg-primary rounded-pill">+5</span>
        
    </li>
</ul>

https://i.sstatic.net/8fS86.png

EDIT: To clarify, the goal is to align the text vertically.

htmlcssbootstrap-5

Answer №1

To ensure proper alignment, you must make the parent element a flex container and then use align-items-center:

<ul class="list-group">
  <li
    class="list-group-item d-flex justify-content-between align-items-center"
  >
    <div class="d-flex align-items-center">
      <i
        class="bi bi-circle me-2 text-muted"
        style="font-size: 1.5rem;"
      ></i>
      <label class="form-check-label">
        <a
          target="_blank"
          class="text-success"
          href="https://www.facebook.com/"
          >Follow on Facebook</a
        >
      </label>
    </div>
    <span class="badge bg-primary rounded-pill">+2</span>
  </li>
  <li
    class="list-group-item d-flex justify-content-between align-items-center"
  >
    <div class="d-flex align-items-center">
      <i
        class="bi bi-circle me-2 text-muted"
        style="font-size: 1.5rem;"
      ></i>

      <label class="form-check-label">
        <a
          target="_blank"
          class="text-success"
          href="https://www.instagram.com/"
          >Follow on Instagram</a
        >
      </label>
    </div>
    <span class="badge bg-primary rounded-pill">+5</span>
  </li>
</ul>

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

Exploring the integration of foreign languages within C# code?

In search of a C# expert who can assist me with a question I've been struggling to find an answer for all day. Google searches have yielded outdated information, and I need fresh insight. Wondering if there's a way to incorporate CSS and HTML in ...

c#css.netwinforms

How can we efficiently load a JSON file from a local path into an HTML document in a way that is compatible with all browsers?

I am attempting to retrieve JSON data from a local path and display it on a basic HTML page. I have tried various methods such as fetch, ajax in order to load the data and update the corresponding values on the web page. The goal is to host this page so t ...

javascriptjqueryhtmljsonajax

Changing the text of a link when hovering - with a transition

Seeking a straightforward way to change text on a link upon :Hover. I desire a gentle transition (text emerges from below) and fallback to default if JavaScript is disabled. HTML <div class="bot-text"> <a href="">Visit this site</a> ...

javascriptjqueryhtmlcss

"Choosing multiple options in Select2 causes it to constrict within a Bootstrap 4 inline

I am facing an issue where the field shrinks drastically when I type in it. Here's a code snippet that showcases this problem: $(function() { $("select").select2({ placeholder: "Select a word", width: "100%" }); }); <link rel ...

htmlcssjquery-select2bootstrap-4jquery-select2-4

What is the reason behind getComputedStyle having visibility set to visible?

What is the reason behind getComputedStyle always returning element visibility as visible even when no explicit visibility has been set? For instance: getComputedStyle($('#block1')[0],null).visibility; --- "visible" Meanwhile: $('#block1&a ...

javascriptcssgetcomputedstyle

Is Bootstrap causing columns to not change colors as expected?

I've been attempting to alter the colors of the column names, but they remain white. Here's an example: <div class="table-responsive"> <button id="exportButton" class="btn btn-primary">Button</butt ...

htmlcssbootstrap-4bootstrap-5

Is there a way to shift a button within a div to the right while maintaining alignment?

After spending hours on this problem, I attempted to use "float: right" and successfully moved the button to the right. However, in doing so, the tag is no longer vertically centered. Can someone please assist me with this? Also, if there are multiple sol ...

css

Discover the secret sauce to effortlessly adding text upon hovering over a button

I am completely new to CSS and only know the basics. Recently, I stumbled upon this code online that creates a button. However, I want to use an image inside the button, add a color overlay when hovered, and display text saying "LEARN MORE" upon hovering ...

css

Switch up the positioning of elements using jQuery

My webpage contains multiple elements that are absolutely positioned with the CSS attribute "top." I am looking to adjust the top position of each element by 20px. This involves retrieving the current top position and adding 20px to it. The quantity of e ...

javascriptjqueryhtmlcss

The HTML navbar seems to have a mind of its own, disappearing and shifting around unpredictably as I zoom in or resize

WHEN DISPLAYING THIS CODE, IT IS ADVISED TO VIEW IN FULL PAGE MODE This code includes navigation, header, and styling elements. However, when the browser is zoomed in or out, the navbar tends to move around and eventually disappears off the screen if wind ...

htmlcsswebnavigation

Issues with displaying HTML video content

Seeking assistance with a unique coding predicament. I've got an HTML file that showcases a JavaScript-powered clock, but now I'm looking to enhance it by incorporating a looped video beneath the time display. Oddly enough, when the clock feature ...

javascriptcsshtmlhtml5-video

Adjust the header and menu color as you scroll

Starting fresh with JavaScript, I'm seeking advice on a specific piece of code. Working on a Joomla 3.2 website using the Gantry template by default. My goal is to achieve the following: When a user accesses a submenu (e.g., 01, 02, 03) derived from t ...

jqueryhtmlcss

I am puzzled as to why I keep receiving the error message "Cannot read property 'poPanel' of undefined"

CSS In my project, I am implementing a feature that displays an ordered list by looping through an array of objects and adding them on a button click. It works smoothly for adding items, but when I try to implement a remove function to delete each item, I ...

htmltypescriptangular8

Diverse Browser Image Mapping Coordinates

I am in the process of creating an image map, where I specify coordinates on an image that link to other pages. However, I'm encountering an issue where the position of these coordinates is not relative. When viewing the image on a different browser ...

javascriptjquerycssimagemap

What are the steps to incorporating ng2-dnd with a background-image?

I am currently utilizing the ng2-dnd module to enable sorting of a list. While the functionality for sorting and dragging is working smoothly, there's one issue - users can only drag by clicking on the text within my element. My goal is to allow user ...

htmlcssangular

Can the functionality of a button be disabled after being clicked a total of 5 times?

Once a user clicks the button five times, I plan for it to be disabled. Can this be achieved solely with HTML, or would JavaScript be necessary? ...

javascripthtml

Issue Encountered While Loading CSS using Webpack and Babel

I am currently working on a SSR React App using Webpack3 and Babel6. However, when I launch the server, it is not able to locate any css file (Error: Cannot find module './file.css'). Here is an overview of my current folder structure: src/ | ...

cssreactjswebpackimportbabeljs

Change Dropdown menu orientation to vertical

Struggling to convert a CSS drop down menu into a vertical menu. I've tried multiple solutions but can't seem to achieve the desired result. Here is my CSS and HTML code, can anyone point out what I might be missing? #sddmT { margin: 0; pa ...

cssmenu

How can you modify the color of a <canvas> element using CSS?

Can the HTML5 element's color be modified using CSS as opposed to JS? I am looking to personalize qTips tooltip pointers with specific LESS CSS instructions that cannot be referenced through jQuery. ...

jquerycsscanvascolors

Tips for presenting styled HTML content within a dynamic list using HTML and JavaScript

Is there a way to display HTML formatted text within a dynamic list in HTML? I've tried implementing it, but the tags are being displayed instead of the formatted text. Here's an example of the code: <!DOCTYPE html> <html> <body> ...

javascripthtmldomappendchild