26940

Bootstrap Scaffolding in php's loop

Question:

How do I make scaffolding if I would like to show grids next to each other. My actual codes

<div class="span8"> <div class="row-fluid"> <?php foreach($items as $item) : ?> <div class="span6"> <?= $item ?> </div> <?php endforeach; ?> </div> </div>

grids are showing like

------------------- 1box 2box ------------------- 3box ------------------- 4box ------------------- 5box -------------------

I would like to show

------------------- 1box 2box ------------------- 3box 4box ------------------- 5box -------------------

Answer1:

<div class="span8 mutli-column"> <?php $c = 0; foreach( $items as $item ): //Needs Break Boolean, true if counter at second column $b = (( ++$c % 2 == 0 ) ? true : false ); if ( $b ) echo '<div class="row-fluid">'; ?> <div class="span6"> <?php echo $item; ?> </div> <?php if ( $b ) echo '</div>'; endforeach; ?> </div>

With use of % Modulus, you can calculate every second iteration, thus break into a new .row-fluid row, to get yourself into a HTML structure like below:

<div class="span8 mutli-column"> <div class="row-fluid"> <div class="span6">1</div> <div class="span6">2</div> </div> <div class="row-fluid"> <div class="span6">3</div> <div class="span6">4</div> </div> <div class="row-fluid"> <div class="span6">5</div> <div class="span6">6</div> </div> <div class="row-fluid"> <div class="span6">7</div> <div class="span6">8</div> </div> </div>

Here's a <kbd><a href="http://jsfiddle.net/L4CrK/1/" rel="nofollow"><strong>Fiddle</strong></a></kbd> constructed with the above:

Answer2:

Maybe this is not the best solution, but can help you to solve your problem. Note I don't tested this code. So, take a look at idea.

<div class="span12"> <?php $i = 0; foreach($items as $item) : if ($i == 0) echo '<div class="row-fluid">'; ?> <div class="span6"> <?= $item ?> <?php if ($i == 1) echo '</div>'; $i = 1 - $i; ?> <?php endforeach; ?> <?php if ($i == 0) echo '</div>'; ?> </div>

Answer3:

Bootstrap 2:

<div class="row-fluid"> <?php foreach ($items as $i => $item) : ?> <?php if ($i && $i % 2 == 0) : ?> </div><!-- /.row-fluid --> <div class="row-fluid"> <?php endif; ?> <div class="span6"> <?php echo $item; ?> </div> <?php endforeach; ?> </div><!-- /.row-fluid -->

Bootstrap 3:

<div class="row"> <?php foreach ($items as $i => $item) : ?> <?php if ($i && $i % 2 == 0) : ?> </div><!-- /.row --> <div class="row"> <?php endif; ?> <div class="col-sm-6"> <?php echo $item; ?> </div> <?php endforeach; ?> </div><!-- /.row -->

Answer4:

use this code:

.row-fluid [class*="span"]:nth-child(3n+1) { margin-left: 0; }

Answer5:

Updated: my own very simple but working solution for posts looping in two columns (in bootstrap for example) - posts from specific category ID

/ sorry for my poor english :) /

<div class="row-fluid"> <?php $divCounter = 0; $postCounter = 1; $temp = $wp_query; $wp_query = null; $wp_query = new WP_Query(); $wp_query->query('showposts=10&cat=2'.'&paged='.$paged); if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post(); ?> <!-- starting the loop --> <div class="span6">

<?php the_title(); ?>

<div class="row-fluid"> <div class="span5"> <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>

<img src="<?php echo $url; ?>" />

</div> <div class="span7"> <?php the_excerpt(); ?>

<a class="btn" href="<?php the_permalink(); ?>">more &raquo;</a>

</div> </div> </div> <?php $allposts = $wp_query->post_count; //counting all posts in category $divCounter++; //divCounter states is: 1 or 2 if ($divCounter == 2 && $postCounter < $allposts) { // if we are on the second Span and our postCounter is smaller then allposts then we close the second Span and open a new Row // so we close the second Span and open a new Row only when we have min. one post left and when we are on the second Span - else we write the last closing tag: </div> <!-- the last row --> echo '</div><div class="row-fluid">'; $divCounter = 0; //reseting divCounter } if ($postCounter == $allposts) { //when the postCounter reach allposts then we closing the row - for example if you have only 1 post in category or in page2 (pagenation) echo '</div> <!-- the last row -->'; } $postCounter++; ?> <!-- loop end --> <?php endwhile; ?>

Answer6:

After trying many different answers, I succeeded to accomplish dynamic generation of bootstrap class="row" and class="col-md-6" divs . Here I used php but this can achieve by any other server side scripting language.

<div class="container"> <div class="row-fluid"> <?php $c = 0; foreach( $items as $item ): $c++; // Closing PHP tag follows ?> <div class="col-md-6"> <?php echo $item; ?> </div> <?php if($c % 2 == 0) echo '</div><div class="row-fluid">'; endforeach; ?> </div>

Which produces the following HTML code:

<div class="span8 mutli-column"> <div class="row-fluid"> <div class="col-md-6">1</div> <div class="col-md-6">2</div> </div> <div class="row-fluid"> <div class="col-md-6">3</div> <div class="col-md-6">4</div> </div> .... </div>

Recommend

  • Sending email with CakeEmail
  • How do I see existing classes
  • How to stream h264 with udp gstreamer
  • spring mvc process object before @valid is applied
  • What is the Performance, Safety, and Alignment of a Data member hidden in an embedded char array in
  • Compare a column between 2 csv files and write differences using Python
  • href inside href [duplicate]
  • Calling a second level base class constructor
  • Gson serializing Spring beans
  • Flot returns incorrect x value (mm/dd/yy - date) after zoom for stack bar chart
  • 'Enemy' was not declared in this scope?
  • Refresh other frame, from another frame. Jquery
  • Full 8 bit adder, illogical output
  • Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window
  • Jquery resizable reposition handle after scroll
  • IE11 textarea loses focus if another textarea is disabled
  • HighCharts - Show tooltip on column where value is 0 or null
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • PayPal API Listener Website Payments Standard URI
  • redirect_to root_url and return unless @user.activated
  • C#: Import/Export Settings into/from a File
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Approximate Order-Preserving Huffman Code
  • gspread or such: help me get cell coordinates (not value)
  • Ionic 2 storage is not cleaning up on uninstall - Only for signed APK
  • Read text file and split every line in MSBuild
  • C# - Serializing and deserializing static member
  • Java applet as stand-alone Windows application?
  • Join two tables and save into third-sql
  • Rearranging Cells in UITableView Bug & Saving Changes
  • align graphs with different xlab
  • Circular dependency while pushing http interceptor
  • bootstrap to use multiple ng-app
  • Linker errors when using intrinsic function via function pointer
  • Error creating VM instance in Google Compute Engine
  • Acquiring multiple attributes from .xml file in c#
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How can I remove ASP.NET Designer.cs files?
  • java string with new operator and a literal