14+ Bootstrap Card Examples

This post contains a total of 14+ Hand-Picked Bootstrap Card Examples with Source Code. All the Cards are made using Bootstrap CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Rasel Ahmed

Made by Rasel Ahmed. Gradient Color E-commerce Bootstrap Card. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Font-Awesome -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">

    <!-- Main Style CSS -->
    <link rel="stylesheet" type="text/css" href="style.css">
  <title></title>
<style>
.card-section{
    padding: 80px 0 80px ;
}

 .card{
     padding: 15px;
   margin-bottom:15px;
     border:none!important;
     background-image: linear-gradient(315deg, #6e72fc 0%, #ad1deb 74%);
}
 .card-two{
    background-image: linear-gradient(315deg, #fc6e6e 0%, #ad1deb 74%);
}
 .card-three{
    background-image: linear-gradient(315deg, #007cc6 0%, #d24aeb 74%);
}
 .card-title{
    color: #fff;
    font-size: 24px;
}
 .card-text{
    color: #ddd;
    padding-bottom: 15px;
}
 .btn-primary{
     background-color: transparent!important;
     border:2px solid #fff!important;
     border-radius: inherit!important;
}
 .cart-btn{
     background-color: #edeef2 !important;
     color: #000 !important;
     width: 96px;
     border-radius: 30px !important;
     margin: 0 auto;
     margin-top: -21px;
     margin-right: 16px 
}
 .first-bt{border: 4px solid #933ff1 !important;}
 .second-bt{border: 4px solid #d748a8 !important;}
 .third-bt{border: 4px solid #6365d8 !important;}
 
 .fa-cart-plus{
     padding-right: 10px;
}
</style>
</head>
<body>

    <div class="card-section">
        <div class="container">
            <div class="row">

                <div class="col-md-4">
                    <div class="card">
                        <img src="https://happyaddons.com/wp-content/uploads/2019/05/card-image8.jpg" class="card-img-top" alt="...">
                        <a href="#" class="btn btn-primary first-bt cart-btn">$24.00</a>
                        <div class="card-body">
                            <h5 class="card-title">This is card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary"><i class="fas fa-cart-plus"></i>Buy Now</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card card-two">
                        <img src="https://happyaddons.com/wp-content/uploads/2019/05/card-image8.jpg" class="card-img-top" alt="...">
                        <a href="#" class="btn btn-primary second-bt cart-btn">$99.00</a>
                        <div class="card-body">
                            <h5 class="card-title">This is card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary"><i class="fas fa-cart-plus"></i>Buy Now</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card card-three">
                        <img src="https://happyaddons.com/wp-content/uploads/2019/05/card-image8.jpg" class="card-img-top" alt="...">
                        <a href="#" class="btn btn-primary third-bt cart-btn">$66.00</a>
                        <div class="card-body">
                            <h5 class="card-title">This is card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary"><i class="fas fa-cart-plus"></i>Buy Now</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

2. By Barracuda1337

Made by Barracuda1337. Simple Bootstrap Cards. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

  
<style>
@import "https://fonts.googleapis.com/css2?family=Poppins:[email protected];200;300;400;500;600&display=swap";

.cardarea {
    padding-top: 100px;
}

body {
    width: auto;
    height: 100vh;
    top: 0px;
    left: 0px;
    /* background: rgba(140, 0, 255, .81); */
    background: -moz-linear-gradient(45deg, rgba(140, 0, 255, .6) 0%, rgba(2, 242, 114, .7) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop (0%, rgba(140, 0, 255, .6)), color-stop(100%, rgba(2, 242, 114, .7)));
    /* background: -webkit-linear-gradient(45deg, rgba(140, 0, 255, .6) 0%, rgba(2, 242, 114, .7) 100%); */
    background: -o-linear-gradient(45deg, rgba(140, 0, 255, .6) 0%, rgba(2, 242, 114, .7) 100%);
    background: -ms-linear-gradient(45deg, rgba(140, 0, 255, .6) 0%, rgba(2, 242, 114, .7) 100%);
    background: linear-gradient(45deg, rgba(140, 0, 255, .6) 0%, rgba(2, 242, 114, .7) 100%);
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c00ff', endColorstr='#02f272', GradientType=1);*/
    -webkit-transform: translate3d(0, 0, 0);

}

.card {
    margin-top: 10px;
    border: 0px transparent !important;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.35);
    text-align: center !important;
}

.card img {
    width: auto;
    height: 160px !important;
}

body {
    font-weight: 300;
    line-height: 1.7;
    font-family: poppins, sans-serif !important;
}

.card .newbutton {
    transition: all 0.3s ease-out;
    border: 0px transparent !important;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
    text-align: center !important;
}

.card .newbutton:hover {
    transition: all 0.3s ease-in;
    -webkit-box-shadow: 0 5px 13px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 5px 13px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0 5px 13px 0px rgba(0, 0, 0, 0.35);
}

.btn,
.btn-primary {
    border: none !important;
}
</style>
<body>
  <div class="container">
      <div class="col-md-12 d-md-flex cardarea">
        <div class="col-md-4">
          <div class="card" style="width: 18rem;">
            <img src="https://raw.githubusercontent.com/Barracuda1337/simplebootstrapcard/master/assets/img/1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                the card's content.</p>
              <a href="#" class="newbutton btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card" style="width: 18rem;">
            <img src="https://raw.githubusercontent.com/Barracuda1337/simplebootstrapcard/master/assets/img/2.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                the card's content.</p>
              <a href="#" class="newbutton btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card" style="width: 18rem;">
            <img src="https://raw.githubusercontent.com/Barracuda1337/simplebootstrapcard/master/assets/img/3.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                the card's content.</p>
              <a href="#" class="newbutton btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

3. By Muhammad Al Biruni

Made by Muhammad Al Biruni. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
  
<style>
.custom-card {
  margin: 0px auto;
  box-shadow: 0px 0px 50px rgba(165, 165, 165, 0.4);
  cursor: pointer;
}
.custom-card .card-title {
  font-size: 1.4rem;
}
.custom-card .card-text {
  color: #696969;
}
.custom-card .my-btn {
  background: #ba7b43;
  color: white;
}
.custom-card .my-btn:hover {
  color: white;
  background: #885427;
}
</style>
</head>
<body>
  <div class="container">
      <div class="row mt-5 justify-content-center">
        <div class="col">
          <div class="card custom-card border-0" style="width: 20rem;">
            <img
              src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
              class="card-img-top"
              alt="cat-image"
            />
            <div class="card-body">
              <h5 class="card-title font-weight-bold">
                Thinking of getting cat ?
              </h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn my-btn">Read more</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

4. By bubblesphere

Made by bubblesphere. Bootstrap Card Grid List. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500,300' rel='stylesheet' type='text/css'>
  
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  
<style>
@charset "UTF-8";
html,
body {
  background: #222;
}

ul {
  -moz-column-count: 3;
  -moz-column-gap: 50px;
  -webkit-column-count: 3;
  -webkit-column-gap: 50px;
  column-count: 3;
  column-gap: 50px;
}

li {
  overflow: hidden;
}

.card {
  margin-top: 50px;
  font-family: "Roboto", sans-serif;
  color: #444;
  border: 1px solid #999;
  border-radius: 4px;
  background: #eee;
  text-align: center;
  padding-top: 30px;
  float: left;
}
.card :before {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #eee;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
  font-size: 28px;
  font-style: normal;
  left: 50%;
  line-height: 60px;
  position: absolute;
  top: -30px;
  width: 60px;
}
.card .card-question {
  margin: 20px 0 20px;
  font-size: 150%;
}
.card .card-separator {
  width: 100%;
  margin: 10px 0 10px 0;
}
.card a {
  text-decoration: none;
  color: #7f8c8d;
}

.card-red {
  border-top: 4px solid #e74c3c;
}
.card-red :before {
  color: #e74c3c;
  content: "๏ƒต";
  font-family: "FontAwesome";
}
.card-red .card-separator {
  border: 1px solid #e74c3c;
}
.card-red .card-answer-separator {
  border: 1px dotted #e74c3c;
}

.card-green {
  border-top: 4px solid #16a085;
}
.card-green :before {
  color: #16a085;
  content: "๏€‡";
  font-family: "FontAwesome";
}
.card-green .card-separator {
  border: 1px solid #16a085;
}

.card-blue {
  border-top: 4px solid #3498db;
}
.card-blue :before {
  color: #3498db;
  content: "๏‚ฌ";
  font-family: "FontAwesome";
}
.card-blue .card-separator {
  border: 1px solid #3498db;
}
</style>
<body>
  <div class="container-fluid">
<ul>

  <li>
    <div class="card card-green col-md-12">
      <p class="card-question">#1</p>
      <div class="card-separator"></div>
      <p style="text-align:justify;">#1</b></p>
      <a href="https://en.wikipedia.org/wiki/List_of_the_verified_oldest_people">View Source</a>
      <div class="card-separator"></div>
    </div>
  </li>

  <li>
    <div class="card card-green col-md-12">
      <p class="card-question">#2</p>
      <div class="card-separator"></div>
      <p style="text-align:justify;">#2.</p>
      <a href="http://www.biography.com/people/bill-gates-9307520#early-life">View Source</a>
      <div class="card-separator"></div>
    </div>
  </li>

  <li>
    <div class="card card-blue  col-md-12">
      <p class="card-question">#3</p>
      <div class="card-separator"></div>
      <p style="text-align:justify;">#3.
      </p>
      <a href="https://en.wikipedia.org/wiki/List_of_the_verified_oldest_people">View Source</a>
      <div class="card-separator"></div>
    </div>
  </li>

  <li>
    <div class="card card-red col-md-12">
      <p class="card-question">#4</p>
      <div class="card-separator"></div>
      <p style="text-align:justify;"><b>#4</b></p>
      <a href="https://en.wikipedia.org/wiki/List_of_the_verified_oldest_people">View Source</a>
      <div class="card-separator"></div>
    </div>
  </li>

  <li>
    <div class="card card-green col-md-12">
      <p class="card-question">#5</p>
      <div class="card-separator"></div>
      <p style="text-align:justify;">#5.</p>
      <a href="http://www.biography.com/people/bill-gates-9307520#early-life">View Source</a>
      <div class="card-separator"></div>
    </div>
  </li>

  <li>
    <div class="card card-blue  col-md-12">
      <p class="card-question">#6</p>
      <div class="card-separator"></div>
      <p style="text-align:justify;">#6
      </p>
      <a href="https://en.wikipedia.org/wiki/List_of_the_verified_oldest_people">View Source</a>
      <div class="card-separator"></div>
    </div>
  </li>


</ul>
</div>
  
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

5. By Wisnu ST

Made by Wisnu ST. Bootstrap Responsive Card with thumbnail. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);

html,
body {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  height: 100%;
  width: 100%; 
  background: #FFF;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
 
.wrapper {
  display: table;
  height: 100%;
  width: 100%;
}

.container-fostrap {
  display: table-cell;
  padding: 1em;
  text-align: center;
  vertical-align: middle;
}
.fostrap-logo {
  width: 100px;
  margin-bottom:15px
}
h1.heading {
  color: #fff;
  font-size: 1.15em;
  font-weight: 900;
  margin: 0 0 0.5em;
  color: #505050;
}
@media (min-width: 450px) {
  h1.heading {
    font-size: 3.55em;
  }
}
@media (min-width: 760px) {
  h1.heading {
    font-size: 3.05em;
  }
}
@media (min-width: 900px) {
  h1.heading {
    font-size: 3.25em;
    margin: 0 0 0.3em;
  }
} 
.card {
  display: block; 
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 
    transition: box-shadow .25s; 
}
.card:hover {
  box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.img-card {
  width: 100%;
  height:200px;
  border-top-left-radius:2px;
  border-top-right-radius:2px;
  display:block;
    overflow: hidden;
}
.img-card img{
  width: 100%;
  height: 200px;
  object-fit:cover; 
  transition: all .25s ease;
} 
.card-content {
  padding:15px;
  text-align:left;
}
.card-title {
  margin-top:0px;
  font-weight: 700;
  font-size: 1.65em;
}
.card-title a {
  color: #000;
  text-decoration: none !important;
}
.card-read-more {
  border-top: 1px solid #D4D4D4;
}
.card-read-more a {
  text-decoration: none !important;
  padding:10px;
  font-weight:600;
  text-transform: uppercase
}
</style>
</head>
<body>
  <section class="wrapper">
    <div class="container-fostrap">
        <div>
            <img src="https://4.bp.blogspot.com/-7OHSFmygfYQ/VtLSb1xe8kI/AAAAAAAABjI/FxaRp5xW2JQ/s320/logo.png" class="fostrap-logo"/>
            <h1 class="heading">
                Bootstrap Card Responsive 
            </h1>
        </div>
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-4">
                        <div class="card">
                            <a class="img-card" href="http://www.fostrap.com/2016/03/bootstrap-3-carousel-fade-effect.html">
                            <img src="https://1.bp.blogspot.com/-Bii3S69BdjQ/VtdOpIi4aoI/AAAAAAAABlk/F0z23Yr59f0/s640/cover.jpg" />
                          </a>
                            <div class="card-content">
                                <h4 class="card-title">
                                    <a href="http://www.fostrap.com/2016/03/bootstrap-3-carousel-fade-effect.html"> Bootstrap 3 Carousel FadeIn Out Effect
                                  </a>
                                </h4>
                                <p class="">
                                    Tutorial to make a carousel bootstrap by adding more wonderful effect fadein ...
                                </p>
                            </div>
                            <div class="card-read-more">
                                <a href="http://www.fostrap.com/2016/03/bootstrap-3-carousel-fade-effect.html" class="btn btn-link btn-block">
                                    Read More
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-4">
                        <div class="card">
                            <a class="img-card" href="http://www.fostrap.com/2016/03/5-button-hover-animation-effects-css3.html">
                            <img src="https://3.bp.blogspot.com/-bAsTyYC8U80/VtLZRKN6OlI/AAAAAAAABjY/kAoljiMALkQ/s400/material%2Bnavbar.jpg" />
                          </a>
                            <div class="card-content">
                                <h4 class="card-title">
                                    <a href="http://www.fostrap.com/2016/02/awesome-material-design-responsive-menu.html"> Material Design Responsive Menu
                                  </a>
                                </h4>
                                <p class="">
                                    Material Design is a visual programming language made by Google. Language programming...
                                </p>
                            </div>
                            <div class="card-read-more">
                                <a href="https://codepen.io/wisnust10/full/ZWERZK/" class="btn btn-link btn-block">
                                    Read More
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-4">
                        <div class="card">
                            <a class="img-card" href="http://www.fostrap.com/2016/03/5-button-hover-animation-effects-css3.html">
                            <img src="https://4.bp.blogspot.com/-TDIJ17DfCco/Vtneyc-0t4I/AAAAAAAABmk/aa4AjmCvRck/s1600/cover.jpg" />
                          </a>
                            <div class="card-content">
                                <h4 class="card-title">
                                    <a href="http://www.fostrap.com/2016/03/5-button-hover-animation-effects-css3.html">5  Button Hover Animation Effects
                                  </a>
                                </h4>
                                <p class="">
                                    tutorials button hover animation, although very much a hover button is very beauti...
                                </p>
                            </div>
                            <div class="card-read-more">
                                <a href="http://www.fostrap.com/2016/03/5-button-hover-animation-effects-css3.html" class="btn btn-link btn-block">
                                    Read More
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
  
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

6. By Furkan Poyraz

Made by Furkan Poyraz. Bootstrap Card with Text Transition. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
  
<style>
html, body {
  height: 100%;
}

body {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-transition {
  width: 400px;
  height: 266px;
  overflow: hidden;
}
.card-transition .card-img {
  width: 100%;
  height: auto;
}
.card-transition .card-front, .card-transition .card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.card-transition .card-img-overlay {
  background-color: rgba(0, 0, 0, 0.2);
}
.card-transition .card-icon {
  fill: currentColor;
  margin-left: auto;
  margin-right: auto;
}
.card-transition .card-back {
  transform: scale(1.3);
  opacity: 0;
  visibility: hidden;
}
.card-transition .card-img, .card-transition .card-img-overlay, .card-transition .card-front, .card-transition .card-back {
  transition: visibility 0.3s ease-in-out, transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  will-change: transform, opacity;
}
.card-transition:hover .card-img {
  transform: scale(1.1);
}
.card-transition:hover .card-img-overlay {
  background-color: rgba(0, 0, 0, 0.4);
}
.card-transition:hover .card-front {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.3);
}
.card-transition:hover .card-back {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
</style>
</head>
<body>
  <div class="card card-transition shadow border-0 text-white">
  <img src="https://images.unsplash.com/photo-1542769779-110e8eee44b9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0b4350793d682201462ce2f7a62fcd46&auto=format&fit=crop&w=800&q=60" alt="Trees" width="298" height="199" class="card-img">
  <div class="card-img-overlay">
    <div class="card-front">
      <svg id="users" class="card-icon" viewBox="0 0 32 32" width="60" height="60"><g class="nc-icon-wrapper"><path data-color="color-2" d="M19,9.5c0,2.485,2.015,5.5,4.5,5.5S28,11.985,28,9.5S25.985,5,23.5,5S19,7.015,19,9.5z"></path> <path d="M16,9.5c0,3.038-2.462,6.5-5.5,6.5S5,12.538,5,9.5S7.462,4,10.5,4S16,6.462,16,9.5z"></path> <path data-color="color-2" d="M29.499,18.128C28.208,17.613,26.12,17,23.5,17c-1.931,0-3.57,0.334-4.817,0.715 C21.577,19.036,23,21.579,23,24.185V25h9v-3.162C32,20.189,31.019,18.733,29.499,18.128z"></path> <path d="M18.205,19.695C16.618,18.922,13.993,18,10.5,18s-6.118,0.922-7.705,1.695C1.097,20.522,0,22.285,0,24.185 V28h21v-3.815C21,22.285,19.903,20.522,18.205,19.695z"></path></g></svg>
      <h5 class="card-title">Card title</h5>
    </div>
    <div class="card-back">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti doloribus minima eos, esse dicta id.
    </div>
  </div>
</div>
</body>
</html>

7. By averdev

Made by averdev. Bootstrap Card with hover overlay gradient. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> </title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
  
<style>
body{background:#ccc;}

.newsCard {
  position: relative;
  width: 100%;
  height: 400px;
  background-color: #fff;
  color:#fff;
  overflow: hidden;
  border-radius: 6px;
}

figure img {
display: block;
object-fit: cover !important;
object-position: center center !important; height: 100%;
width: 100%;
}

.overlay{
  background: rgb(40,26,54);
  background: -moz-linear-gradient(0deg, rgba(40,26,54,1) 0%, rgba(89,59,116,0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(40,26,54,1) 0%, rgba(89,59,116,0) 100%);
  background: linear-gradient(0deg, rgba(40,26,54,1) 0%, rgba(89,59,116,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#281a36",endColorstr="#593b74",GradientType=1);s
  display: block;
  position: absolute;
  height: 200px;
  width: 100%;
  bottom: 0;
  z-index: 3;
}

.newsCaption {
  position: absolute;
  top: auto;
  bottom: 31px;
  left: 0;
  width: 100%;
  height: 35%;
  z-index: 10;
  padding: 15px;
  -webkit-transform: translateY(80%);
  transform: translateY(80%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition:  -webkit-transform 0.4s;
  transition:  -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s,  -webkit-transform 0.4s;
}
.newsCaption i{font-size: 24px;}

.newsCaption-title {
  margin-top: 0px;
}
.newsCaption-content {
  margin: 0;
}

.newsCaption-link {
  color: #fff;
  text-decoration: underline;
  opacity: .8;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.15s;
          transition-duration: 0.15s;
  -webkit-transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
          transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
}
.news-Slide-up:hover .overlay{ background: rgb(64,10,111);
background: -moz-linear-gradient(0deg, rgba(64,10,111,1) 0%, rgba(89,59,116,0) 100%);
background: -webkit-linear-gradient(0deg, rgba(64,10,111,1) 0%, rgba(89,59,116,0) 100%);
background: linear-gradient(0deg, rgba(64,10,111,1) 0%, rgba(89,59,116,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#400a6f",endColorstr="#593b74",GradientType=1);
}

.news-Slide-up:hover .newsCaption {

  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-transition:  -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s,
  transition: transform 0.4s, -webkit-transform 0.4s;
}
</style>
</head>
<body>
  <div class="container mt-5">
<div class="row">
  <!-- CARD 1-->
<div class="col-lg-4">
<a href='#' class="url-box" >
  <figure class='newsCard news-Slide-up '>
    <img src="https://source.unsplash.com/1600x900/?background"/>
    <div class='newsCaption px-4'>
    <div class="d-flex align-items-center justify-content-between cnt-title">
     <h5 class='newsCaption-title text-white m-0'>Title Examples</h5> <i class="fas fa-arrow-alt-circle-right "></i>
     </div>
     <div class='newsCaption-content d-flex '>
     <p class="col-10 py-3 px-0">Lorem ipsum description examples. </p>
    </div>
    </div>
    <span class="overlay"></span>
  </figure>
</a>
</div> <!-- end card1-->
  
  
    <!-- CARD 2-->
<div class="col-lg-4">
<a href='#' class="url-box" >
  <figure class='newsCard news-Slide-up '>
    <img src="https://source.unsplash.com/1600x900/?background"/>
    <div class='newsCaption px-4'>
    <div class="d-flex align-items-center justify-content-between cnt-title">
     <h5 class='newsCaption-title text-white m-0'>Title Examples</h5> <i class="fas fa-arrow-alt-circle-right "></i>
     </div>
     <div class='newsCaption-content d-flex '>
     <p class="col-10 py-3 px-0">Lorem ipsum description examples. </p>
    </div>
    </div>
    <span class="overlay"></span>
  </figure>
</a>
</div> <!-- end card2-->
  
    <!-- CARD 3-->
<div class="col-lg-4">
<a href='#' class="url-box" >
  <figure class='newsCard news-Slide-up '>
    <img src="https://source.unsplash.com/1600x900/?background"/>
    <div class='newsCaption px-4'>
    <div class="d-flex align-items-center justify-content-between cnt-title">
     <h5 class='newsCaption-title text-white m-0'>Title Examples</h5> <i class="fas fa-arrow-alt-circle-right "></i>
     </div>
     <div class='newsCaption-content d-flex '>
     <p class="col-10 py-3 px-0">Lorem ipsum description examples. </p>
    </div>
    </div>
    <span class="overlay"></span>
  </figure>
</a>
</div> <!-- end card3-->
  
</div> 
</div>
</body>
</html>

8. By Ben

Made by Ben. Responsive Card UI. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'>
  
<style>
body {
  padding: 50px;
  line-height: 150%;
}

/* Add Styles for your cards here */

/* ------ */

/* Animation SCSS */
.come-in {
  -webkit-transform: translateY(150px);
      -ms-transform: translateY(150px);
          transform: translateY(150px);
  -webkit-animation: come-in 0.8s ease forwards;
          animation: come-in 0.8s ease forwards;
}

.come-in:nth-child(odd) {
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
}

.already-visible {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-animation: none;
          animation: none;
}

@-webkit-keyframes come-in {
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes come-in {
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
</style>
</head>
<body>
  <div id="container-fluid">
  <div class="row come-in">
    <h1 class="text-center">Responsive Bootstrap Card-UI with Animation</h1>
    
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
      <div class="panel panel-primary">
        <div class="panel-heading">Jules Verne - Around the World in 80 Days</div>
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in placerat libero. Morbi eleifend, nisl non iaculis consequat, nulla neque finibus erat, quis fermentum sem ligula quis justo. Nulla maximus lorem tortor, eu finibus mauris vulputate vitae. Nulla tristique viverra semper. Vivamus id diam nulla. Nullam ante erat, pharetra eget diam ac, vestibulum euismod lorem. Morbi sed tempus augue. Curabitur eget quam quis arcu sollicitudin pretium faucibus nec nibh. In volutpat maximus nibh eu convallis. Quisque a commodo metus, ut tempus enim.</p>
        </div>
      </div>
      <div class="panel panel-default fadeInDown">
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in placerat libero. Morbi eleifend, nisl non iaculis consequat, nulla neque finibus erat, quis fermentum sem ligula quis justo. Nulla maximus lorem tortor, eu finibus mauris vulputate vitae. Nulla tristique viverra semper. Vivamus id diam nulla. Nullam ante erat, pharetra eget diam ac, vestibulum euismod lorem. Morbi sed tempus augue. Curabitur eget quam quis arcu sollicitudin pretium faucibus nec nibh. In volutpat maximus nibh eu convallis. Quisque a commodo metus, ut tempus enim.</p>
        </div>
      </div>
    </div>
    
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
      <div class="panel panel-info">
        <div class="panel-heading">H.G. Wells - The War of the Worlds</div>
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in placerat libero. Morbi eleifend, nisl non iaculis consequat, nulla neque finibus erat, quis fermentum sem ligula quis justo. Nulla maximus lorem tortor, eu finibus mauris vulputate vitae. Nulla tristique viverra semper. Vivamus id diam nulla. Nullam ante erat, pharetra eget diam ac, vestibulum euismod lorem. Morbi sed tempus augue. Curabitur eget quam quis arcu sollicitudin pretium faucibus nec nibh. In volutpat maximus nibh eu convallis. Quisque a commodo metus, ut tempus enim.</p>
        </div>
      </div>      
      
      <div class="panel panel-default">
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in placerat libero. Morbi eleifend, nisl non iaculis consequat, nulla neque finibus erat, quis fermentum sem ligula quis justo. Nulla maximus lorem tortor, eu finibus mauris vulputate vitae. Nulla tristique viverra semper. Vivamus id diam nulla. Nullam ante erat, pharetra eget diam ac, vestibulum euismod lorem. Morbi sed tempus augue. Curabitur eget quam quis arcu sollicitudin pretium faucibus nec nibh. In volutpat maximus nibh eu convallis. Quisque a commodo metus, ut tempus enim.</p>
        </div>
      </div>      
    </div>
    
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
      <div class="panel panel-warning">
        <div class="panel-heading">L. Frank Baum - The Wizard of Oz</div>
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in placerat libero. Morbi eleifend, nisl non iaculis consequat, nulla neque finibus erat, quis fermentum sem ligula quis justo. Nulla maximus lorem tortor, eu finibus mauris vulputate vitae. Nulla tristique viverra semper. Vivamus id diam nulla. Nullam ante erat, pharetra eget diam ac, vestibulum euismod lorem. Morbi sed tempus augue. Curabitur eget quam quis arcu sollicitudin pretium faucibus nec nibh. In volutpat maximus nibh eu convallis. Quisque a commodo metus, ut tempus enim.</p>
        </div>
      </div> 
      
      <div class="panel panel-default">
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in placerat libero. Morbi eleifend, nisl non iaculis consequat, nulla neque finibus erat, quis fermentum sem ligula quis justo. Nulla maximus lorem tortor, eu finibus mauris vulputate vitae. Nulla tristique viverra semper. Vivamus id diam nulla. Nullam ante erat, pharetra eget diam ac, vestibulum euismod lorem. Morbi sed tempus augue. Curabitur eget quam quis arcu sollicitudin pretium faucibus nec nibh. In volutpat maximus nibh eu convallis. Quisque a commodo metus, ut tempus enim.</p>
        </div>
      </div> 
    </div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
(function ($) {

  /**
   * Copyright 2012, Digital Fusion
   * Licensed under the MIT license.
   * http://teamdf.com/jquery-plugins/license/
   *
   * @author Sam Sehnert
   * @desc A small plugin that checks whether elements are within
   *     the user visible viewport of a web browser.
   *     only accounts for vertical position, not horizontal.
   */

  $.fn.visible = function (partial) {

    var $t = $(this),
    $w = $(window),
    viewTop = $w.scrollTop(),
    viewBottom = viewTop + $w.height(),
    _top = $t.offset().top,
    _bottom = _top + $t.height(),
    compareTop = partial === true ? _bottom : _top,
    compareBottom = partial === true ? _top : _bottom;

    return compareBottom <= viewBottom && compareTop >= viewTop;

  };

})(jQuery);

var win = $(window);

var allMods = $(".panel");

allMods.each(function (i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("already-visible");
  }
});

win.scroll(function (event) {

  allMods.each(function (i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in");
    }
  });

});
    </script>
</body>
</html>

9. By Aminul Haque Chowdhruy

Made by Aminul Haque Chowdhruy. Image Hover with Bootstrap Card. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
  
<style>
/*-------------------------------------------
01. Our Program
---------------------------------------------*/
#our-program {
    padding: 70px 0;
    background: #fff;
}

#our-program .top {
    margin-bottom: 50px;
}

.card {
    overflow: hidden;
    border-radius:0 0 10px 10px;
    position: relative;
    font-family: 'lato';
    background: #fff;
    text-align: center;
    -webkit-box-shadow: -4px 2px 10px 3px rgba(0,0,0,0.50);
    -moz-box-shadow: -4px 2px 10px 3px rgba(0,0,0,0.50);
    box-shadow: -4px 2px 10px 3px rgba(0,0,0,0.50);
    margin-bottom: 30px;
}

.card-img-top {
  max-height: 250px;
  overflow: hidden;
}

.card-img-top img {
  width: 100%;
  transition: .3s all;
}

.card:hover .card-img-top img {
  transform: scale(1.2);
}

.card img{
    width: 110%;
    height: 100%;
}

.card h4 {
    padding-top: 25px;
    font-weight: 700;
}

.card .card-text {
    width: 80%;
    margin: 0 auto;
    font-weight: 700;
    margin-bottom: 10px;
}

.card-footer {
    background: #029eb7;
    padding: 10px 30px;
    font-weight: 700;
    font-size: 15px;
    display: inline-block;
}
</style>
</head>
<body>
  <section id="our-program">
            <div class="container">
              
                <div class="top text-center">
                    <h1 style="color:#029eb7">OUR PROGRAMS</h1>
                    
                </div>

                <div class="row">
                      <div class="col-md-4">
                          <div class="card">
                            <div class="card-img-top">
                              <img src="https://images.unsplash.com/photo-1558981852-426c6c22a060" alt="">
                            </div>
                            <div class="card-block">
                              <h4 class="card-title">STUDY TOUR</h4>
                              <p class="card-text">There are many variations of passages of Lorem Ipsum available...There are many variations of passages of Lorem Ipsum available...</p>
                              <div class="card-footer">View Tour</div>
                            </div>
                          </div>
                      </div>
                      
                     <div class="col-md-4">
                           <div class="card">
                             <div class="card-img-top">
                              <img src="https://images.unsplash.com/photo-1573805797307-d6975847411b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt=""> 
                             </div>
                            <div class="card-block">
                              <h4 class="card-title">STUDY TOUR</h4>
                              <p class="card-text">There are many variations of passages of Lorem Ipsum available...There are many variations of passages of Lorem Ipsum available...</p>
                              <div class="card-footer">View Tour</div>
                            </div>
                          </div>
                      </div>
                      <div class="col-md-4">
                           <div class="card">
                             <div class="card-img-top">                               
                              <img src="https://images.unsplash.com/photo-1558981001-1995369a39cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
                             </div>
                            <div class="card-block">
                              <h4 class="card-title">STUDY TOUR</h4>
                              <p class="card-text">There are many variations of passages of Lorem Ipsum available...There are many variations of passages of Lorem Ipsum available...</p>
                              <div class="card-footer">View Tour</div>
                            </div>
                          </div>
                      </div>
                    </div>
                </div>
        </section>
</body>
</html>
 

10. By Jesus Rodriguez

Made by Jesus Rodriguez. Bootstrap card with flip effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
/* Card styles for rotation */
.rotate-container {
  position: relative;
}
.rotate-container .card-front, .rotate-container .card-back {
  width: 100%;
  height: 100%;
  transform: perspective(600px) rotateY(0deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: all 0.5s linear 0s;
}
.rotate-container .card-back {
  transform: perspective(1600px) rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.rotate-container .rotate-card-front {
  transform: perspective(1600px) rotateY(-180deg);
}
.rotate-container .rotate-card-back {
  transform: perspective(1600px) rotateY(0deg);
}

/* Modified card styles */
.card {
  box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5);
}
.card .card-header p {
  margin: 0;
}
.card .card-background {
  background: url("https://static.pexels.com/photos/443374/pexels-photo-443374.jpeg");
  height: 8em;
  background-position: center center;
  background-size: cover;
}
.card .avatar {
  max-width: 6em;
  max-height: 6em;
  margin-top: -4em;
  margin-bottom: 1em;
  border: 4px solid white;
  border-radius: 50%;
  background: radial-gradient(#e3e3e3, #329A7C, #109381);
}
.card .btn {
  margin-bottom: 1em;
  cursor: pointer;
}
.card .social-links li {
  margin: 0.5em;
}
.card .social-links a {
  font-size: 1.5em;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row justify-content-center">
    <div class="col sm-12 col-md-8 col-lg-5">
      <div class="rotate-container">
        <div class="card card-front text-center">
          <div class="card-header">
            <p>About You</p>
          </div>
          <div class="card-background"></div>
          <div class="card-block"><img class="avatar" src="https://userstock.io/data/wp-content/uploads/2017/09/bewakoof-com-official-245573-939x1024.jpg" alt="Avatar"/>
            <h3 class="card-title">Your Name</h3>
            <p>Your Profession</p>
            <button class="btn btn-primary btn-rotate">Read more &nbsp;       <i class="fa fa-long-arrow-right"></i></button>
          </div>
        </div>
        <div class="card card-back text-center">
          <div class="card-header">
            <p>More About You</p>
          </div>
          <div class="card-block">
            <h4>Interests</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a faucibus diam. Praesent consectetur, nisl ut semper imperdiet, tortor metus ultrices lorem, non luctus massa risus at urna.</p>
            <h4>Connect:</h4>
            <ul class="social-links list-unstyled d-flex justify-content-center">
              <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#" target="_blank"><i class="fa fa-snapchat"></i></a></li>
              <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
            </ul>
            <button class="btn btn-primary btn-rotate">   <i class="fa fa-long-arrow-left"> </i>&nbsp; Back </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
      <script id="rendered-js" >
$(function () {
  // For card rotation
  $('.btn-rotate').click(function () {
    $('.card-front').toggleClass(' rotate-card-front');
    $('.card-back').toggleClass(' rotate-card-back');
  });
});
    </script>
</body>
</html>

11. By Nikki Peel

Made by Nikki Peel. Card Grids. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'>
  
<style>
:root {
  --gradient: linear-gradient(to left top, #DD2476 10%, #FF512F 90%) !important;
}

body {
  background: #111 !important;
}

.card {
  background: #222;
  border: 1px solid #dd2476;
  color: rgba(250, 250, 250, 0.8);
  margin-bottom: 2rem;
}

.btn {
  border: 5px solid;
  border-image-slice: 1;
  background: var(--gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  border-image-source:  var(--gradient) !important; 
  text-decoration: none;
  transition: all .4s ease;
}

.btn:hover, .btn:focus {
      background: var(--gradient) !important;
  -webkit-background-clip: none !important;
  -webkit-text-fill-color: #fff !important;
  border: 5px solid #fff !important; 
  box-shadow: #222 1px 0 10px;
  text-decoration: underline;
}
</style>
</head>
<body>
  <div class="container mx-auto mt-4">
  <div class="row">
    <div class="col-md-4">
      <div class="card" style="width: 18rem;">
  <img src="https://i.imgur.com/ZTkt4I5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
       <a href="#" class="btn mr-2"><i class="fas fa-link"></i> Visit Site</a>
    <a href="#" class="btn "><i class="fab fa-github"></i> Github</a>
  </div>
  </div>
    </div>    
       <div class="col-md-4">
<div class="card" style="width: 18rem;">
  <img src="https://i.imgur.com/ZTkt4I5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn  mr-2"><i class="fas fa-link"></i> Visit Site</a>
    <a href="#" class="btn"><i class="fab fa-github"></i> Github</a>
  </div>
  </div>
    </div>    
          <div class="col-md-4">
<div class="card" style="width: 18rem;">
  <img src="https://i.imgur.com/ZTkt4I5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn mr-2"><i class="fas fa-link"></i> Visit Site</a>
    <a href="#" class="btn "><i class="fab fa-github"></i> Github</a>
  </div>
  </div>
  </div>
    
    <div class="col-md-4">
      <div class="card" style="width: 18rem;">
  <img src="https://i.imgur.com/ZTkt4I5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
       <a href="#" class="btn mr-2"><i class="fas fa-link"></i> Visit Site</a>
    <a href="#" class="btn"><i class="fab fa-github"></i> Github</a>
  </div>
  </div>
    </div>    
       <div class="col-md-4">
<div class="card" style="width: 18rem;">
  <img src="https://i.imgur.com/ZTkt4I5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn mr-2"><i class="fas fa-link"></i> Visit Site</a>
    <a href="#" class="btn"><i class="fab fa-github"></i> Github</a>
  </div>
  </div>
    </div>    
          <div class="col-md-4">
<div class="card" style="width: 18rem;">
  <img src="https://i.imgur.com/ZTkt4I5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn mr-2"><i class="fas fa-link"></i> Visit Site</a>
    <a href="#" class="btn"><i class="fab fa-github"></i> Github</a>
  </div>
  </div>
  </div>
    
    <div class="col-md-4">
      <div class="card" style="width: 18rem;">
  <img src="https://i.imgur.com/ZTkt4I5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
       <a href="#" class="btn mr-2"><i class="fas fa-link"></i> Visit Site</a>
    <a href="#" class="btn"><i class="fab fa-github"></i> Github</a>
  </div>
  </div>
    </div>    
       <div class="col-md-4">
<div class="card" style="width: 18rem;">
  <img src="https://i.imgur.com/ZTkt4I5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn mr-2"><i class="fas fa-link"></i> Visit Site</a>
    <a href="#" class="btn"><i class="fab fa-github"></i> Github</a>
  </div>
  </div>
    </div>    
          <div class="col-md-4">
<div class="card" style="width: 18rem;">
  <img src="https://i.imgur.com/ZTkt4I5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary mr-2"><i class="fas fa-link"></i> Visit Site</a>
    <a href="#" class="btn btn-primary"><i class="fab fa-github"></i> Github</a>
  </div>
  </div>
  </div>
    
    <div class="col-md-4">
      <div class="card" style="width: 18rem;">
  <img src="https://i.imgur.com/ZTkt4I5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
       <a href="#" class="btn mr-2"><i class="fas fa-link"></i> Visit Site</a>
    <a href="#" class="btn"><i class="fab fa-github"></i> Github</a>
  </div>
  </div>
    </div>    
       <div class="col-md-4">
<div class="card" style="width: 18rem;">
  <img src="https://i.imgur.com/ZTkt4I5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn mr-2"><i class="fas fa-link"></i> Visit Site</a>
    <a href="#" class="btn"><i class="fab fa-github"></i> Github</a>
  </div>
  </div>
    </div>    
          <div class="col-md-4">
<div class="card" style="width: 18rem;">
  <img src="https://i.imgur.com/ZTkt4I5.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn mr-2"><i class="fas fa-link"></i> Visit Site</a>
    <a href="#" class="btn"><i class="fab fa-github"></i> Github</a>
  </div>
  </div>
  </div>
</div>
  </div>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.2/umd/popper.min.js'></script>
</body>
</html>

12. By Abhimanyu Dwivedi

Made by Abhimanyu Dwivedi. Bootstrap card with simple hover effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
/* Included color classes.. 
    .red 
	.blue 
	.yellow
	.green
	.navy
*/ 
.services{
    margin: 20px auto;
    }
figure.snip1174 {
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  background-color: #1a1a1a;
  color: #ffffff;
  text-align: left;
  margin: 10px;
  width: 100%;
  border-radius: 0px;
}
figure.snip1174 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
figure.snip1174 img {
  max-width: 100%;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  vertical-align: top;
  opacity: 0.7;
}
figure.snip1174 figcaption {
  position: absolute;
  padding: 40px 25px;
  top: 0;
  left: 0;
}
figure.snip1174 h2,
figure.snip1174 p {
  margin: 0;
  padding: 0;
}
figure.snip1174 h2 {
  margin-bottom: 10px;
  display: inline-block;
  font-weight: 100;
  font-size: 1.8em;
}
figure.snip1174 p {
  font-weight: 300;
  margin-bottom: 20px;
  line-height: 1.4em;
}
figure.snip1174 a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ffffff;
  text-decoration: none;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.8em;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  opacity: 0;
}
figure.snip1174 a:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
figure.snip1174.blue {
  background-color: #20638f;
}
figure.snip1174.yellow {
  background-color: #c87f0a;
}
figure.snip1174.green {
  background-color: #1e8449;
}
figure.snip1174.navy {
  background-color: #222f3d;
}
figure.snip1174.red {
  background-color: #962d22;
}
figure.snip1174:hover img,
figure.snip1174.hover img {
  opacity: 0;
  -webkit-transform: scale(1);
  transform: scale(1);
}
figure.snip1174:hover a,
figure.snip1174.hover a {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
</style>
</head>
<body>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="services">
<div class="col-md-4">
    <figure class="snip1174 navy col-md-4">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample33.jpg" alt="sq-sample33" />
      <figcaption>
        <h2>Heading1</h2>
        <p>
          Caption1
        </p>
        <a href="/main/page/production">Link1</a>
      </figcaption>
    </figure>
</div>
<div class="col-md-4">
    <figure class="snip1174 red col-md-4">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample33.jpg" alt="sq-sample33" />
      <figcaption>
        <h2>Heading2</h2>
        <p>
          Caption2
        </p>
        <a href="/main/page/auction">Link2</a>
      </figcaption>
    </figure>
</div>
</div>
</body>
</html>

13. By Kianoush Mahboob

Made by Kianoush Mahboob. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
  
<style>
body {
  background: #009688;
  color: rgb(190, 190, 190);
}

.card {
  box-shadow: 2px 2px 5px rgb(0, 0, 0);
  border-radius: 30px;
  background: #000000;

}

.card-body {
  background: #000000;
}

.card-footer {
  background: #171717;
  border-bottom-left-radius: 30px !important;
  border-bottom-right-radius: 30px !important;
}

.card-header {
  border-radius: 30px !important;
  border: 0px;
  background: #000000;
}

.card-header img {
  border-radius: 30px;

}
</style>
</head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-4"></div>
        <div class="card text-center col-md-4 mt-3 col-sm-10 p-0">
          <div class="card-header p-0">
            <img
              src="https://i.pinimg.com/originals/fc/68/f8/fc68f86873c9c661e84ad442cf8fb6cf.gif"
              alt="" class="w-100">
          </div>
          <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in
              to additional content.</p>

          </div>
          <div class="card-footer text-muted">
            2 days ago
          </div>
        </div>

      </div>
    </div>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery-3.3.1.min.js"></script>
</body>
</html>

14. By Kreig Durham

Made by Kreig Durham. Bootstrap 4 Card Skewed Style. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
  
<style>
.card {
  margin: 0 auto;
}

.card {
  border-radius: 0;
  transform: skewX(-10deg);
  overflow: hidden;
}
.card .card-img-top {
  background: url("https://placeimg.com/400/200/animals") center/cover;
  margin-left: -20px;
  transform: skewX(10deg);
  height: 200px;
  width: 400px;
}
</style>
</head>
<body>
  <div class="jumbotron">
  <div class="card" style="width: 20rem;">
    <div class="card-img-top"></div>
    <div class="card-body">
      <h4 class="card-title">Skewed Bootstrap Card</h4>
      <p class="card-text">Use these styles to create a slick, anguluar-looking Bootstrap 4 card element that doesn't distort your content.</p>
      <a href="https://kreigd.com" class="btn btn-primary">Shameless self-promotion</a>
    </div>
  </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>

</body>
</html>
 

15. By Nicola Pressi

Made by Nicola Pressi. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'>
  
<style>
body {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body::after, body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
body::before {
  z-index: -2;
  background: url("https://source.unsplash.com/category/nature/800x400");
  background-size: cover;
}
body::after {
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.15);
}

.card {
  position: relative;
  max-width: 24rem;
  border: none;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.5);
}
.card .card-block {
  position: relative;
  padding: 2rem;
}
.card .card-text {
  margin-bottom: 0;
}
.card .btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  padding: 0;
  width: 3rem;
  height: 3rem;
  transition: all 0.25s ease-in-out;
}
.card .btn .icon {
  width: 50%;
  height: 50%;
  margin-left: -10%;
  transition: all 0.25s ease-in-out;
}
</style>
</head>
<body>
  <div class='card'>
  <div class='card-img-top'>
    <img alt='' class='img-fluid' src='https://source.unsplash.com/category/nature/800x400'>
  </div>
  <div class='card-block'>
    <h4 class='card-title'>Card title</h4>
    <p class='card-text'>Magni inventore repellat dignissimos eveniet dolore ex sit illo adipisci accusamus quos.</p>
    <a class='btn btn-primary' href='#'>
      <webicon class='icon' icon='fa:paper-plane'></webicon>
    </a>
  </div>
</div>
  
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js'></script>
<script src='//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js'></script>
</body>
</html>