Bootstrap Cards
Cards add a flexible container for displaying content in a different design.The class "card" is used to create a card.Other classes are
Cards add a flexible container for displaying content in a different design.The class "card" is used to create a card.Other classes are
- card-body:Create container of a card.
- card-title:Create title of a card.
- card-text:Add text element in a card.
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="card
card-body">
<h4
class="card-title">My
First Card</h4>
<p
class="card-text">This
is a Simple card Example.You need to put your text here.</p>
<a
href="#"
class="btn
btn-secondary">More</a>
</div>
</div>
</body>
</html>
Output :
You can add card header and card footer by adding class
Contextual Cards
There are 8 class , you can add as card background .
Example
.card-header or .card-footerExample
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="card"
style="max-width:
250px;">
<div
class="card-header">
This
is your header portion
</div>
<h4
class="card-title">My
First Card</h4>
<div
class="card-body">
<p
class="card-text">
This
is a Simple card Example.You need to put your text here.</p>
<a
href="#"
class="btn
btn-secondary">More</a>
</div>
<div
class="card-footer">
This
is your footer portion
</div>
</div>
</div>
</body>
</html>
Output :
This is your header portion
My First Card
This is a Simple card Example.You need to put your text here.
More
Contextual Cards
There are 8 class , you can add as card background .
- bg-primary
- bg-success
- bg-info
- bg-warning
- bg-danger
- bg-secondary
- bg-dark
- bg-light
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="card"
style="max-width:
250px;">
<div
class="card-header
bg-primary">
This
is your header portion
</div>
<h4
class="card-title
bg-info">
My
First Card</h4>
<div
class="card-body
bg-warning">
<p
class="card-text
bg-danger">
This
is a Simple card Example.You need to put your text here.</p>
<a
href="#"
class="btn
btn-secondary">More</a>
</div>
<div
class="card-footer
bg-secondary">
This
is your footer portion
</div>
</div>
</div>
</body>
</html>
Output
This is your header portion
My First Card
This is a Simple card Example.You need to put your text here.
More
You can add image to the card .card-img-top ,card-img-bottom class is used under a image tag.
Example
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="card"
style="max-width:
250px;">
<img
class="card-img-top"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvaJfuchTAhD6_OUZI8uDIH9aPlh1B3jeZz_yhk1nLvxjME-4ePcZC6XCrcfEI-HPsG4ifWiOZVlHgLnEYKnaH1oif8pP1ylQiIFmitieak2q0dTcoDLvo3tpIv3VK7-Erie1gIzDOuvT1/s400/IMG_1874.jpg"alt="Card
image">
<h4
class="card-title">
My
First Card</h4>
<div
class="card-body">
<p
class="card-text">
This
is a Simple card Example.You need to put your text here.</p>
<a
href="#"
class="btn
btn-secondary">More</a>
</div>
</div>
</div>
</body>
</html>
Output
Card Image Overlays
If you want your image should be overlay , you should use "card-img-overlay" class.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="card"
style="max-width:
250px;">
<img
class="card-img-top"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvaJfuchTAhD6_OUZI8uDIH9aPlh1B3jeZz_yhk1nLvxjME-4ePcZC6XCrcfEI-HPsG4ifWiOZVlHgLnEYKnaH1oif8pP1ylQiIFmitieak2q0dTcoDLvo3tpIv3VK7-Erie1gIzDOuvT1/s400/IMG_1874.jpg"alt="Card
image">
<div
class="card-img-overlay">
<p
class="card-text">
This
is a Simple card Example.You need to put your text here.</p>
<a
href="#"
class="btn
btn-secondary">More</a>
</div>
</div>
</div>
</body>
</html>
Output
