Using Bootstrap to display 3 posts in a row

  • Resolved fosteralex

    (@fosteralex)


    9 years, 8 months ago

    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)

    9 years, 8 months ago

    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)

    9 years, 8 months ago

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

    Cheers,

    Thread Starter fosteralex

    (@fosteralex)

    9 years, 8 months ago

    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)

    9 years, 8 months ago

    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)

    9 years, 8 months ago

    Poof. worked. Thanks alot. 20 points to gryphindor

    Plugin Author Darren Cooney

    (@dcooney)

    9 years, 8 months ago

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

    Thread Starter fosteralex

    (@fosteralex)

    9 years, 8 months ago

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

    Plugin Author Darren Cooney

    (@dcooney)

    9 years, 8 months ago

    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.

Tags