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.

12 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.

Leave your comment