"Bootstrap 5 - Menu Style"
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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <!------ 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="about-area pt-60"> <div class="container"> <div class="row"> <div class="col-xl-12 mb-60"> <div class="section-title text-center"> <p>Famous for good food</p> <h4>our menu</h4> </div> </div> </div> <div class="row menu_style1"> <div class="col-md-4"> <div class="single_menu_list"> <img src="https://nahian91.github.io/khawadawa-html/assets/img/menu/menu-1.jpg" alt=""> <div class="menu_content"> <h4>Chicken Fried Salad <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> </div> <div class="col-md-4"> <div class="single_menu_list"> <img src="https://nahian91.github.io/khawadawa-html/assets/img/menu/menu-2.jpg" alt=""> <div class="menu_content"> <h4>Chicken Fried Salad <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> </div> <div class="col-md-4"> <div class="single_menu_list"> <img src="https://nahian91.github.io/khawadawa-html/assets/img/menu/menu-3.jpg" alt=""> <div class="menu_content"> <h4>Chicken Fried Salad <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> </div> <div class="col-md-4"> <div class="single_menu_list"> <img src="https://nahian91.github.io/khawadawa-html/assets/img/menu/menu-4.jpg" alt=""> <div class="menu_content"> <h4>Chicken Fried Salad <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> </div> <div class="col-md-4"> <div class="single_menu_list"> <img src="https://nahian91.github.io/khawadawa-html/assets/img/menu/menu-5.jpg" alt=""> <div class="menu_content"> <h4>Chicken Fried Salad <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> </div> <div class="col-md-4"> <div class="single_menu_list"> <img src="https://nahian91.github.io/khawadawa-html/assets/img/menu/menu-6.jpg" alt=""> <div class="menu_content"> <h4>Chicken Fried Salad <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> </div> </div> </div> </section> </body>
body { font-family: 'Montserrat', sans-serif; color: #333; line-height: 1.6; } .pt-100{ padding-top:100px; } .pb-100{ padding-top:100px; } .mb-60 { margin-bottom: 60px; } .section-title p { font-size: 24px; font-family: Oleo Script; margin-bottom: 0px; margin-top:50px; } .section-title h4 { font-size: 40px; text-transform: capitalize; color: #FF5E18; position: relative; display: inline-block; padding-bottom: 25px; } .section-title h4::before { width: 80px; height: 1.5px; bottom: 0; left: 50%; margin-left: -40px; } .section-title h4::before, .section-title h4::after { position: absolute; content: ""; background-color: #FF5E18; } .single_menu_list img { max-width: 30%; position: absolute; left: 0px; top: 0; border: 1px solid #ddd; padding: 3px; border-radius: 50%; transition: .4s; } .menu_style1 .single_menu_list img { position: static; width: 100%; display: block; margin: 0 auto; margin-bottom: 45px; } .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; } p { font-weight: 300; font-size: 14px; } .menu_style1 .single_menu_list { text-align: center; } .single_menu_list:hover img { border-radius: 0; transition: .4s; }

Related: See More

Now UI Kit PRO Angular
Tabs style 1
Hover Effect Style
Instagram Style User Online

Questions / Comments: