"card stack"
Bootstrap 4.1.1 Snippet by imsachin

Post to Facebook Tweet this

<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/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="//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/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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,400i,500,600,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <!--what's new with stack--> <div class="container whatnew-section"> <div class="row "> <div class="col-sm-12"> <h3>Sachin</h3> </div> </div> <div class="section-bind"> <div class="section-new"> <div class=""> <div class="row"> <div class="col-sm-6 my-auto"> <div class="whatsnew-content"> <h5>Sachin</h5> <h4>Singh</h4> <button class="btn btn-secondary">Enroll now</button> </div> </div> <div class="col-sm-6"> <img src="images/whatsnew.jpg" alt="image" class="w-100" /> </div> </div> </div> </div> <div class="section-new"> <div class=""> <div class="row"> <div class="col-sm-6 my-auto"> <div class="whatsnew-content"> <h5>Sachin</h5> <h4>Singh</h4> <button class="btn btn-secondary">Enroll now</button> </div> </div> <div class="col-sm-6"> <img src="images/whatsnew.jpg" alt="image" class="w-100" /> </div> </div> </div> </div> <div class="section-new"> <div class=""> <div class="row"> <div class="col-sm-6 my-auto"> <div class="whatsnew-content"> <h5>Sachin</h5> <h4>Singh</h4> <button class="btn btn-secondary">Enroll now</button> </div> </div> <div class="col-sm-6"> <img src="images/whatsnew.jpg" alt="image" class="w-100" /> </div> </div> </div> </div> </div> </div> <!--what's new with stack end--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js " integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM " crossorigin="anonymous "></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="custom.js"></script> </body> </html>
.whatnew-section {position: sticky;} .whatsnew-content { padding-left: 30px;} .whatnew-section h3 { color: #ffeab4; font-size: 180px; margin-bottom: -35px; } .whatsnew-content h5 { font-size: 76px; color: #feb707; letter-spacing: 2px; margin-bottom: 30px; } .whatsnew-content h4 { color: #262626; font-size: 96px; font-family: 'gilroy'; margin-bottom: 80px; } .whatsnew-content .btn-secondary { background: #f97c20; border: #f97c20; padding: 8px 30px; font-size: 14px; margin-bottom: 30px; } .whatnew-section .section-new { box-shadow: 0px 0px 5px #b0b0b0; border-radius: 20px; padding: 0px; border: none; top: 30px; position: sticky; background-color: white; color: #333; padding: 0px; margin-bottom: 20px; } .section-new img { border-radius: 20px 20px 20px 20px; height: 100%; object-fit: cover; } @for $i from 1 through 8 { .section-new:nth-child(#{$i}n) { top: $i * 20px; } }

Related: See More

BLK• Design System
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: