"Bootstrap 4: Menu Tab"
Bootstrap 4.1.1 Snippet by moisea

<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 ----------> <section id="our_menu" class="pt-5 pb-5"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="page_title text-center mb-4"> <h1>our menu</h1> <div class="single_line"></div> </div> </div> </div> <div class="row"> <ul class="nav nav-tabs menu_tab mb-4" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="breakfast-tab" data-toggle="tab" href="#breakfast" role="tab">Breakfast</a> </li> <li class="nav-item"> <a class="nav-link" id="lunch-tab" data-toggle="tab" href="#lunch" role="tab">Lunch</a> </li> <li class="nav-item"> <a class="nav-link" id="dinner-tab" data-toggle="tab" href="#dinner" role="tab">Dinner</a> </li> </ul> </div> <div class="row"> <div class="tab-content col-lg-12" id="myTabContent"> <div class="tab-pane fade show active" id="breakfast" role="tabpanel" aria-labelledby="breakfast-tab"> <div class="row"> <div class="col-md-6"> <div class="single_menu"> <img src="https://i.imgur.com/kbpceNv.jpg" alt="burger"> <div class="menu_content"> <h4>Chicken Burger <span>$24</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/lYKUORL.jpg" alt="black coffee"> <div class="menu_content"> <h4>Black coffee <span>$20</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/AXAHrf6.jpg" alt="fried rice"> <div class="menu_content"> <h4>Fried Rice <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/YkDi8Nb.jpg" alt="meat"> <div class="menu_content"> <h4>meat <span>$24</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"> <img src="https://i.imgur.com/TAq7lDR.jpg" alt="burger"> <div class="menu_content"> <h4>Chicken Burger <span>$24</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/lYKUORL.jpg" alt="black coffee"> <div class="menu_content"> <h4>Black coffee <span>$20</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/AXAHrf6.jpg" alt="fried rice"> <div class="menu_content"> <h4>Fried Rice <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/YkDi8Nb.jpg" alt="meat"> <div class="menu_content"> <h4>meat <span>$24</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"> <img src="https://i.imgur.com/Aowufa1.jpg" alt="pizza"> <div class="menu_content"> <h4>12" Pizza <span>$35</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/DJlmZDJ.jpg" alt="salad"> <div class="menu_content"> <h4>Salad <span>$20</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/knnQm7e.jpg" alt="green tea"> <div class="menu_content"> <h4>green tea <span>$15</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/YkDi8Nb.jpg" alt="meat"> <div class="menu_content"> <h4>meat <span>$24</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"> <img src="https://i.imgur.com/kbpceNv.jpg" alt="burger"> <div class="menu_content"> <h4>Chicken Burger <span>$24</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/lYKUORL.jpg" alt="black coffee"> <div class="menu_content"> <h4>Black coffee <span>$20</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/AXAHrf6.jpg" alt="fried rice"> <div class="menu_content"> <h4>Fried Rice <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/YkDi8Nb.jpg" alt="meat"> <div class="menu_content"> <h4>meat <span>$24</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="dinner" role="tabpanel" aria-labelledby="dinner-tab"> <div class="row"> <div class="col-md-6"> <div class="single_menu"> <img src="https://i.imgur.com/kbpceNv.jpg" alt="burger"> <div class="menu_content"> <h4>Chicken Burger <span>$24</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/lYKUORL.jpg" alt="black coffee"> <div class="menu_content"> <h4>Black coffee <span>$20</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/AXAHrf6.jpg" alt="fried rice"> <div class="menu_content"> <h4>Fried Rice <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/YkDi8Nb.jpg" alt="meat"> <div class="menu_content"> <h4>meat <span>$24</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"> <img src="https://i.imgur.com/kbpceNv.jpg" alt="burger"> <div class="menu_content"> <h4>Chicken Burger <span>$24</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/lYKUORL.jpg" alt="black coffee"> <div class="menu_content"> <h4>Black coffee <span>$20</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/AXAHrf6.jpg" alt="fried rice"> <div class="menu_content"> <h4>Fried Rice <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single_menu"> <img src="https://i.imgur.com/YkDi8Nb.jpg" alt="meat"> <div class="menu_content"> <h4>meat <span>$24</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> </div> </div> </div> </div> <a href="#" class=" menu_btn btn btn-danger">view more</a> </div> </div> </section>
.page_title { padding: 30px 0px; } .page_title h1 { color: #c0392b; font-weight: 700; line-height: 2; margin-bottom: 0; position: relative; text-transform: capitalize; } .page_title h1::before { background: #c0392b; width: 70px; height: 2px; position: absolute; content: ''; top: 90%; left: 50%; transform: translate(-50%, -50%); } .page_title h1::after { position: absolute; content: ''; background: #fbc531; width: 30px; height: 2px; top: 90%; left: 50%; transform: translate(-50%, -50%); } /*Menu starts*/ .menu_tab { margin: 0 auto; justify-content: center; } .nav-item { display: inline-block; text-align: center; } .nav-tabs .nav-link{ transition: .3s; } .nav-tabs .nav-link.active { background: #c0392b; color: #fff; font-weight: 700; border: 1px solid #c0392b; text-transform: capitalize; } .nav-link { color: #000; } .nav-tabs .nav-link:hover { background: #c0392b; color: #fff; border: 1px solid #c0392b; } .single_menu { position: relative; margin-bottom: 75px; transition: .3s; } .single_menu:hover img{ -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%); } .single_menu img { width: 33%; position: absolute; height: 140px; -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); transition: .3s; border: 1px solid #ddd; border-radius: 5px; } .menu_content { padding-left: 200px; } .menu_content h4 { font-size: 25px; font-weight: 300; border-bottom: 1px dashed #c0392b; line-height: 2; text-transform: capitalize; } .menu_content h4 span { font-size: 25px; font-weight: 800; float: right; font-style: italic; color: #c0392b; } .menu_content p { font-weight: 200; font-size: 16px; letter-spacing: 1px; } .menu_btn.btn.btn-danger { margin: 0 auto; display: block; width: 140px; } /*Menu ends*/ .menu_btn.btn.btn-danger { margin: 0 auto; display: block; width: 140px; } .btn.btn-danger { background: #c0392b; border: 1px solid #c0392b; transition: .3s; position: relative; z-index: 1; text-transform: capitalize; font-weight: 700; overflow: hidden; padding: 15px 25px; } .btn.btn-danger::before { position: absolute; content: ''; background: #e74c3c; width: 100%; height: 100%; left: -100%; top: 100%; transition: .3s; z-index: -1; } .btn.btn-danger:hover:before{ top: 0; left: 0; }

Related: See More


Questions / Comments: