Arranging badge alignment in Bootstrap 4 List Groups

Hello, I am trying to align a badge to the right within a List Group that also contains a font icon and text. I have been unable to achieve this using justify-content-between as it affects all three elements together. The example in the documentation only shows how to align all three elements with justify-content-between, but I want just the badge to be pushed to the right.

Link to code snippet

When I try putting justify-content-between after the font icon, it doesn't work as expected.

<ul class="list-group">
  <li class="list-group-item active">
    <i class="fa fa-user" aria-hidden="true"></i>
      <div class="justify-content-between">
        Cras justo odio<span class="badge badge-default badge-pill">14</span>        
      </div>
  </li>
</ul>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

First, remove the badge from the div:

<li class="list-group-item active">
  <i class="fa fa-user" aria-hidden="true"></i>
  <div class="justify-content-between">Lorem ipsum dolor sit amet</div>
  <span class="badge badge-default badge-pill">8</span>
</li>

Next, style the badge using flexbox and add a margin-left of auto:

.badge {
 display: flex;
 margin-left: auto;
}

Answer №2

Give this a try 😊

<ul class="list-group">
  <li class="list-group-item active">
      <div class="user">
        <i class="fa fa-user" aria-hidden="true"></i>
        Lorem ipsum dolor sit amet
      </div>
      <span class="badge badge-default badge-pill">22</span>
  </li>
  <li class="list-group-item">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
  <li class="list-group-item">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</li>
  <li class="list-group-item">Maecenas sed diam eget risus varius blandit non magna.</li>
  <li class="list-group-item">Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
</ul>

.fa {
  margin-right: 20px;
}

.list-group-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

Check out the live demo - https://jsfiddle.net/c0u7px6L/2/

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

What is the best way to position the logo on the left side and the navigation on the right

How can I position my logo to the left of the navigation bar? This is my current HTML code: <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="icon" type="image/png" href="SENCOR_Logo.ico"> & ...

htmlcss

What is the best way to create a hover effect for Material Icons?

Having issues with Material Icon not displaying the specified changes when using CSS modules in my project import SettingsIcon from "@mui/icons-material/Settings"; import css from "./LandingPage.module.css"; <SettingsIcon className= ...

htmlcssreactjsmaterial-uimaterial-icons

Center the "td" elements within a table

I am struggling with a design that involves two tables placed side by side within a main table. <table> <tr> <td style="width: 50%"> <table id="table1"> <tr><td></td></tr> <tr><td></t ...

cssasp.nethtmlhtml-table

HTML5 Device Orientation Emulator

Is there a tool to simulate device orientation for an HTML 5 interpreter (also known as a web browser)? I have been experimenting with the DeviceOrientation Event Specification in HTML 5 and I have successfully coded an example that works on my Android sm ...

htmlfirefoxandroid-emulator

Is the original image source revealed when clicked?

I've implemented an expand and collapse feature using jQuery/JavaScript. Clicking on the DIV causes the image inside to change state. However, clicking on the same DIV again doesn't return the image to its original state; it remains stuck in the ...

javascriptjqueryhtmlaccordion

(Java) keeping track of all strings that begin and conclude with a particular word by collecting them in an array

At the moment, I am working on developing an app for myself which will translate my school's web-based timetable for my class into a table format within an Android application. However, I am facing difficulty in locating specific Strings in the HTML C ...

javahtmlarrayssortingdata-analysis

Use CSS to style text when it falls on a "/" within a table

I currently have a table with a row that displays like this: word hi Someword/AnotherWord/LastWord My goal is to use CSS to break the text at the "/" symbol like this: hi<br>Someword<br>/AnotherWord<br>/LastWord However, the curr ...

htmlcss

Issue with IE 8 compatibility and jquery

Here is the setup of my div: <div class="container"> <div id="myid" style="display:hidden;"> <p>some stuff here</p></div> </div> When I run the command $("myid").slideToggle("slow"); on the above html code (where " ...

jqueryhtmlcss

Ways to Adjust the Earth's Position in WebGL Earth

I have been working with this WebGL Earth component for my project, but I am facing difficulty in adjusting the position of the planet on the canvas. My intention was to place the planet at the bottom of the page, but I haven't been able to achieve th ...

javascriptcsswebgl-earth

What is a more dynamic way to assign attributes to elements without directly embedding them in the HTML code?

For my unique scenario, my goal is to assign the attribute target = "_blank" to all <a> elements within a specific div in order to open them in new tabs. This concept could potentially be applied to any element and any attribute. I am curious if the ...

javascriptjqueryhtmldom

Exploring HTML5 video playback in AngularJS

When I use this code: <video id="video" class="video-js vjs-default-skin" controls width="640" height="264"> <source src="http://localhost:3000/files/public/photos/Let-her-go.mp4" type='video/mp4' /> <p class="v ...

javascriptjqueryangularjshtmlmeanjs

Adjusting AngularJS scroll position based on key presses

I am currently working on an autocomplete feature using AngularJS. I seem to be experiencing a problem with the scrollbar behavior. In the interactive gif provided, you can observe that the scrollbar remains stationary when navigating with the arrow keys. ...

javascriptcssangularjs

CSS selectors can be used to alter the styling of the container surrounding the text

My current content includes: <span> Hello </span> I am looking to apply CSS selectors to either replace or enclose the text inside the element with an <h1> Is it doable using only CSS selectors? ...

htmlcss

What steps should I take to utilize an external servlet that is already in place?

Our form has 2 input fields available for users to enter destinations for flight planning purposes. We are looking to integrate an external servlet that offers autocompletion functionality on the fields. For example, when a user types "LO", the servlet wi ...

javahtmlservlets

employing animation and iterating through each one for dynamic effect

Javascript $(document).ready(function() { $(".container").animate({left:'120px'}, 6000).queue(function(next){ $(".child").css('display', 'none'); }); }); The provided code snippet demonstrates animating a single box and t ...

javascriptjquerycssanimation

Position the div beneath another div using the display:grid property

I can't seem to figure out how to position a div below another div using display:grid. The div is appearing on top instead of below. The "app-bm-payment-card-item" is actually a custom Angular component. Here's the HTML file: //div wrapper < ...

htmlcssangularionic-frameworkcss-grid

The background-image property fails to display on a table element

I’m having trouble displaying a background image in a table within my Django app. Here’s the code I’m using: <table style="background-image: url('/static/assets/img/myimage.png') ;background-position: 0 100% !important;background-repeat ...

htmlcssdjango

Enclose all similar elements in a container with a flexible layout

I'm working on a flexible layout in Wordpress using Advanced Custom Fields. I need to wrap images with the class name portrait in a containing div, but only in pairs and in the same position in the dom. The challenge is that these elements can appear ...

jqueryhtmlwordpressadvanced-custom-fieldswrapall

CSS Selectors failing to deliver desired results

Hey, I have a question regarding CSS selectors in relation to my design. I've been experimenting with manipulating checkboxes using CSS and trying to use multiple selectors like "+", "~", etc. to trigger events when the checkbox is checked or uncheck ...

htmlcss

"Access Denied: Error 403 - Forbidden" encountered during the CSS minification and bundling process in ASP.NET Web Forms

After migrating my ASP.NET web forms application from a managed VPS to AWS EC2 using AWS Elastic Beanstalk, I encountered an issue with CSS bundling and minification. While the JavaScript was successfully bundled and minified on the Amazon server, the CSS ...

javascriptcssasp.netamazon-web-servicesbundling-and-minification