"Add banner Design html"
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> <!-- Call TOLL-FREE --> <div class="container-fluid"> <div class="row"> <div class="container"> <div class="row"> <div id="" class="FlightInline"> <div class="ss-content-col"> <div class="ss-icon"> <!--<img alt="" src="images/logo.png">-->Logo </div> <div class="ss-content"> <div class="inlineAdHeadline">Guaranteed lowest fare!........</div> <div class="inlineAdDescription"> <span>Talk to Expert Book Now!</span> </div> <div class="ss-inlineAdFooter"> <span> Ad-banner | </span> <span class="ss-sponsoredTag">Sponsored</span> </div> </div> </div> <div class="price-col ss-right-alignment"> <div class="ss-inlineAdSelect"> <div class="bookitselect"> <a class="ss-ui-button" href="javascript:void(0)" target="" rel="nofollow"> <div class="view-deal"> View Deal </div> </a> </div> </div> </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>
.FlightInline {width: 730px;margin: 0 auto; cursor: pointer; display: flex;background-color: #fff;margin-top:15px;border-radius: 2px;margin-bottom: 15px; border: 1px solid #d5d6d8;} .FlightInline .ss-content-col {flex: 1;display: flex;padding: 0;border-right: 1px solid #d5d6d8;} .FlightInline .ss-content-col .ss-icon {height: auto; padding: 10px; display: flex; flex-direction: column; justify-content: center;} .FlightInline .ss-content-col .ss-icon img {height: auto;} .FlightInline .ss-content-col .ss-content {padding: 10px; flex: 1;display: flex;flex-direction: column;justify-content: space-between;} .inlineAdHeadline { font-weight: 500; font-size: 15px;color: #17232c; max-width: 565px; margin-top: -1px; text-overflow: ellipsis; line-height: 21px; padding-bottom: 6px;} .inlineAdDescription {padding-bottom: 0; min-height: initial; font-size: 12px;} .ss-inlineAdFooter {width: 100%; float: left; display: block; margin-top: 5px; color: #186aa5; font-size: 12px;} .ss-sponsoredTag {color: #92aabb; font-family: "Gibson SemiBold",Tahoma,Helvetica,sans-serif; font-weight: 600;} .price-col.ss-right-alignment {align-items: flex-end;justify-content: flex-end; text-align: center;padding-bottom: 12px;width: 175px;padding: 12px;display: flex;} .ss-inlineAdSelect {width: 100%;} .ss-ui-button {color: #000;display: flex!important; flex-direction: column;justify-content: center; width: 100%; min-height: 34px; margin: auto; border-radius: 2px;background-image: linear-gradient(135deg,#ffd600 0%,#ffd600 100%);font-family: "Gibson SemiBold",Tahoma,Helvetica,sans-serif; font-weight: 600; box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.2);} .ss-ui-button:hover, .ui-button:focus {color:#333;text-decoration:none;} @media (min-width: 320px) and (max-width: 480px) { } @media (min-width: 481px) and (max-width: 767px) { }

Related: See More

Paper Kit 2
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: