user3078100
user3078100

Reputation: 169

Creating order in columns

I'm using the col-md-6 class in bootstrap to arrange my content into two 50% columns.

Here is a demonstration of how it looks and how I want it to look. The one on the left is how it looks and the one on the right is how I want it to look:

enter image description here

The titles seem to align fine, but the rest of the content does not.

Also, for some reason, the third title is lagging on the bottom instead of aligning to the fourth title (I have no idea why).

Code:

<div class="container">
<div class="row">
    <?php

    while ($query->have_posts())
    {
        $query->the_post();

        ?>

        <div class="col-md-6">

            <h2><a href="<?php the_permalink(); ?>" align="middle"><?php the_title(); ?></a></h2>
            <a href="<?php the_permalink(); ?>">
                <?php

                if ( has_post_thumbnail() ) {
                    echo '<p>';
                    the_post_thumbnail("small");
                    echo '</p>';
                }
            ?>
            </a>
            <p><br /><?php the_excerpt(); ?><p>
            <div class="alert alert-dismissible alert-info">
                <h3>Free trial available?</h3>
                <p><?php the_field('free'); ?></p>
            </div>

        </div>

        <?php
    }
    ?>

</div>
</div>

Upvotes: 1

Views: 52

Answers (2)

Dinsdale
Dinsdale

Reputation: 184

<div class="container">
    <?php
    $i=0;
    while ($query->have_posts())
    {
        if($i%2==0)
            echo '<div class="row">';
        $query->the_post();

        ?>

        <div class="col-md-6" >
           <div style="height:600px">
            <h2><a href="<?php the_permalink(); ?>" align="middle"><?php the_title(); ?></a></h2>
            <a href="<?php the_permalink(); ?>">
                <?php

                if ( has_post_thumbnail() ) {
                    echo '<p>';
                    the_post_thumbnail("small");
                    echo '</p>';
                }
            ?>
            </a>
            <p><br /><?php the_excerpt(); ?><p>
            </div>
            <div class="alert alert-dismissible alert-info">
                <h3>Free trial available?</h3>
                <p><?php the_field('free'); ?></p>
            </div>

        </div>

        <?php
        if($i%2!=0)
            echo '</div>';
        $i++;
    }
    ?>

</div>

Upvotes: 2

MR.Don&#39;t know
MR.Don&#39;t know

Reputation: 235

Do it like this:

/* CSS used here will be applied after bootstrap.css */
.content1{
  background-color:red;
}

.content2{
  background-color:blue;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
​<div class="container">
<div class="row">
 <div class="col-md-6 content1">
 <h1> CONTENT</h1><h1>
   <p>xxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx</p>
</h1></div> 
<div class="col-md-6 content2">
  <h1> CONTENT</h1><h1>
   <p>xxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx</p>
</h1></div> 

</div>
</div>

Upvotes: -1

Related Questions