"Bootstrap 4 - Food Menu Tab"
Bootstrap 4.1.1 Snippet by Mohan.P

<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="//code.jquery.com/jquery-1.11.1.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="menu_list mt-60 mb-60"> <div class="container"> <div class="row"> <div class="col-xl-12"> <div class="section-title text-center mb-60"> <p>Famous for good food</p> <h4>our menu</h4> </div> </div> </div> <div class="row"> <ul class="nav nav-tabs menu_tab" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link" id="breakfast-tab" data-toggle="tab" href="#breakfast" role="tab" aria-selected="false">Breakfast</a> </li> <li class="nav-item"> <a class="nav-link" id="lunch-tab" data-toggle="tab" href="#lunch" role="tab" aria-selected="false">Lunch</a> </li> <li class="nav-item"> <a class="nav-link active show" id="dinner-tab" data-toggle="tab" href="#dinner" role="tab" aria-selected="true">Dinner</a> </li> </ul> </div> <div class="row"> <div class="tab-content col-xl-12" id="myTabContent"> <div class="tab-pane fade" id="breakfast" role="tabpanel" aria-labelledby="breakfast-tab"> <div class="row"> <div class="col-md-6"> <div class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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 class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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 class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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-6"> <div class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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 class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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 class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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> <div class="tab-pane fade" id="lunch" role="tabpanel" aria-labelledby="lunch-tab"> <div class="row"> <div class="col-md-6"> <div class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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 class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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 class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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-6"> <div class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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 class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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 class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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> </div> <div class="tab-pane fade active show" id="dinner" role="tabpanel" aria-labelledby="dinner-tab"> <div class="row"> <div class="col-md-6"> <div class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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 class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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 class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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-6"> <div class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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 class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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 class="single_menu_list"> <img src="http://infinityflamesoft.com/html/restarunt-preview/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> </div> </div> </div> <div class="row"> <div class="col-xl-12 text-center"> <div class="box_btn"> <a href="#">view more</a> </div> </div> </div> </div> </section> </body>
body { font-family: 'Montserrat', sans-serif; color: #333; line-height: 1.6; } .mb-60 { margin-bottom: 60px; } .section-title p { font-size: 24px; font-family: Oleo Script; margin-bottom: 0px; } .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; } #myTabContent { margin-top: 50px; } .menu_tab { width: auto; margin: 0 auto; } .nav-tabs .nav-item { margin-bottom: -1px; } .nav-item a { color: #333; } .menu_tab .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: white; background-color: #FF5E18; border-color: #FF5E18; } .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


Questions / Comments: