Bootstrap 4 card danger example - How to make card danger in Bootstrap 4?
The latest Bootstrap 4 framework comes with variety of easy to use components with various customization options. The card in Bootstrap 4 is one of the most used components for displaying the visual information to user in the web page. If you have to display emergency information on UI of your web application/website you can use the card danger of Bootstrap 4.
In this section we will teach you to make Bootstrap 4 danger card with simple example code.
The Bootstrap 4 cards is used by web designers to display the contextual information on the web page. Here is code of displaying the contextual information with the danger card in bootstrap 4.
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Bootstrap4 card danger example 1</p>
</div>
</div>
Above code will display the card like this:
Here is the complete code of Bootstrap 4 card danger example:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<title>Bootstrap4 card danger example</title>
</head>
<body>
<div class="container">
<h1>Bootstrap4 card danger example</h1>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Bootstrap4 card danger example 1</p>
</div>
</div>
<div class="card bg-danger" style="width: 18rem;">
<div class="card-body text-center">
<p class="card-text">Bootstrap4 card danger example 2</p>
</div>
</div>
<br>
<p> </p>
<p> </p>
<p> </p>
<p>Read complete tutorial at
<a href="https://www.roseindia.net/bootstrap/bootstrap4/bootstrap-4-card-danger-example.shtml">
<strong>Bootstrap4 card danger example</strong></a> </p>
</div>
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<p> </p>
</body>
</html>
In this tutorial you learned to create Bootstrap 4 card in danger type.
You can check it online at: Bootstrap 4 card danger example
Check more tutorials at:
