OsteriaX - One page Restaurant Template

It is Bootstrap based one page template, designed for food bakery, cafe,  coffee shop and restaurant website.

Live Demo Download

Need hosting? We recommend Bluehost

One page Restaurant Template

OsteriaX is a completely modern designed, visually interactive, feature-dense, incredibly powerful, original and creative, engaging and tech-savvy responsive one page restaurant template. It is accessible from any devices like desktop, laptop, mobile, and tablet. It has included many more features like full-screen slider where you can showcase your latest story and news, animated counter, parallax section, font awesome icons and much more. It should also be mentioned that it has ajax working contact page. This template is highly suitable for any kind of restaurant business website. It has a fullscreen beautiful & professional looking slider. Not only that also a tabbed content area is also available where you could display your food products. A appointment booking form also implemented so that visitor or customers can book tables or contact for further order.

Key Features

  • Modern and Elegant design
  • HTML5 and CSS3 Validated
  • Slick Slider
  • Single page template
  • Built on Bootstrap 3.x
  • 479 icons ( based on Font Awesome )
  • About us
  • Animated counter
  • 10 Pre-designed color schemes
  • Filterable Menu
  • Reservation form
  • Filterable gallery section with lightbox
  • Our chef
  • Clients testimonial
  • Working Ajax PHP contact form
  • Google Map
  • IE9+ and all modern browser supported
  • Social media icons
  • Footer

Sources and Credits

All images are just used for preview purpose only and NOT included in the download folder.

Disclosure: This page may contain affiliate links. We receive compensation if you buy using those links.

21 replies added

  1. andrew April 1, 2018 Reply

    There’s no Reservation form on file, only contact form mailer.php can be sent to my email. Or is there a another way do Reservation form?
    Can be sent to my email ?
    Also the slider banner picture is also covered by darker color?
    Can you help me to solve problem?
    Thank you
    Regard Andrew

    • Altaf Hossain April 2, 2018 Reply

      Hello Andrew,
      The reservation form is not functional as like contact form, that’s why you didn’t get any mail from reservation form. Please follow the below link to make a reservation functional.
      Link: https://github.com/matt-west/ajax-contact-form

      And if you want to change or remove slider banner covered color? Please follow the below instruction,
      Open the style.css file using any code editor (i.e notepad), go to the line no 314 or find out these class (.mu-top-slider .mu-top-slider-single:after), where you can change or remove BG color.


  2. Azeem April 4, 2018 Reply

    Hi there,

    First of all thank you for such a wonderful site.

    2 quick questions:
    I would like to center the logo and then the navigation panel below that as centered too. How can we do that?
    Secondly, as per above question about Reservation Form, how do I do that? Should I go on Github and download the files and add them to the root folder?

    Please help!

    Thanks in advance.

    • Altaf Hossain April 4, 2018 Reply

      Hi Azeem,
      1. Yes, you can center the logo and navigation panel but you have to know basic knowledge about the CSS and responsive design to edit this template perfectly.
      2. Go to the Github link and read the document then you understand how to activate the reservation form.


      • Azeem April 6, 2018 Reply

        Hi Altaf,

        Thank you for a prompt reply. I do have some knowledge. Unfrotunately I tried doing it but it’s not working. Here is the code;

        .navbar-header {
        text-align: center;

        Am I missing something here?

        Please help!


        • Azeem April 6, 2018 Reply

          Can you please share the code for logo and navigation panel as center and in two lines. Thanks.

  3. Altaf Hossain April 7, 2018 Reply

    Add the below codes in style.css file

    .mu-main-navbar .navbar-header {
    text-align: center;
    width: 100%;
    .mu-main-navbar .navbar-header .navbar-brand {
    float: none;
    .mu-main-navbar .mu-main-nav {
    text-align: center;
    width: 100%;
    .mu-main-navbar .mu-main-nav > li {
    display: inline-block;
    float: none;

    @media (max-width: 767px) {
    .mu-main-navbar .mu-main-nav > li {
    display: block;

    • Azeem April 7, 2018 Reply

      Thank you Altaf. It worked. Now am working to get the ajax based form work for reservation. Don’t know anything but will try. Thanks.

  4. Azeem April 8, 2018 Reply

    Hi Altaf,

    A quick questions: I have downloaded the ajax form and wondering, if I should put the entire folder as is in “markups-osteriax” folder or just copy the files? I have changed the email address to mine in mailer.php. Second, should I replace the form html with the already reservation-form in the index. hmtl file? I am working on localhost so I can’t test it either. Please help!!!

  5. Aran April 29, 2018 Reply

    Hello, how to add search box in header ?


  6. Azeem May 4, 2018 Reply

    Hi Altaf,

    If I want to add a page (gallery page), how do I add that? So it is still part of one-page theme. Thanks.

  7. Azeem May 10, 2018 Reply

    Hi Altaf,

    Please look into my request:

    If I want to add a page (gallery page), how do I add that? So it is still part of one-page theme. Thanks.

  8. Guillermo July 22, 2018 Reply

    I’m wondering if I can show all mu-slider content; all 3 paragraphs and button, on all screen sizes and also fill the whole device’s screen.
    Btw. Awesome template!!!


  9. Sandra August 7, 2018 Reply

    Hi, I am trying to change the number of chefs that are shown in the slider; at the moment it is 4- I’d like to be able to change it to 6 . I thought that changing
    the width in .mu-chef-nav .slick-list li might help but it’s not making any difference-please help.
    Thanks, Sandra

    • Altaf Hossain August 8, 2018 Reply

      Hi Sandra,
      To change 4 chefs to 6 chefs in the slider, please follow the bellow steps:
      1. Open template folder that you have downloaded
      2. Then open the custom.js file under assets/js folder
      3. Go to the 69 line of custom.js file and change slidesToShow: 4 to 6 , finally save the file.

      Now, It works as like you wanted.

  10. Clare August 14, 2018 Reply

    Hi there
    I would like to add more photos to the gallery – 15 instead of 9 – is that possible, and if so how? I have tried copying the single gallery image sections which works up to a point but am running into problems.

    Many thanks.

    • Altaf Hossain August 14, 2018 Reply

      Hi Clare,
      Yes, you can add more photos to the gallery – 15 instead of 9, Just follow the bellow steps:

      1. Open index.html page from template folder that you have downloaded
      2. Then go to the 920 line of index.html page and copy the .mu-single-gallery div block where you will see commented start with “start single gallery image” and end with “End single gallery image”, Paste as you want to add photo to the gallery.
      3. Finally, change the source of every individual photo and save the index.html file.

      Your job is done! thanks.

  11. Clare August 14, 2018 Reply

    Hi Altaf

    Thank you for your answer. I have tried this but I must have made an error somewhere. When you click to enlarge the first image in the gallery it expands, then click the right arrow to scroll through the photos, ok until it gets to image 10 and then image 9 remains, although the counter carries on through to 15, but image only changes when you get back to image 1 again. Any ideas? I might just start again with the template code I think, might be easier.

    Thanks, Clare

  12. Clare August 15, 2018 Reply

    Hi Altaf
    All sorted, thank you for your help. Great template 🙂

  13. Clare August 15, 2018 Reply

    Hi Altaf
    One final question, is it possible to slow down the Testimonials scrolling?
    Thanks, Clare

    • Clare August 20, 2018 Reply

      Hi Altaf
      I think I have found the answer – by changing line 112 on the custom.js file?

Leave your comment