Sign in


Sign up


Bootstrap Card Layout

Bootstrap Card Layout is a design based on standard Bootstrap card combined in different forms and with different functionalities.

See the following examples of Bootstrap Card Layout:


Basic cards layout

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

Title of the news

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.

Button

Features List

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
  • Cras justo odio 14
  • Dapibus ac facilisis in 2

* At vero eos et accusamus et iusto ducimus.

                
.text-small {
    font-size: 0.75rem;
}
                
            
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-lg-4 col-md-12">
        
        <!--Card-->
        <div class="card">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" class="img-fluid" alt="photo">
                <a href="#">
                    <div class="mask"></div>
                </a>
            </div>

            <!--Card content-->
            <div class="card-body">
                <!--Title-->
                <h4 class="card-title">Card title</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-primary">Button</a>
            </div>

        </div>
        <!--/.Card-->
                        
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-4 col-md-6">

        <!--Card-->
        <div class="card card-dark">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/SLides/img%20(125).jpg" class="img-fluid" alt="photo">
                <a href="#">
                    <div class="mask"></div>
                </a>
            </div>

            <!--Card content-->
            <div class="card-body">
                <!--Title-->
                <h4 class="card-title">Title of the news</h4>
                <!--Text-->
                <p class="card-text white-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>
                <a href="#" class="btn btn-outline-white btn-md waves-effect">Button</a>
            </div>

        </div>
        <!--/.Card-->

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-4 col-md-6">

        <!--Panel-->
        <div class="card">
            <h3 class="card-header light-blue lighten-1 white-text font-up font-bold text-center py-5">Features List</h3>
            <div class="card-body">
                <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Cras justo odio
                        <span class="badge badge-primary badge-pill">14</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Dapibus ac facilisis in
                        <span class="badge badge-primary badge-pill">2</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Morbi leo risus
                        <span class="badge badge-primary badge-pill">1</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Cras justo odio
                        <span class="badge badge-primary badge-pill">14</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Dapibus ac facilisis in
                        <span class="badge badge-primary badge-pill">2</span>
                    </li>
                </ul>
                <p class="text-small text-muted mb-0 pt-3">* At vero eos et accusamus et iusto ducimus.</p>                
            </div>
        </div>
        <!--/.Panel-->

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Basic panels layout

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

News title

Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate non proident velit esse quam.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-lg-4 col-md-12">

        <!--Panel-->
        <div class="card card-body">
            <h4 class="card-title">Panel title</h4>
            <p class="card-text"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
            <div class="flex-row">
                <a class="card-link">Card link</a>
                <a class="card-link">Another link</a>
            </div>
        </div>
        <!--/.Panel-->

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-4 col-md-6">

        <!--Card Primary-->
        <div class="card indigo text-center z-depth-2">
            <div class="card-body">
                <h3 class="font-up font-bold amber-text mt-2 mb-3"><strong>News title</strong><i class="fa fa-heart-o ml-3"></i></h3>
                <p class="white-text mb-0">Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate non proident velit esse quam. </p>
            </div>
        </div>
        <!--/.Card Primary-->

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-4 col-md-6">

        <!--Panel-->
        <div class="card text-center"">
            <div class="card-header success-color white-text">
                Featured
            </div>
            <div class="card-body">
                <h4 class="card-title">Special title treatment</h4>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a class="btn btn-success btn-sm">Go somewhere</a>
            </div>
            <div class="card-footer text-muted success-color white-text">
                <p class="mb-0">2 days ago</p>
            </div>
        </div>
        <!--/.Panel-->

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Grid layout options

Two equal columns layout

Title of the news

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.

Button

Title of the news

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.

Button

Three equal columns layout

First column

Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate non proident velit esse quam.

Second column

Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate non proident velit esse quam.

Third column

Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate non proident velit esse quam.

Two different columns layout

Nature is beautiful!

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.

Read more

Read about polish plants

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto vitae.

Read more
                
