"Card"
Bootstrap 3.3.0 Snippet by imsachin

Post to Facebook Tweet this

<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 ----------> <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 http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <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> <div class="container"> <div class="our packagestar"> <div class=""> <div class="row"> <div class="col-xs-12"> <h2 class="headings mrT20">Card </h2> <p class="text-center">Para </p> </div> </div> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="recom"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" alt="Image" title="Hi" class="img-responsive width100"> <div class="recomBox"> <h4> 1 </h4> <div class=""> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" class="img-responsive" alt="Hi" /> <p class="cityS">Hotel</p> <p class="cityp">Hotel</p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" class="img-responsive" alt="Hi" /> <p class="cityS">Hotel</p> <p class="cityp">Hotel</p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> </div> </div> <h5 class="price"> 000<sub>PP</sub> </h5> <p><span><a href="" class="btn btn-primary">View Details</a></span><span><a href="" class="btn btn-primary">Enquiry Now</a></span></p> <p><a href="tel:" class="mob"><i class="fa fa-phone"></i>0000000000 </a></p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="recom"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" alt="Image" title="Hi" class="img-responsive width100"> <div class="recomBox"> <h4> 2 </h4> <div class=""> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" class="img-responsive" alt="Hi" /> <p class="cityS">Hotel</p> <p class="cityp">Hotel</p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" class="img-responsive" alt="Hi" /> <p class="cityS">Hotel</p> <p class="cityp">Hotel</p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> </div> </div> <h5 class="price"> 000<sub>PP</sub> </h5> <p><span><a href="" class="btn btn-primary">View Details</a></span><span><a href="" class="btn btn-primary">Enquiry Now</a></span></p> <p><a href="tel:" class="mob"><i class="fa fa-phone"></i>0000000000 </a></p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="recom"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" alt="Image" title="Hi" class="img-responsive width100"> <div class="recomBox"> <h4> 3 </h4> <div class=""> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" class="img-responsive" alt="Hi" /> <p class="cityS">Hotel</p> <p class="cityp">Hotel</p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" class="img-responsive" alt="Hi" /> <p class="cityS">Hotel</p> <p class="cityp">Hotel</p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> </div> </div> <h5 class="price"> 000<sub>PP</sub> </h5> <p><span><a href="" class="btn btn-primary">View Details</a></span><span><a href="" class="btn btn-primary">Enquiry Now</a></span></p> <p><a href="tel:" class="mob"><i class="fa fa-phone"></i>0000000000 </a></p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="recom"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" alt="Image" title="Hi" class="img-responsive width100"> <div class="recomBox"> <h4> 4 </h4> <div class=""> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" class="img-responsive" alt="Hi" /> <p class="cityS">Hotel</p> <p class="cityp">Hotel</p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" class="img-responsive" alt="Hi" /> <p class="cityS">Hotel</p> <p class="cityp">Hotel</p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> </div> </div> <h5 class="price">000<sub>PP</sub> </h5> <p><span><a href="" class="btn btn-primary">View Details</a></span><span><a href="" class="btn btn-primary">Enquiry Now</a></span></p> <p><a href="tel:" class="mob"><i class="fa fa-phone"></i>0000000000</a></p> </div> </div> </div> </div> </div> </div> </div> </body> </html>
/* -- Our Recommendations -- */ .our {margin-bottom: 10px;} .our .headings {text-align: center;color:#000000;margin-bottom: 20px;font-weight: 600;} .our .carousel-control.left, .ourRecommendations .carousel-control.right {background-image:none; width: 50px; height: 50px; top: 40%;color: #009ade; opacity: 1;} .our .carousel-control.left {left: -5%;} .our .carousel-control.right {right: -5%;} .our .recom {text-align: center;box-shadow:0px 0px 5px #abe5ff; margin-bottom: 20px;position:relative;border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;} .our .recom:hover {box-shadow:2px 2px 30px #d6d6d6;} .our .recom .recomBox {padding: 0 0px 5px 0px;} .our .recom .recomBox h4 {font-size: 14px;background: #009ade;color: #fff;width: 100%;padding: 10px 0px;margin: 0;text-transform:capitalize;} .our .recom .recomBox h5 {font-size: 24px;color:#72166c;font-weight:600;} .our .recom .recomBox .cityS {font-size: 12px;margin-bottom: 5px;font-weight: 600; color: #72166c;} .our .recom .recomBox .cityp{font-size:12px;text-transform:capitalize;color: #000; font-weight: 600; height: 35px; overflow-y: auto;} .our .recom .recomBox .rateStar {color:#f7a001;font-size:16px;} .our .recom .recomBox .descR {text-align: justify;} .our .recom .recomBox .btn {margin-right:2px;font-size:12px;padding: 8px 20px;font-weight: 600;background: #cef0ff; border: 1px solid #97dfff;color: #000;margin: 5px 8px; border-radius: 20px;} .our .recom .recomBox .btn:hover {background-color: #72166c;color:#fff;border: 1px solid #72166c;}

Related: See More

Paper Kit 2
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: