Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Bootstrap Customize Card Style Example
Keywords : card, bootstrap, bootstrap card, bootstrap cards, bootstrap card examples, bootstrap card with headers, bootstrap card with footer, bootstrap card header, bootstrap card footer, bootstrap card example
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Customize Card Style Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .bcontent { margin-top: 10px; } </style> </head> <body> <div class="container-fluid bcontent"> <h2>Bootstrap Customize Card Style</h2> <hr /> <div class="row"> <div class="col-sm-4"> <div class="card text-white bg-primary mb-4"> <div class="card-body"> <h5 class="card-title">Suresh Dasari</h5> <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card text-white bg-secondary mb-4"> <div class="card-body"> <h5 class="card-title">Suresh Dasari</h5> <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card text-white bg-info mb-4"> <div class="card-body"> <h5 class="card-title">Suresh Dasari</h5> <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card text-white bg-success mb-4"> <div class="card-body"> <h5 class="card-title">Suresh Dasari</h5> <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card text-white bg-warning mb-4"> <div class="card-body"> <h5 class="card-title">Suresh Dasari</h5> <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card text-white bg-danger mb-4"> <div class="card-body"> <h5 class="card-title">Suresh Dasari</h5> <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card text-white bg-dark mb-4"> <div class="card-body"> <h5 class="card-title">Suresh Dasari</h5> <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p> </div> </div> </div> <div class="col-sm-4"> <div class="card text-dark bg-light mb-4"> <div class="card-body"> <h5 class="card-title">Suresh Dasari</h5> <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p> </div> </div> </div> </div> </div> </body> </html>
Click Here to See Result
Result
Previous
Next