<h4 class="text-center py-4">Two equal columns layout</h4>

    <!-- Grid row -->
    <div class="row">

        <!-- Grid column -->
        <div class="col-md-6 mb-r">
    
            <!--Card-->
            <div class="card default-color-dark">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/SLides/img%20(138).jpg" class="img-fluid" alt="photo">
                    <a href="#">
                        <div class="mask"></div>
                    </a>
                </div>

                <!--Card content-->
                <div class="card-body text-center">
                    <!--Title-->
                    <h4 class="card-title white-text">Title of the news</h4>
                    <!--Text-->
                    <p class="card-text white-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>
                    <a href="#" class="btn btn-outline-white btn-md waves-effect">Button</a>
                </div>

            </div>
            <!--/.Card-->
    
        </div>
        <!-- Grid column -->
    
        <!-- Grid column -->
        <div class="col-md-6 mb-r">
    
            <!--Card-->
            <div class="card primary-color-dark">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/SLides/img%20(135).jpg" class="img-fluid" alt="photo">
                    <a href="#">
                        <div class="mask"></div>
                    </a>
                </div>

                <!--Card content-->
                <div class="card-body text-center">
                    <!--Title-->
                    <h4 class="card-title white-text">Title of the news</h4>
                    <!--Text-->
                    <p class="card-text white-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>
                    <a href="#" class="btn btn-outline-white btn-md waves-effect">Button</a>
                </div>

            </div>
            <!--/.Card-->
    
        </div>
        <!-- Grid column -->
    
    </div>
    <!-- Grid row -->

    <h4 class="text-center pb-4">Three equal columns layout</h4>

    <!-- Grid row -->
    <div class="row">
    
        <!-- Grid column -->
        <div class="col-lg-4 col-md-12 mb-r">
    
            <!--Card Primary-->
            <div class="card mdb-color text-center z-depth-2">
                <div class="card-body">
                    <h3 class="font-up font-bold cyan-text mt-2 mb-3"><strong>First column</strong></h3>
                    <p class="white-text mb-0">Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate non proident velit esse quam. </p>
                </div>
            </div>
            <!--/.Card Primary-->
    
        </div>
        <!-- Grid column -->
    
        <!-- Grid column -->
        <div class="col-lg-4 col-md-6 mb-r">
    
            <!--Card Primary-->
            <div class="card red darken-4 text-center z-depth-2">
                <div class="card-body">
                    <h3 class="font-up font-bold light-green-text mt-2 mb-3"><strong>Second column</strong></h3>
                    <p class="white-text mb-0">Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate non proident velit esse quam. </p>
                </div>
            </div>
            <!--/.Card Primary-->
    
        </div>
        <!-- Grid column -->
    
        <!-- Grid column -->
        <div class="col-lg-4 col-md-6 mb-r">
    
            <!--Card Primary-->
            <div class="card light-blue darken-1 text-center z-depth-2">
                <div class="card-body">
                    <h3 class="font-up font-bold purple-text mt-2 mb-3"><strong>Third column</strong></h3>
                    <p class="white-text mb-0">Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate non proident velit esse quam. </p>
                </div>
            </div>
            <!--/.Card Primary-->
    
        </div>
        <!-- Grid column -->
    
    </div>
    <!-- Grid row -->

    <h4 class="text-center pb-4">Two different columns layout</h4>

    <!-- Grid row -->
    <div class="row">
    
        <!-- Grid column -->
        <div class="col-md-6 col-lg-7 mb-r">
    
            <!--Card-->
            <div class="card">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/SLides/img%20(117).jpg" class="img-fluid" alt="photo">
                    <a href="#">
                        <div class="mask"></div>
                    </a>
                </div>

                <!--Card content-->
                <div class="card-body text-center">
                    <!--Title-->
                    <h4 class="card-title">Nature is beautiful!</h4>
                    <!--Text-->
                    <p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>
                    <a href="#" class="btn btn-dark-green">Read more</a>
                </div>

            </div>
            <!--/.Card-->
    
        </div>
        <!-- Grid column -->
    
        <!-- Grid column -->
        <div class="col-md-6 col-lg-5">
    
            <!--Card-->
            <div class="card green darken-3">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid" alt="photo">
                    <a href="#">
                        <div class="mask"></div>
                    </a>
                </div>

                <!--Card content-->
                <div class="card-body text-center">
                    <!--Title-->
                    <h4 class="card-title white-text">Read about polish plants</h4>
                    <!--Text-->
                    <p class="card-text white-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto vitae.</p>
                    <a href="#" class="btn btn-outline-white btn-md waves-effect">Read more</a>
                </div>

            </div>
            <!--/.Card-->
    
        </div>
        <!-- Grid column -->
    
    </div>
    <!-- Grid row -->
                
            

