List group with 2 columns

Question

I'm trying to have this:

Featured Ads
Ad 1 | Ad 3
Ad 2 | Ad 4

I'm using the latest Bootstrap version but i can't get this working. Here is my bootstrap live example: http://www.bootply.com/VwX8n6sHmM

Answer 1

You need to use bootstrap grids like this

<div class="container">
<div class="row">
  <div class="col-md-6">Ad 1</div>
  <div class="col-md-6">Ad 3</div>
</div>
</div>

Here's the bootply: http://www.bootply.com/Us2fbvOrfi

For more information: http://getbootstrap.com/examples/grid/

Answer 2

First, you need to make sure each ad only fills 50% of the containers' width:

.home-description {
    width: 50%
}

Then, assign a class for left and one for right to each add, alternately:

<a href="#" class="list-group-item home-description left">
<a href="#" class="list-group-item home-description right">
(... and so on)

Finally, float the ads left and right:

.left {
    float: left;
}

.right {
    float: right;
}