ganzorig-ganbat/bootstrap-grid-in-loop

Twitter bootstrap grid layout in loop

Twitter Bootstrap Grid Layout in Loop

Better way to display your content in bootstrap grid system with loop. You can use only one class and don't worry about how to split row and columns.

Installation

Include php file somewhere in your code. Now you can use.

include('your_copied_file_path/bootstrap_grid.php');

Usage

1.First we need to set an object of the class.

$post_grid = new bootstrap_grid();

2.Now set sum column and how many columns do you want to separete.

// we are building 12 column layout.
$post_grid->set_sum_col(12);

// we need 3 columns in each row
$post_grid->set_col(3);

3.Here is our main loop

echo '<div class="container">';
while ( have_posts() ) : the_post();
  echo $post_grid->open_layout();
  
  // here is what you want in column.
  echo 'Your content';
  
  echo $post_grid->close_layout();
endwhile;
// closing all tags
echo $post_layout->close_all();
echo '</div>';

4.Output

<div class="container">
  <div class="row">
    <div class="col-md-4">
      Your content
    </div>
    <div class="col-md-4">
      Your content
    </div>
    <div class="col-md-4">
      Your content
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      Your content
    </div>
    <div class="col-md-4">
      Your content
    </div>
    <div class="col-md-4">
      Your content
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      Your content
    </div>
    <div class="col-md-4">
      Your content
    </div>
    <div class="col-md-4">
      Your content
    </div>
  </div>
</div>