Cascading layout MDB Pro component

Wider

Alice Mayer

Photographer

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Narrower

Culinary

Cheat day inspirations

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button

Regular

Billy Cullen

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

                
<div class="row">
    <div class="col-lg-4 col-md-12 mb-r">

        <h4 class="py-4 text-center">Wider</h4>

        <!--Card-->
        <div class="card card-cascade wider mb-r">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg" class="img-fluid">
                <a href="#!">
                    <div class="mask"></div>
                </a>
            </div>
            <!--/Card image-->

            <!--Card content-->
            <div class="card-body text-center">
                <!--Title-->
                <h4 class="card-title"><strong>Alice Mayer</strong></h4>
                <h5 class="indigo-text"><strong>Photographer</strong></h5>

                <p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam
                    rem aperiam.
                </p>


                <!--Linkedin-->
                <a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a>
                <!--Twitter-->
                <a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
                <!--Dribbble-->
                <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>

            </div>
            <!--/.Card content-->

        </div>
        <!--/.Card-->

    </div>
    <div class="col-lg-4 col-md-6 mb-r">

        <h4 class="py-lg-4 pb-4 text-center">Narrower</h4>

        <!--Card-->
        <div class="card card-cascade narrower mb-r" style="margin-top: 28px">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="img-fluid" alt="">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-body">
                <h5 class="pink-text"><i class="fa fa-cutlery"></i> Culinary</h5>
                <!--Title-->
                <h4 class="card-title">Cheat day inspirations</h4>
                <!--Text-->
                <p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
                    aliquid ex ea commodi.</p>
                <a class="btn btn-unique">Button</a>
            </div>
            <!--/.Card content-->

        </div>
        <!--/.Card-->

    </div>
    <div class="col-lg-4 col-md-6">

        <h4 class="py-lg-4 pb-4 text-center">Regular</h4>

        <!--Card-->
        <div class="card card-cascade">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Others/men.jpg" class="img-fluid" alt="">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-body text-center">
                <!--Title-->
                <h4 class="card-title"><strong>Billy Cullen</strong></h4>
                <h5>Web developer</h5>

                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi
                    sunt, quod quibusdam.
                </p>

                <!--Facebook-->
                <a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
                <!--Twitter-->
                <a type="button" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"></i></a>
                <!--Google +-->
                <a type="button" class="btn-floating btn-small btn-dribbble"><i class="fa fa-dribbble"></i></a>

            </div>
            <!--/.Card content-->

        </div>
        <!--/.Card-->
        
    </div>
</div>
                
            

Equal height columns layout

Card title

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Card title

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

                
<!-- Container -->
<div class="row">

    <!-- Column -->
    <div class="col-md-4 mb-4 d-flex align-items-stretch">

        <!--Card-->
        <div class="card">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(132).jpg" class="img-fluid" alt="">
                <a href="#">
                    <div class="mask"></div>
                </a>
            </div>

            <!--Card content-->
            <div class="card-body">
                <!--Title-->
                <h4 class="card-title">Card title</h4>
                <!--Text-->
                <p class="card-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
            </div>

        </div>
        <!--/.Card-->

    </div>
    <!-- Column -->

    <!-- Column -->
    <div class="col-md-4 mb-4 d-flex align-items-stretch">

        <!--Card-->
        <div class="card">

            <!--Card content-->
            <div class="card-body">
                <!--Title-->
                <h4 class="card-title">Card title</h4>
                <!--Text-->
                <p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
                <p class="card-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

        </div>
        <!--/.Card-->

    </div>
    <!-- Column -->

    <!-- Column -->
    <div class="col-md-4 mb-4 d-flex align-items-stretch">

        <!--Card-->
        <div class="card">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(133).jpg" class="img-fluid" alt="">
                <a href="#">
                    <div class="mask"></div>
                </a>
            </div>

            <!--Card content-->
            <div class="card-body">
                <!--Title-->
                <h4 class="card-title">Card title</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>
            </div>

        </div>
        <!--/.Card-->
        
    </div>
    <!-- Column -->

</div>
<!-- Container -->
                
            

Equal height columns layout within card

Card image cap

Title of the news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title of the news

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Title of the news

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

                
.flex-1 {
    flex: 1;
}
                
            
                
<div class="card">

    <!--Card image-->
    <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Slides/img(120).jpg" alt="Card image cap">

    <!--Card content-->
    <div class="card-body">

        <!-- Container -->
        <div class="d-block d-md-flex">

            <!-- Column -->
            <div class="p-3 flex-1">

                <h2 class="pb-3 font-bold">Title of the news</h2>
                <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            </div>
            <!-- Column -->

            <!-- Column -->
            <div class="p-3 flex-1">

                <h2 class="pb-3 font-bold">Title of the news</h2>
                <p align="justify">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
                
            </div>
            <!-- Column -->

            <!-- Column -->
            <div class="p-3 flex-1">

                <h2 class="pb-3 font-bold">Title of the news</h2>
                <p align="justify">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>

            </div>
            <!-- Column -->

        </div>
        <!-- Container -->

    </div>
</div>
                
            

Pricing cards layout MDB Pro component

Our pricing plans

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.

Basic

10

  • 1 project

  • 100 components

  • 150 features

  • 200 members

  • 250 messages

Buy now
Pro

20

  • 3 project

  • 200 components

  • 250 features

  • 300 members

  • 350 messages

Buy now
Enterprise

30

  • 5 project

  • 300 components

  • 350 features

  • 400 members

  • 450 messages

Buy now
                
<!--Section: Pricing v.2-->
<section class="section pb-3">

    <!--Section heading-->
    <h1 class="section-heading h1 pt-4">Our pricing plans</h1>
    <!--Section description-->
    <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>

    <!--Grid row-->
    <div class="row">
        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">

            <!-- Card -->
            <div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">

                <!--Pricing card-->
                <div class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3">

                    <!--Content-->
                    <div class="card-body">
                        <h5>Basic</h5>
                        <!--Price-->
                        <div class="price pt-0">
                            <h1>10</h1>
                        </div>
                        <!--Price-->
                        <ul class="striped">
                            <li>
                                <p><strong>1</strong> project</p>
                            </li>
                            <li>
                                <p><strong>100</strong> components</p>
                            </li>
                            <li>
                                <p><strong>150</strong> features</p>
                            </li>
                            <li>
                                <p><strong>200</strong> members</p>
                            </li>
                            <li>
                                <p><strong>250</strong> messages</p>
                            </li>
                        </ul>
                        <a class="btn btn-outline-white"> Buy now</a>
                    </div>

                </div>
                <!--Pricing card-->
            </div>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">

            <!-- Card -->
            <div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(4).jpg');">

                <!--Pricing card-->
                <div class="text-white text-center pricing-card d-flex align-items-center rgba-indigo-strong py-3 px-3">

                    <!--Content-->
                    <div class="card-body">
                        <h5>Pro</h5>
                        <!--Price-->
                        <div class="price pt-0">
                            <h1>20</h1>
                        </div>
                        <!--Price-->
                        <ul class="striped">
                            <li>
                                <p><strong>3</strong> project</p>
                            </li>
                            <li>
                                <p><strong>200</strong> components</p>
                            </li>
                            <li>
                                <p><strong>250</strong> features</p>
                            </li>
                            <li>
                                <p><strong>300</strong> members</p>
                            </li>
                            <li>
                                <p><strong>350</strong> messages</p>
                            </li>
                        </ul>
                        <a class="btn btn-outline-white"> Buy now</a>
                    </div>

                </div>
                <!--Pricing card-->
            </div>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">

            <!-- Card -->
            <div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">

                <!--Pricing card-->
                <div class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3">

                    <!--Content-->
                    <div class="card-body">
                        <h5>Enterprise</h5>
                        <!--Price-->
                        <div class="price pt-0">
                            <h1>30</h1>
                        </div>
                        <!--Price-->
                        <ul class="striped">
                            <li>
                                <p><strong>5</strong> project</p>
                            </li>
                            <li>
                                <p><strong>300</strong> components</p>
                            </li>
                            <li>
                                <p><strong>350</strong> features</p>
                            </li>
                            <li>
                                <p><strong>400</strong> members</p>
                            </li>
                            <li>
                                <p><strong>450</strong> messages</p>
                            </li>
                        </ul>
                        <a class="btn btn-outline-white"> Buy now</a>
                    </div>

                </div>
                <!--Pricing card-->
            </div>
        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--Section: Pricing v.2-->
                
            

Cards group layout MDB Pro component

Anna

Friends

Anna is a web designer living in New York.


83 Friends

Joined in 2012

John

Coworker

John is a copywriter living in Seattle.


48 Friends

Joined in 2015

Sara

Coworker

Sara is a video maker living in Tokyo.


127 Friends

Joined in 2014

                
<!--Section: Group of personal cards-->
<section class="pt-5 mt-3 pb-3">
    
    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-md-12">

            <!--Card group-->
            <div class="card-group">

                <!--Card-->
                <div class="card card-personal mb-r">

                    <!--Card image-->
                    <div class="view overlay hm-white-slight">
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg" alt="Card image cap">
                        <a href="#!">
                            <div class="mask"></div>
                        </a>
                    </div>
                    <!--Card image-->

                    <!--Card content-->
                    <div class="card-body">
                        <!--Title-->
                        <a><h4 class="card-title">Anna</h4></a>
                        <a class="card-meta">Friends</a>

                        <!--Text-->
                        <p class="card-text">Anna is a web designer living in New York.</p>
                        <hr>
                        <a class="card-meta"><span><i class="fa fa-user"></i>83 Friends</span></a>
                        <p class="card-meta float-right">Joined in 2012</p>
                    </div>
                    <!--Card content-->

                </div>
                <!--Card-->

                <!--Card-->
                <div class="card card-personal mb-r">

                    <!--Card image-->
                    <div class="view overlay hm-white-slight">
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="Card image cap">
                        <a href="#!">
                            <div class="mask"></div>
                        </a>
                    </div>
                    <!--Card image-->

                    <!--Card content-->
                    <div class="card-body">
                        <!--Title-->
                        <a><h4 class="card-title">John</h4></a>
                        <a class="card-meta">Coworker</a>

                        <!--Text-->
                        <p class="card-text">John is a copywriter living in Seattle.</p>
                        <hr>
                        <a class="card-meta"><span><i class="fa fa-user"></i>48 Friends</span></a>
                        <p class="card-meta float-right">Joined in 2015</p>
                    </div>
                    <!--Card content-->

                </div>
                <!--Card-->

                <!--Card-->
                <div class="card card-personal mb-r">

                    <!--Card image-->
                    <div class="view overlay hm-white-slight">
                        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(28).jpg" alt="Card image cap">
                        <a href="#!">
                            <div class="mask"></div>
                        </a>
                    </div>
                    <!--Card image-->

                    <!--Card content-->
                    <div class="card-body">
                        <!--Title-->
                        <a><h4 class="card-title">Sara</h4></a>
                        <a class="card-meta">Coworker</a>

                        <!--Text-->
                        <p class="card-text">Sara is a video maker living in Tokyo.</p>
                        <hr>
                        <a class="card-meta"><span><i class="fa fa-user"></i>127 Friends</span></a>
                        <p class="card-meta float-right">Joined in 2014</p>
                    </div>
                    <!--Card content-->

                </div>
                <!--Card-->

            </div>
            <!--Card group-->

        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--Section: Group of personal cards-->