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 Card with Header and Footer 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 Card with Header and Footer 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 bcontent"> <h2>Bootstrap Card with Header and Footer</h2> <hr /> <div class="card"> <div class="card-header">Card Header</div> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">Welcome to Tutlane. Its card sample text.</p> <a href="#" class="btn btn-primary">View Profile</a> </div> <div class="card-footer text-muted">1 day ago</div> </div> </div> </body> </html>
Click Here to See Result
Result
Previous
Next