Bootstrap Snippet Bootstrap 4.3 Cards with corner ribbon using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Include the above in your HEAD tag -->
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><!-- Include the above in your HEAD tag -->
</head>
<body>
<br>
<div class="container">
  <h4 class="text-center">Bootstrap 4.3 Cards</h4>
  <h5 class="text-center small">Bootstrap responsive cards with card-image, card-header, card-body, card-listed tags and card-footer without any additional CSS or JS. Just pure Bootstrap :)</h5>
</div><br>
<div class="container"><br><br>
<!-- ::::: Begin cards ::::: -->
<div class="container">
  <div class="card-deck">
    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
      <div class="card h-100 border-primary overflow">
        <h4 class='corner corner-red'>Top</h4>
        <div class='card-header bg-primary'>
          <img class='card-img-top rounded' src="https://placeimg.com/500/500/any">
        </div>
        <div class='card-body'>
          <h4 class='card-title'><a href='$path'>First Card</a></h4>
            <ul class='list-unstyled'>
              <li>
                <span class='badge badge-primary'>Tag</span>
                <span class='badge badge-success'>Tag</span>
                <span class='badge badge-danger'>Tag</span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* General */
.overflow {
  overflow: hidden; 
}
.corner:before { right:100%; }
.corner:after { left:100%; }
/* RED - Color */
.corner-red {
  height: 23px;
  margin: 5px;
  padding: 0;
  font-size: 18px;
  color: white;
  padding: 0em ;
  position: absolute;
  top: -3px;
  right: -5px;
  transform: translateX(30%) translateY(0%) rotate(45deg);
  transform-origin: top left;
  background: red;
}
.corner-red:before, .corner-red:after {
  content: '';
  position: absolute;
  top: 0;
  margin: 0 -1px;
  width: 200%;
  height: 100%;
  background: red;
}
/* BLUE - Color */
.corner-blue {
  height: 23px;
  margin: 5px;
  padding: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap 4.3 Cards with corner ribbon"
Bootstrap 4.1.1 Snippet by BelarusAndreas

Related: See More

Questions / Comments:

"Bootstrap 4.3 Cards with corner ribbon" Bootstrap 4.1.1 Snippet by BelarusAndreas

Related: See More

Questions / Comments:

"Bootstrap 4.3 Cards with corner ribbon"
Bootstrap 4.1.1 Snippet by BelarusAndreas