Bootstrap 4 card danger example

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:

Bootstrap 4 card danger example

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:

Bootstrap 4 Tutorials

Bootstrap 4 card danger example

Bootstrap 4 card danger example

Bootstrap 4 card danger example - How to make card danger in Bootstrap 4?

Tutorials