Bootstrap card as posts

by Dawid Adach,

Final result preview
Live preview
  1. Let's copy following code to our index.php below the carousel section:
  2. 
    <br>
    <!--Content-->
    <div class="container">
        <div class="row">
            <!--First columnn-->
            <div class="col-lg-4">
                <!--Card-->
                <div class="card wow fadeIn" data-wow-delay="0.2s">
    
                    <!--Card image-->
                    <div class="view overlay hm-white-slight">
                        <img src="http://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(120).jpg" class="img-fluid" alt="">
                        <a href="#">
                            <div class="mask"></div>
                        </a>
                    </div>
                    <!--/.Card image-->
    
                    <!--Card content-->
                    <div class="card-block">
                        <!--Title-->
                        <h4 class="card-title">Mesmerizing Landscapes</h4>
                        <!--Text-->
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-info">Read more</a>
                    </div>
                    <!--/.Card content-->
    
                </div>
                <!--/.Card-->
            </div>
            <!--First columnn-->
    
            <!--Second columnn-->
            <div class="col-lg-4">
                <!--Card-->
                <div class="card wow fadeIn" data-wow-delay="0.4s">
    
                    <!--Card image-->
                    <div class="view overlay hm-white-slight">
                        <img src="http://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).jpg" class="img-fluid" alt="">
                        <a href="#">
                            <div class="mask"></div>
                        </a>
                    </div>
                    <!--/.Card image-->
    
                    <!--Card content-->
                    <div class="card-block">
                        <!--Title-->
                        <h4 class="card-title">Trevelers Toolbox</h4>
                        <!--Text-->
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-info">Read more</a>
                    </div>
                    <!--/.Card content-->
    
                </div>
                <!--/.Card-->
            </div>
            <!--Second columnn-->
    
            <!--Third columnn-->
            <div class="col-lg-4">
                <!--Card-->
                <div class="card wow fadeIn" data-wow-delay="0.6s">
    
                    <!--Card image-->
                    <div class="view overlay hm-white-slight">
                        <img src="http://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(122).jpg" class="img-fluid" alt="">
                        <a href="#">
                            <div class="mask"></div>
                        </a>
                    </div>
                    <!--/.Card image-->
    
                    <!--Card content-->
                    <div class="card-block">
                        <!--Title-->
                        <h4 class="card-title">Mountain Rivers</h4>
                        <!--Text-->
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-info">Read more</a>
                    </div>
                    <!--/.Card content-->
    
                </div>
                <!--/.Card-->
            </div>
            <!--Third columnn-->
        </div>
    </div>
    <!--/.Content-->
    
                  

    Great!, our now we can see 3 cards, though they are hardcoded, lets fix it.

  3. Replace static content with second WP Query. Replace entire code between 2 comments:
  4. 
    <!-- First column -->
    .
    .
    .
    <!--/.Third columnn-->
                  
    with following code:
    
    <!--Dynamic query listing posts from "cards" category-->
    <?php 
    $args = array(
    'orderby'          => 'date',
    'order'            => 'ASC',
    'posts_per_page'   => 3,
    'category_name'  => 'cards'
    );
    
    // The Query
    $query2 = new WP_Query( $args );
    
    if ( $query2->have_posts() ) {
        // The Loop
    while ( $query2->have_posts() ) {
        $query2->the_post();
        ?>
        <!--Auto generated columnn-->
        <div class="col-lg-4">
            <!--Card-->
            <div class="card wow fadeIn" data-wow-delay="0.2s">
    
                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="<?php echo the_post_thumbnail_url();?>" class="img-fluid" alt="">
                    <a href="<?php echo get_permalink() ?>">
                        <div class="mask"></div>
                    </a>
                </div>
                <!--/.Card image-->
    
                <!--Card content-->
                <div class="card-block">
                    <!--Title-->
                    <h4 class="card-title"><?php  echo get_the_title(); ?></h4>
                    <!--Text-->
                    <p class="card-text"><?php echo get_the_excerpt();?></p>
                    <a href="<?php echo get_permalink() ?>" class="btn btn-outline-primary waves-effect">Read more</a>
                </div>
                <!--/.Card content-->
    
            </div>
            <!--/.Card-->
        </div>
        <!--/.Auto generated columnn-->
        <?php
    }
    wp_reset_postdata();
    } ?>
    <!--/.Dynamic query listing posts from "cards" category-->
                  

    Note: I have replaced previous button class to following onesbtn btn-outline-primary waves-effect, as a result buttons are outlined. You can do the same or choose whatever color you want from our button color types.

    Mechanism is exactly the same as in previous lesson. The only changes were:

    • removed $counter variable. We don't need to add anything specific with any cards.
    • changed category slug to "cards"
    • used cards HTML instead of slides

    Note: current solutions assumes that there are exactly 3 cards, therefore each cards uses col-4. You can change number of cards in query, however that will break the code bootstrap grid columns will not sum to 12 as they are supposed to. In one of the next lessons we will learn how to make dynamically adjust number of columns.

    We are done with our half carousel & cards template.


If something doesn’t work as expected, you can download a final code for this lesson here:

Previous Lesson Download Live preview

Do you want to share?

Facebook Twitter Google +

About author


Dawid Adach

For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the biggest companies within a domain. Since 2 years as a co-founder of mdbootstrap.com & brandflow.net is using and teaching others technologies like Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Comments 9

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us