Bootstrap Card is built with as little markup and styles as possible but still manages to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
Basic Bootstrap Card Example
A basic bootstrap card is created with the .card class, and the content inside the card has a .card-body class.Code :
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Card Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Card</h2>
<div class="card">
<div class="card-body">Bootstrap card Example</div>
</div>
</div>
</body>
</html>
Output:
Below is another example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of their parent element. This can be easily customized with various sizing options.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="bootstrapcard.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">EMLOYEE NAME</h5>
<p class="card-text">Some example text some example text. Here you can add content of card...</p>
<a href="#" class="btn btn-info">View Profile</a>
</div>
</div>
</body>
</html>
0 comments:
Post a Comment
Please do not enter any spam link in the message box.