red888 red888 - 5 months ago 21
Javascript Question

bootstrap 3: Aligning badges in a list

I have a list with badges like this:

<ul class="list-group ticketView">
<li class="list-group-item ticketView">
<span class="badge pull-left">dkf</span>

Here is what is looks like:
enter image description here

I know I can calculate the right padding for each badge with js, but I was wondering if bootstrap had a way to align the badges and text so that they are even (like two columns).

As per webeno this was trivially simple:

span.badge.pull-left {
margin-right: 10px;
width: 100px;

As long as I make sure the text isn't too long this works perfectly.


I believe this could be achieved by using tables instead of list items, and setting .list-group-item's display property to inherit (by default it uses display:block).

So in your custom CSS file you could add this:


Your table structure could look something like this:

<div class="col-md-3">
<table class="list-group ticketView">
    <tbody><tr class="list-group-item ticketView">
      <td class="badge pull-left">dkdsdcf</td>
    <tr class="list-group-item ticketView">
      <td class="badge pull-left">dk</td>
    <tr class="list-group-item ticketView">
      <td class="badge pull-left">dkfsdsdcsdcs</td>

Bootply demo here