Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Restaurant menu with images"
Bootstrap 3.3.0 Snippet by
Harut
3.3.0
jQuery
menu
images
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
25.5K
 
31 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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-fluid"> <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="0"> <div class="controls"> <ul class="nav"> <li data-target="#custom_carousel" data-slide-to="0" class="active"><a href="#"><img src="https://bufiles.blob.core.windows.net/co3617/menu_icons/breakfast.png"><small>ՆԱԽՈՒՏԵՍՏՆԵՐ</small></a></li> <li data-target="#custom_carousel" data-slide-to="1"><a href="#"><img src="https://bufiles.blob.core.windows.net/co3617/menu_icons/salads.png"><small>ԱՂՑԱՆՆԵՐ</small></a></li> <li data-target="#custom_carousel" data-slide-to="2"><a href="#"><img src="https://bufiles.blob.core.windows.net/co3617/menu_icons/soups.png"><small>ԱՊՈՒՐՆԵՐ</small></a></li> <li data-target="#custom_carousel" data-slide-to="3"><a href="#"><img src="https://bufiles.blob.core.windows.net/co3617/menu_icons/pizza.png"><small>ՊԻՑՑԱ</small></a></li> <li data-target="#custom_carousel" data-slide-to="4"><a href="#"><img src="https://bufiles.blob.core.windows.net/co3617/menu_icons/lunch.png"><small>ԱՌԱՋԻՆ </small></a></li> <li data-target="#custom_carousel" data-slide-to="5"><a href="#"><img src="https://bufiles.blob.core.windows.net/co3617/menu_icons/pasta.png"><small>ՊԱՍՏԱ</small></a></li> <li data-target="#custom_carousel" data-slide-to="6"><a href="#"><img src="https://bufiles.blob.core.windows.net/co3617/menu_icons/maincourses.png"><small>ԵՐԿՐՈՐԴ</small></a></li> </ul> </div> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Իտալական երշիկ և խոզապուխտ</h2> <p>5.500 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Իտալական պանրի տեսականի</h2> <p>6.000 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Տապակած նախուտեստներ</h2> <p>3.400 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Բրուսկետա</h2> <p>1.800 AMD</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Կապրեզե </h2> <p>3.400 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Աղցան Կեսար /Հազար, հավի կրծքամիս, թանձրուկ</h2> <p>3.300 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Աղցան Օլիվա /կոտեմ, չորացված լոլիկ, պանիր, ձիթապտուղ</h2> <p>3.000 AMD</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Բանջարեղենային ապուր</h2> <p>2.000 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Օրվա ապուր</h2> <p>1.800 AMD</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Մարգերիտա</h2> <p>2.000 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Կոատրո ֆորմաջի</h2> <p>2.500 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Բանջարեղենային պիցցա</h2> <p>2.700 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Խոզապուխտով և սնկով պիցցա</h2> <p>2.600 AMD</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Սպագետտի ալլա Կարբոնարա</h2> <p>2.800 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Պաստա ալլա Նորմա /պաստա սմբուկով և լոլիկով/ </h2> <p>2.700 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Պեստոյով պաստա /բազիլիկ թանձրուկով/</h2> <p>2.900 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Կարտոֆիլի գնդիկներ լոլիկի թանձրուկով</h2> <p>2.500 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Րիզոտտո շաֆրանով</h2> <p>3.500 AMD</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Լազանիա Բոլոնիեզե</h2> <p>4.000 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Ռավիոլի պանրով և սպանախով</h2> <p>2.700 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Րավիոլի լցոնած իշխանով` կարագի և սամիթի թանձրուկով</h2> <p>3.200 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Պաստա Բոլոնիեզե թանձրուկով</h2> <p>3.200 AMD</p> </div> </div> </div> </div> <div class="item" style="padding-bottom: 500px;"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Սմբուկ եփված ջեռոցում լոլիկով և պարմիզան պանրով</h2> <p>3.000 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Կրեսպելլե բանջարեղենով</h2> <p>3.500 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Օսոբուկո /Տավարի սրունք եփված գինու մեջ/</h2> <p>5.800 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Տապակած տավարի ֆիլե պաքսիմատի մեջ</h2> <p>4.000 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Խոզի չալաղաջ եփված մուգ գարեջրում</h2> <p>4.800 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Գառան սրունք համեմված ռոզմարինով</h2> <p>7.500 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Իշխանի ֆիլե, լոլիկով, ձիթապտղով և կապարով</h2> <p>5.500 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Տավարի ֆիլե հռոմեական ձևով</h2> <p>4.000 AMD</p> </div> </div> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x100" class="img-responsive"></div> <div class="col-md-9"> <h2>Հավի կրծքամիս կիտրոնի և կապարի թանձրուկով</h2> <p>3.500 AMD</p> </div> </div> </div> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> </div> <!-- End Carousel --> </div>
#custom_carousel .controls a small { font-size: 1em !important; } #menu { font-family: serif; } .carousel-inner { overflow: visible; } #custom_carousel .item { height: auto; color:#000; background-color:#f1f1f1; padding: 10px 0 ; overflow: visible; } #custom_carousel .controls{ overflow-x: visible; overflow-y: visible; padding:0; margin:0; white-space: nowrap; text-align: center; position: relative; background:#ddd } #custom_carousel .controls li { display: table-cell; width: 1%; max-width:90px } #custom_carousel .controls li.active { background-color:#eee; border-top:2px solid #ac1114; } #custom_carousel .controls a small { overflow:hidden; display:block; font-size:10px; margin-top:5px; font-weight:bold }
$(document).ready(function(ev){ $('#custom_carousel').on('slide.bs.carousel', function (evt) { $('#custom_carousel .controls li.active').removeClass('active'); $('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active'); }) });
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76