Clever Geek Handbook

Group list with 2 columns

I am trying to do this:

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

I'm using the latest Bootstrap, but I can't seem to get this to work. Here's my sample boot: http://www.bootply.com/VwX8n6sHmM

+3


source to share


2 answers


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

.home-description {
    width: 50%
}

Then assign a class to the left and one to the right for each addition, in turn:



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

Finally, place your declarations left and right:

.left {
    float: left;
}

.right {
    float: right;
}
+2


source


You need to use boot 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 bootply: http://www.bootply.com/Us2fbvOrfi

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

+3


source






More articles:


All Articles