• Resolved fosteralex

    (@fosteralex)


    Hello there. i am trying to get the load more button to display 3 posts in a single row using bootstrap. but i am unsure how to set this up properly. Right now they display one on top of eachother.

    I wrapped the short code in a col-md-12 and set my repeater template to have the col-md-4 class but they still stack. Any suggestions?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter fosteralex

    (@fosteralex)

    my Repeater template.

    <div class="news-archive-item">
    					<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    
    				<!-- post thumbnail -->
    					<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
    						<a>" title="<?php the_title(); ?>">
    							<?php the_post_thumbnail(); // Declare pixel size you need inside the array ?>
    						</a>
    					<?php endif; ?>
    					<?php if (!has_post_thumbnail()){ ?>
    					<div class="no-thumb-body">
    						<h2>
    							<a>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    						</h2>
    						<div class="news-date"><?php echo "Posted on: " . get_the_time('M d, Y'); ?></div>
    					<!-- /post title -->
    						<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
    					
    						<a>">Read More
    							<span>
    		                        <i class="fa fa-arrow-circle-right" aria-hidden="true">
    		                        </i>
    	                      	</span>
    	                    </a>
    					</div>	
    					<?php	} else {?>
    				<div class="archive-body-content">
    					<h2>
    						<a>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    					</h2>
    					<div class="news-date"><?php echo "Posted on: " . get_the_time('M d, Y'); ?></div>
    					<!-- /post title -->
    					<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
    					
    					<a>">Read More
    						<span>
    	                        <i class="fa fa-arrow-circle-right" aria-hidden="true">
    	                        </i>
                          	</span>
                         </a>
    				</div>
    					<?php } ?>
    			
    					<!-- post title -->
    					
    					</article>
    	<!-- /article -->
    				</div>
    • This reply was modified 9 years, 8 months ago by fosteralex.
    Plugin Author Darren Cooney

    (@dcooney)

    Hey @fosteralex,
    I don’t see col-md-4 in your repeater template?

    Cheers,

    Thread Starter fosteralex

    (@fosteralex)

    I added as a class on the container. Heres my short code

    <?php echo do_shortcode('[ajax_load_more post_type="news" category="news-articles" category__not_in="1" posts_per_page="6" pause="true" scroll="false" button_label="Load More" button_loading_label="Loading Articles..." container_type="div" css_classes="news-archive-wrapper col-md-4" transition_container="false"]'); ?>

    Plugin Author Darren Cooney

    (@dcooney)

    css_classes is added to the container, not the individual repeater template.

    Add col-md-4 to your template.

    
    <div class="news-archive-item col-md-4">
    
    </div>
    Thread Starter fosteralex

    (@fosteralex)

    Poof. worked. Thanks alot. 20 points to gryphindor

    Plugin Author Darren Cooney

    (@dcooney)

    hah, not sure what 20 points to gryphindor is, but thanks!

    Thread Starter fosteralex

    (@fosteralex)

    Harry potter fam. Figured you went to Hogwarts since this plugin is magic.

    Plugin Author Darren Cooney

    (@dcooney)

    hah, nice.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Using Bootstrap to display 3 posts in a row’ is closed to new replies.