Bootstrap- how to stop these 2 listings from being uneven?

Question

Here is a picture of the problem. I'm using the .list-group class in Bootstrap for these job listings, which I've been trying to make even. The problem is once a job title is too long, Bootstrap pushes it down a line, but this causes the listings to not be even. Is there a way I can make the titles which are too long "shrink" to fit the box? Thank you!

Edit: At the moment Bootply isn't letting me "save" the code, but I have it running so if you run this code in it you'll be able to experiment with it here.

    <div class="col-md-6 text-right">
    <h2 class="table-section-heading text-center">Premium Listings</h2>

                <ul class="list-group">
      <li class="list-group-item list-group-item-success"><span style="font-size:26px" class="alink"><a href="#">50% Off Winter All Coats #Macys </a></span><span style="font-size:16px"> <i>(ad)</i></span></li>
      </ul><ul class="list-group">
                <li class="list-group-item list-group-item-info"><span style="font-size:26px"><a href="#">Table Put Together</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Beverly Hills, CA</span></i></span> - <b><span class="label label-success">$54.00</span></b></li>
</ul><ul class="list-group">
                <li class="list-group-item list-group-item-info"><span style="font-size:26px"><a href="#">Dog Sitter</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Hudson, OH</span></i></span> - <b><span class="label label-success">$92.00</span></b></li>
</ul><ul class="list-group">
                <li class="list-group-item list-group-item-info"><span style="font-size:26px"><a href="#">Shopping</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Hudson, OH</span></i></span> - <b><span class="label label-success">$150.00</span></b></li>
</ul><ul class="list-group">
                <li class="list-group-item list-group-item-info"><span style="font-size:26px"><a href="#">Driver</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Valencia , CA</span></i></span> - <b><span class="label label-success">$45.00</span></b></li>
</ul><ul class="list-group">
                <li class="list-group-item list-group-item-info"><span style="font-size:26px"><a href="#">Receptionist for a day</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Chicago, IL</span></i></span> - <b><span class="label label-success">$80.00</span></b></li>
</ul><table class="table">







                             </table>
                </div>
    <!-- /Premium listings table -->
    <!-- Jobs near you table --> 
            <div class="col-md-6" style="float:right;">
        <h2 class="table-section-heading text-center">Near you</h2>
    <ul class="list-group">
            <li class="list-group-item list-group-item-info premium"><span style="font-size:26px" class="text-nowrap"><a href="#">Table Put Together</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Beverly Hills, CA</span></i></span> - <b><span class="label label-success">$54.00</span></b></li>
            </ul><ul class="list-group">
            <li class="list-group-item list-group-item-info standard"><span style="font-size:26px" class="text-nowrap"><a href="#">This list long. Too long. Looking for driver.</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Beverly Hills , CA</span></i></span> - <b><span class="label label-success">$85.00</span></b></li>
            </ul><ul class="list-group">
            <li class="list-group-item list-group-item-info premium"><span style="font-size:26px" class="text-nowrap"><a href="#">Driver</a></span><span style="font-size:16px"> in <i><span class="label label-info"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> Valencia , CA</span></i></span> - <b><span class="label label-success">$45.00</span>
</div>

Some code in a [jsfiddle](http://www.jsfiddle.net) would be great, — Nerdkowski, Jul 03 '15 at 21:38
Can I do that without loading all of Bootstrap into jsfiddle? [Here's a link](http://getbootstrap.com/components/#list-group-contextual-classes) to the CSS classes I'm using for the listings. — user2802559, Jul 03 '15 at 21:41
OK Bootply is acting up at the moment and not letting me "save" the code which I ran, but I pasted the code in my original post. — user2802559, Jul 03 '15 at 22:24
You can make them even but only if you cut the text that's making the list uneven, but i don't know if that's ok for your needs. — aleksandar, Jul 03 '15 at 22:41
Is that really the only way @wazaaaap? Is there any Bootstrap classes that would let it scale to the box? — user2802559, Jul 03 '15 at 22:43
[Check this](http://stackoverflow.com/questions/14537611/bootstrap-responsive-text-size) — Nerdkowski, Jul 03 '15 at 22:46
Thank you! Could you run that into Bootply to show me how that would look? — user2802559, Jul 03 '15 at 22:48
I think there is no other way. You must hide some content in order to make them even. — aleksandar, Jul 03 '15 at 22:49
Do you know if there is a way to give the .list-group-item class a fixed height so the text has to conform to it? — user2802559, Jul 03 '15 at 23:04

score 0 · Answer 1 · answered Jul 03 '15 at 23:56

There may be some specificity issues with bootstrap classes, but I would just set the spans that hold the title links to have a max width, and then set text-overflow. I would personally add widths for all sections so that the sections would all line up, but the first part should solve your issue:

So something like:

<span class="title-box" style="font-size:26px"><a href="#">Dog Sitter</a></span>

#CSS
.title-box{
  max-width: /*some value in pixels or ems*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Bootstrap- how to stop these 2 listings from being uneven?

1 Answers1