"Special Menu"
Bootstrap 4.1.1 Snippet by wpdeveloper28

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="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet"> <body> <section class="special_menu mt-60 mb-60"> <div class="container"> <div class="row"> <div class="col-xl-12"> <div class="section-title text-center"> <p>Famous for good food</p> <h4>special menu</h4> </div> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="single_special"> <img src="https://nahian91.github.io/khawadawa-html/assets/img/sp1.jpg" alt=""> <ul class="set_menu"> <li>Fried Rice x 1<span>Price: $9.00</span></li> <li>Checken x 2<span>Price: $15.00</span></li> <li>Salad x 1<span>Price: $7.00</span></li> <li>1 250ml x 1<span>Price: $3.00</span></li> <li class="total">Total:<span>$24.00</span></li> </ul> </div> </div> <div class="col-lg-4 col-md-6"> <div class="single_special"> <img src="https://nahian91.github.io/khawadawa-html/assets/img/sp2.jpg" alt=""> <ul class="set_menu"> <li>Fried Rice x 1<span>Price: $9.00</span></li> <li>Checken x 2<span>Price: $15.00</span></li> <li>Salad x 1<span>Price: $7.00</span></li> <li>1 250ml x 1<span>Price: $3.00</span></li> <li class="total">Total:<span>$24.00</span></li> </ul> </div> </div> <div class="col-lg-4 col-md-6"> <div class="single_special"> <img src="https://nahian91.github.io/khawadawa-html/assets/img/sp3.jpg" alt=""> <ul class="set_menu"> <li>Fried Rice x 1<span>Price: $9.00</span></li> <li>Checken x 2<span>Price: $15.00</span></li> <li>Salad x 1<span>Price: $7.00</span></li> <li>1 250ml x 1<span>Price: $3.00</span></li> <li class="total">Total:<span>$24.00</span></li> </ul> </div> </div> </div> </div> </section> </body>
.mb-60 { margin-bottom: 60px; } .mt-60 { margin-top: 60px; } ul { margin: 0px; padding: 0px; list-style:none } .special_menu .section-title { margin-bottom: 70px; } .section-title h4 { font-size: 40px; text-transform: capitalize; color: #FF5E18; position: relative; display: inline-block; padding-bottom: 25px; } .section-title p { font-size: 24px; font-family: Oleo Script; margin-bottom: 0px; } .section-title h4:before, .section-title h4:after { position: absolute; content: ""; background-color: #FF5E18; } .section-title h4:before { width: 80px; height: 1.5px; bottom: 0; left: 50%; margin-left: -40px; } .section-title h4:after { width: 40px; height: 1.5px; bottom: -5px; left: 50%; margin-left: -20px; } .special_menu .section-title { margin-bottom: 70px; } .single_special img { width: 100%; border: 1px solid #ddd; padding: 3px; margin-bottom: 20px; } .set_menu li span { float: right; color: #FF5E18; } .set_menu li { font-size: 15px; margin-bottom: 10px; } .total { border-top: 1px dotted #333; margin-top: 12px; padding-top: 5px; } .single_menu_list { position: relative; padding-left: 190px; margin-bottom: 110px; } .single_menu_list img { max-width: 30%; position: absolute; left: 0px; top: 0; border: 1px solid #ddd; padding: 3px; border-radius: 50%; transition: .4s } .single_menu_list:hover img { border-radius: 0; transition: .4s } .single_menu_list h4 { font-size: 20px; border-bottom: 1px dashed #333; padding-bottom: 15px; margin-bottom: 10px; } .single_menu_list h4 span { float: right; font-weight: bold; color: #FF5E18; font-style: italic; }

Related: See More

Paper Kit 2
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: