CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Thom
Thom

Reputation: 621

Bootstrap two columns list

I have a list on my page with products.
Now is my list one column wide and all the products are under each other.

The point is that I want to have two columns wide with products. Im using bootstrap.

<ul class="list-group product-select product-item">

    #  This is one item

    <li class="list-group-item product-item">
        <div class="media">
            <a class="pull-left" href="#">
                 <img class="media-object" src="product_images/image.gif" alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading product-item-heading">
                    <small><strike>&euro;29,99</strike></small> &euro;24,99
                    <span class="label label-default product-item-stock text-right">
                        +100 stock
                    </span>
                </h4>
                <h2 class="product-item-title">
                    Product title
                </h2>
            </div>
        </div>
    </li>

    # Ending item one

</ul>

Upvotes: 2

Views: 13840

Answers (1)

Sujit
Sujit

Reputation: 790

It depends on which version of Bootstrap you using.

In Bootstrap-3 or above :

<div class="container">
    <div class="row">
       <div class="col-lg-6"> ---1st Column--- </div>
       <div class="col-lg-6"> ---2nd Column--- </div>
    </div>
    <div class="row">   <!--In case of multiple rows of two column-->
       <div class="col-lg-6"> ---1st Column--- </div>
       <div class="col-lg-6"> ---2nd Column--- </div>
    </div>
    .....
</div>

In Older Versions:

<div class="container">
    <div class="row">
       <div class="span6"> ---1st Column--- </div>
       <div class="span6"> ---2nd Column--- </div>
    </div>
    <div class="row">     <!--In case of multiple rows of two column-->
       <div class="span6"> ---1st Column--- </div>
       <div class="span6"> ---2nd Column--- </div>
    </div>
    .....
</div>

Remember if you are creating many product rows and want to create 2 products in a row then you have to add some logic to start and end the particular div.

Upvotes: 6

Related Questions