×

Html & Html5

The World's best Software Development Study Portal

Bootstrap Card


Card is like a box having some bordered-around the context with some padding.
Let’s understand this by the following program :-


Basic Card - It creates with .card class

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 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.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<h2>Basic Card </h2>

<div class="card">

<div class="card-body">Basic card</div>

</div>

</div>

</body>

</html>

Output of this Program


Basic Card

Basic card

So here we just created our basic card.



Card Images


We can also use images in our cards . The context which we want to write about , we can write that on the top of the image as well as at the bottom .And we use .card class for it.
Let’s understand them by this program :-


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 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.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<h2>Card Image</h2>

<p>Image at the top</p>

<div class="card" style="width:300px">

<img class="card-img-top" src="scenery.jpg" alt="Card image" style="width:100%">

<div class="card-body">

<h4 class="card-title">Scenery</h4>

<p class="card-text">It is a beautiful picture.</p>

<a href="#" class="btn btn-primary"> See details</a>

</div>

</div>

<p>Image at the bottom (card-img-bottom )</p>

<div class="card" style="width:300px">

<div class="card-body">

<h4 class="card-title">Scenery</h4>

<p class="card-text">It is a beautiful picture.</p>

<a href="#" class="btn btn-primary"> See details</a>

</div>

<img class="card-img-top" src="scenery.jpg" alt="Card image" style="width:100%">

</div>

</div>

</body>

</html>

Output of this Program


Card Image

Image at the top

Card image

Scenery

It is a beautiful picture.

See details



Image at the bottom (card-img-bottom )

Scenery

It is a beautiful picture.

See details
Card image

Contextual Cards


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 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.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<h2>Cards with Contextual Classes</h2>

<div class="card">

<div class="card-body">Basic card</div>

</div>


<div class="card bg-primary text-white">

<div class="card-body">Primary card</div>

</div>


<div class="card bg-success text-white">

<div class="card-body">Success card</div>

</div>


<div class="card bg-info text-white">

<div class="card-body">Info card</div>

</div>


<div class="card bg-warning text-white">

<div class="card-body">Warning card</div>

</div>


<div class="card bg-danger text-white">

<div class="card-body">Danger card</div>

</div>


<div class="card bg-secondary text-white">

<div class="card-body">Secondary card</div>

</div>


<div class="card bg-dark text-white">

<div class="card-body">Dark card</div>

</div>


<div class="card bg-light text-dark">

<div class="card-body">Light card</div>

</div>

</body>

</html>

Output of this Program


Cards with Contextual Classes

Basic card

Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card

Card Deck


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 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.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<div class="card-deck">

<div class="card bg-primary">

<div class="card-body text-center">

<p class="card-text">Some text inside the first card</p>

<p class="card-text">Some more text to increase the height</p>

<p class="card-text">Some more text to increase the height</p>

<p class="card-text">Some more text to increase the height</p>

</div>

</div>

<div class="card bg-warning">

<div class="card-body text-center">

<p class="card-text">Some text inside the second card</p>

</div>

</div>

<div class="card bg-success">

<div class="card-body text-center">

<p class="card-text">Some text inside the third card</p>

</div>

</div>

<div class="card bg-danger">

<div class="card-body text-center">

<p class="card-text">Some text inside the fourth card</p>

</div>

</div>

</div>

</div>

</body>

</html>

Output of this Program


Some text inside the first card

Some more text to increase the height

Some more text to increase the height

Some more text to increase the height

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

So here we just put the images and write the context once at the top , and once at the bottom of the image.









Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute