"Deals section with ul li and Bootstrap column"
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 ----------> <!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> <!--Deals section use of ul li--> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="flight-deal"> <ul> <li><img src="images/ca.gif" alt="ca" class="img-responsive hidden-xs" title="Air Canada"></li> <li class="deal"> <div class="o-place"> <span class="c-code"><strong>LAX</strong></span> <span class="c-name">Los Angeles</span> <span class="c-date">17 Feb,2020</span> </div> </li> <li class="arrow"><img src="images/double-arrow.png" alt="arrow" class="img-responsive" title="Air Canada"></li> <li class="deal"> <div class="o-place"> <span class="c-code"><strong>LAX</strong></span> <span class="c-name">Los Angeles</span> <span class="c-date">17 Feb,2020</span> </div> </li> <li> <div class="price"> <span>$510.00<sup>*</sup></span> </div> </li> </ul> </div> </div> <div class="col-md-6"> </div> </div> </div> <!--Deals-Section with bootstrap column--> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12 col-sm-12"> <div class="Flight-dd"> <div class="col-md-2 col-sm-2 hidden-xs"> <img src="images/ca.gif" alt="ca" class="img-responsive hidden-xs" title="Air Canada"> </div> <div class="col-md-7 col-xs-8 col-sm-8 pad0 text-center"> <div class="col-md-5 col-xs-5 pad0"> <div class="o-place"> <span class="c-code"><strong>LAX</strong></span> <span class="c-name">Los Angeles</span> <span class="c-date">17 Feb,2020</span> </div> </div> <div class="col-md-2 col-xs-2 pad0"> <img src="images/double-arrow.png" alt="arrow" class="img-responsive" title="Air Canada"> </div> <div class="col-md-5 col-xs-5 pad0"> <div class="o-place"> <span class="c-code"><strong>LAX</strong></span> <span class="c-name">Los Angeles</span> <span class="c-date">17 Feb,2020</span> </div> </div> </div> <div class="col-md-3 col-xs-4 col-sm-2"> <div class="price1"> <span>$510.00<sup>*</sup></span> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="custom.js"></script> </body> </html>
/*style with ul li deals*/ .flight-deal{padding:15px 15px;background:#fff;margin-bottom:30px;box-shadow:0px 0px 5px #e4e4e4;} .flight-deal ul li{display:inline-block;list-style:none;vertical-align:middle;text-align:center;} .flight-deal ul{margin:0px;padding:0px;} .deal{width:30%;} .c-code{font-size: 16px;font-weight: bold;display: block;line-height: 18px;color: #000;} .c-name{display: block; color: #5c5c5c; font-size: 14px; font-weight: 400; line-height: 18px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} .c-date{color:#a0a0a0;} .arrow{padding-right:5px;} .price{color: #143ca1;font-size: 20px;font-weight: 700;padding-left:20px;} /*syle with column with bootstrap*/ .Flight-dd{background:#fff;margin-bottom:30px;padding:15px 15px;box-shadow:0px 0px 5px #e4e4e4;overflow:hidden;} .price1{padding-right:10px;color: #143ca1; font-size: 20px; font-weight: 700;} .Flight-dd img{margin-top: 12px;} .Flight-dd .price1{margin-top:12px;} @media (min-width: 1024px) and (max-width: 1200px) {.deal {width: 25%;} } @media (min-width: 320px) and (max-width: 480px) { .flight-deal{padding:10px 5px;background:#fff;margin-bottom:15px;} .c-code{font-size: 14px;} .c-name{font-size:12px;} .c-date{font-size:12px;} .deal{width:25%;} .price{padding-left:10px;} }

Related: See More

Paper Dashboard
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Services section using bootstrap 4

Questions / Comments: