Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Angelina Bethoney
Angelina Bethoney
117 Points
Posted by Angelina Bethoney
Angelina Bethoney
117 Points

Bootstrap Grid Issues

I am following the Bootstrap to WP lessons, and am trying to make the portfolio page. For some reason, my examples are showing up in a column, not as a row. This is my page: www.angelina-marie.com/portfolio

And my code: """ <?php get_header(); ?> <div class="container"> <h1><?php the_title(); ?></h1> <div class="row"> <div class="col-xs-4">

    <?php
    $args = array(
        'post_type' => 'Portfolio'
        );
    $the_query = new WP_Query ( $args );
    ?>

    <?php if (have_posts()) : while ( $the_query -> have_posts ()) : $the_query -> the_post(); ?>

    <h3><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h3>
    <?php
    $thumbnail_id = get_post_thumbnail_id();
    $thumbnail_url = wp_get_attachment_image_src($thumbnail_id, 'thumbnail-size', true);

    ?>
    <a href="<?php the_permalink();?>"><img src="<?php echo $thumbnail_url[0];?>" alt="<?php the_title();?>"></a>

<?php $portfolio_count = $the_query->current_post +1;?> <?php if ($portfolio_count % 4 == 0): ?> </div><div class="row"> <?php endif; ?> </div> </div> <?php endwhile; endif; ?>

    """
Christopher Stöckl
Christopher Stöckl
19,795 Points
Christopher Stöckl
Christopher Stöckl
19,795 Points

Hi Angelina!

It seems that you are not putting the heading and the link into the div with the right class. Only Example 3 has a div with the class "col-xs-4" asigned.

These need to be around every post:

<div class="col-xs-4">

</div>

Cheers,

Christopher

1 Answer

Angelina Bethoney
Angelina Bethoney
117 Points
Angelina Bethoney
Angelina Bethoney
117 Points

I guess I'm still a little confused. In the Bootstrap -> WP video, it only showed one block of code. When I try to put the divs around four blocks of code, I'm getting the same picture several times.