I am using bootstrap and want to show a grid of items with an image, a title and a description of each item.
And I want the items to be in rows of three. I have used the portfolio tutorial to create the items from a cloned template and have it working nicely as a list, but I want to put the items into a grid.

In the portfolio tutorial it shows how to put the images into rows but as soon as I as any text then they go back to being in a list

Any help greatly appreciated

Here is my code

Code: Select all

<cms:folders masterpage='bike.php'>
      <cms:pages masterpage='bike.php' folder=k_folder_name>      
         <div class="row">
            <div class="col-md-4 portfolio-item float <cms:zebra 'alpha'  '' 'omega' />">
               <a href="<cms:show k_page_link />">
                  <img class="img-responsive" src="<cms:show thumb />" alt="<cms:show image1_title />">
               </a>
               <span>
                  <a href="<cms:show k_page_link />"><cms:show bike_make /></a>
               </span>
               <ul>Prices per day
                  <li>1 - 3 days: &euro;<cms:show price_1 /></li>
                  <li>4 - 7 days: &euro;<cms:show price_3 /></li>
                  <li>7 - 14 days: &euro;<cms:show price_7 /></li>
                  <li>14+ days: &euro;<cms:show price_14 /></li>
                  <li>deposit: &euro;<cms:show deposit /></li>
               </ul>
            </div>            
         </div>
         <!-- /.row -->
      </cms:pages>
   </cms:folders>  

[KK]

Hi,

I recommend you start with a static HTML design with all the elements showing up as you desire. Make sure you have atleast two rows (3 items with text per row).
How the 4th item breaks into a new row would be dictated by your design - it could be a 'class' or a new DIV etc.

Now, work backwards and add Couch to the design.
Compare the generated HTML to your original. The two should be identical if you have coded the logic right.

Let us know if you still happen to require any assistance.
Please make sure to also post in the original HTML (without any Couch tags added).

Thanks.

thanks ill do just that