"Menu"
Bootstrap 4.0.0 Snippet by errorteam10

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="menu-body"> <!-- Section starts: Appetizers --> <div class="menu-section"> <h2 class="menu-section-title">MAIN COURSE</h2> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Delicious Dish </div> <div class="menu-item-price"> $50 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Delicious Dish </div> <div class="menu-item-price"> $50 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Delicious Dish </div> <div class="menu-item-price"> $30 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Delicious Dish </div> <div class="menu-item-price"> $30 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> </div> <!-- Section ends: Appetizers --> <!-- Section starts: Drinks --> <div class="menu-section"> <h2 class="menu-section-title">DRINKS</h2> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Tasty Drink </div> <div class="menu-item-price"> $30 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Tasty Drink </div> <div class="menu-item-price"> $30 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Tasty Drink </div> <div class="menu-item-price"> $30 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Tasty Drink </div> <div class="menu-item-price"> $30 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> </div> <!-- Section ends: Drinks --> </div> <div class="menu-body"> <!-- Section starts: Appetizers --> <div class="menu-section"> <h2 class="menu-section-title">MAIN COURSE</h2> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Delicious Dish </div> <div class="menu-item-price"> $50 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Delicious Dish </div> <div class="menu-item-price"> $50 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Delicious Dish </div> <div class="menu-item-price"> $30 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Delicious Dish </div> <div class="menu-item-price"> $30 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> </div> <!-- Section ends: Appetizers --> <!-- Section starts: Drinks --> <div class="menu-section"> <h2 class="menu-section-title">DRINKS</h2> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Tasty Drink </div> <div class="menu-item-price"> $30 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Tasty Drink </div> <div class="menu-item-price"> $30 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Tasty Drink </div> <div class="menu-item-price"> $30 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> <!-- Item starts --> <div class="menu-item"> <div class="menu-item-name"> Tasty Drink </div> <div class="menu-item-price"> $30 </div> <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. </div> </div> <!-- Item ends --> </div> <!-- Section ends: Drinks --> </div> </div>
CSS .menu-body { max-width: 680px; margin: 0 auto; display: block; color: rgb(92, 92, 92); } .menu-section { margin-bottom: 80px; } .menu-section-title { font-family: georgia; font-size: 50px; display: block; font-weight:normal; margin: 20px 0; text-align: Center; } .menu-item { margin: 35px 0; font-size: 18px; } .menu-item-name{ font-family: helvetica; font-weight: bold; border-bottom: 2px dotted rgb(213, 213, 213); } .menu-item-description { font-style: italic; font-size: .9em; line-height: 1.5em; } .menu-item-price{ float: right; font-weight: bold; font-family: arial; margin-top: -22px; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 .menu-body { max-width: 680px; margin: 0 auto; display: block; color: rgb(92, 92, 92); } .menu-section { margin-bottom: 80px; } .menu-section-title { font-family: georgia; font-size: 50px; display: block; font-weight:normal; margin: 20px 0; text-align: Center; } .menu-item { margin: 35px 0; font-size: 18px; } .menu-item-name{ font-family: helvetica; font-weight: bold; border-bottom: 2px dotted rgb(213, 213, 213); } .menu-item-description { font-style: italic; font-size: .9em; line-height: 1.5em; } .menu-item-price{ float: right; font-weight: bold; font-family: arial; margin-top: -22px; }

Related: See More


Questions / Comments: