How to create card deck using bootstrap?

 

Each card in card deck has equal width and height and are not attached to each other. Below is the sample code snippet to create card deck:

<div class="card-deck">
    <div class="card">
        <img src="images/example.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is testfry.com site.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="images/example.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is testfry.com site.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="images/example.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is testfry.com site.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
</div>

 

Related #tags:     #bootstrap     #html     #css    

Related questions



● What is the 403 Forbidden Error and how to resolve this error?

 
● What will be the regex to replace/remove specific HTML pattern/string from a source string?

 
● How to create shadow effect for DIV tag using CSS?

 
● How to create website page where content will load automatically after every page scroll?

 
● How can we create grid panel using CSS?

 
● How to display HTML tags as plain text without conversion in php?

 


Looking for change? Click below to prepare for technical interview.


Technical Interview Questions