window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XQHM40L9F7');

Bootstrap Cards


Go to main Page

Cards in bootstrap

Bootstrap 4 has cards that are bordered with some padding around them. Cards have a header footer and color options.


Contextual Cards

Success card

Warning card

Dark

info

primary

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 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 bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
<br>
   <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
   <div class="card bg-dark text-white">
    <div class="card-body">Dark </div>
  </div>
  <br>
   <div class="card bg-info text-white">
    <div class="card-body">info </div>
  </div>
  <br>
   <div class="card bg-primary text-white">
    <div class="card-body">primary </div>
  </div>
  <br>

</body>
</html>




Images in cards


Code

<!DOCTYPE html>
                <html lang="en">
                <head>
                <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>
                <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
                integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
                <script src='https://kit.fontawesome.com/a076d05399.js'></script>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js">
                
                </script>
                <style>
                button:hover{
                background-color: black;
                color:white;
                border:2px solid white;
                }
                button{
                background-color: #621AAD;
                color:white;
                width: auto;
                height: auto;
                border:1px solid#621AAD;
                text-align:center;
                padding: 9px;
                border-radius: 10px;
                font-size: 18px;
                
                
                }
                </style>
                </head>
                <body>
                <div id="div10" class="container">
                <br><br><br><br>
                <h1 style="color:white" class="card-title text-center">Our Courses</h1>
                <div class="card-deck">
                <div class="card bg-light text-center">
                <img class="card-img-top"
                src="https://media.istockphoto.com/photos/computer-programmer-working-on-new-software-program-picture-id1212006391?b=1&k=6&m=1212006391&s=170667a&w=0&h=lmOane8hXnm83QYL1KjkXS4oTBagjiueHWpyHOElGD8="
                alt="Card image" style="width:100%">
                <div class="card-body">
                <h4 class="card-title">Full Stack Web Development</h4>
                <p class="card-text">Learn Html Css Javascript Bootsrap and node js</p>
                <a href="web.html"><button>Enroll Now</button></a>
                </div>
                </div>
                <div class="card bg-light">
                
                <img class="card-img-bottom"
                src="https://media.istockphoto.com/photos/professional-development-programmer-cooperating-meeting-programming-picture-id1209842817?b=1&k=6&m=1209842817&s=170667a&w=0&h=vK4tyOnJHzzPCatUsx4mjMrX1iEOKKvXwEABQjZA1dA="
                alt="Card image" style="width:100%">
                <div class="card-body text-center ">
                <h4 class="card-title">Full Stack Python Programming</h4>
                <p class="card-text">Learn all versions of Python with Projects</p>
                <a href="python.html"><button>Enroll Now</button></a>
                
                </div>
                </div>
                
                
                </body>
                </html>