<div class="container"> <div class="row my-5 justify-content-center"> <div class="col-lg-6"> <h2>With Scrollbar</h2> <!--Main card--> <div class="card custom-height scrollspy-example"> <!--Card Body --> <div class="card-body"> <h5 class="card-title">October</h5> <!--Card--> <div class="row"> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1 "> <img class="img-fluid" src="https://i.ibb.co/RjRC3TV/img02.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Dessert</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: user12</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs fa-xs fa-xs"></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs"></i> <i class="far fa-star fa-xs"></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/M9cGsCb/img03.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Taco</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: guest312</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/Wc2K6W5/img04.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Cookies</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: agnieszka19</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> <i class="far fa-star fa-xs"></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/zhLRGc8/img05.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Dinner</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: L33T</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs"></i> <i class="far fa-star fa-xs"></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/cTRw8Q6/img06.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Meat</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: anonymous12</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs"></i> <i class="far fa-star fa-xs"></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/XDS1xkk/img01.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Burger</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: John99</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> <i class="far fa-star fa-xs "></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/q1nmdV8/img07.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Ice Scream</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: lucy22</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> <i class="far fa-star fa-xs "></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/LdfDNZc/img08.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Pancakes</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: destroyer00</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> <i class="far fa-star fa-xs "></i> </div> </div> </div> </div> </div> </div> <!--Card--> </div> <!--Card Body --> </div> <!--Main card--> </div> </div> <!-- Without scrollbar --> <div class="row justify-content-center"> <div class="col-lg-6"> <h2>Without Scrollbar</h2> <!--Main card--> <div class="card"> <!--Card Body --> <div class="card-body"> <h5 class="card-title">October</h5> <!--Card--> <div class="row"> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1 "> <img class="img-fluid" src="https://i.ibb.co/RjRC3TV/img02.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Dessert</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: user12</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs fa-xs fa-xs"></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs"></i> <i class="far fa-star fa-xs"></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/M9cGsCb/img03.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Taco</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: guest312</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/Wc2K6W5/img04.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Cookies</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: agnieszka19</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> <i class="far fa-star fa-xs"></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/zhLRGc8/img05.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Dinner</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: L33T</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs"></i> <i class="far fa-star fa-xs"></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/cTRw8Q6/img06.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Meat</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: anonymous12</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs"></i> <i class="far fa-star fa-xs"></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/XDS1xkk/img01.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Burger</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: John99</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> <i class="far fa-star fa-xs "></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/q1nmdV8/img07.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Ice Scream</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: lucy22</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> <i class="far fa-star fa-xs "></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/LdfDNZc/img08.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Pancakes</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: destroyer00</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> <i class="far fa-star fa-xs "></i> </div> </div> </div> </div> </div> </div> <!--Card--> </div> <!--Card Body --> </div> <!--Main card--> </div> </div> <!-- Grid row --> <div class="row my-5 justify-content-center"> <!-- Grid column --> <div class="col-md-6 mb-4"> <h2>With SmoothScroll</h2> <div class="card custom-height example-1 scrollbar-ripe-malinka"> <!--Card Body --> <div class="card-body "> <h5 class="card-title">October</h5> <!--Card--> <div class="row"> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1 "> <img class="img-fluid" src="https://i.ibb.co/RjRC3TV/img02.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Dessert</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: user12</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs fa-xs fa-xs"></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs"></i> <i class="far fa-star fa-xs"></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/M9cGsCb/img03.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Taco</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: guest312</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/Wc2K6W5/img04.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Cookies</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: agnieszka19</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> <i class="far fa-star fa-xs"></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/zhLRGc8/img05.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Dinner</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: L33T</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs"></i> <i class="far fa-star fa-xs"></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/cTRw8Q6/img06.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Meat</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: anonymous12</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs"></i> <i class="far fa-star fa-xs"></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/XDS1xkk/img01.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Burger</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: John99</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> <i class="far fa-star fa-xs "></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/q1nmdV8/img07.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Ice Scream</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: lucy22</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> <i class="far fa-star fa-xs "></i> </div> </div> </div> </div> </div> <div class="col-md-6 my-1"> <div class="view overlay z-depth-1"> <img class="img-fluid" src="https://i.ibb.co/LdfDNZc/img08.jpg" alt=""> <a> <div class="mask waves-effect waves-light rgba-white-slight"></div> </a> <div class="description rgba-stylish-light text-white"> <div class="title ml-2"> <h5 class="m-0">Pancakes</h5> </div> <div class="subtitle ml-2"> <h6 class="m-0">by: destroyer00</h6> </div> <div class="more yellow-text "> <div class="stars text-center mr-2 justify-content-center"> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star fa-xs "></i> <i class="fas fa-star-half-alt fa-xs "></i> <i class="far fa-star fa-xs "></i> </div> </div> </div> </div> </div> </div> <!--Card--> </div> <!--Card Body --> </div> <!-- Exaple 1 --> </div> <!-- Grid column --> </div> </div>