CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
The Wanderer
The Wanderer

Reputation: 3271

Alignment issues with Badges in List Group Bootstrap

I am using badges in a list-group and have problem aligning the badge vertically. If the text length is such that it almost fills the list-group width, then the badges gets pushed down.

Here is a jsfiddle http://jsfiddle.net/mdrfuu43/ Please move the result panel to find cases when the text width is same as list-group width.

enter image description here

Upvotes: 1

Views: 71

Answers (2)

Jinu Kurian
Jinu Kurian

Reputation: 9416

Check my fiddle, I have wrapped the text and badges in separate wrappers.

enter code herehttp://jsfiddle.net/Jinukurian7/mdrfuu43/4/

If you want your badges stay the right side without going down, then check this fiddle.

http://jsfiddle.net/Jinukurian7/mdrfuu43/8/

Upvotes: 1

Vel
Vel

Reputation: 9341

I have posted here. Try this 

.badge{
     overflow: auto; 
     display: inline-flex;
     height: 20px;
     }

Upvotes: 1

Related Questions