diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index fe3c0f36062..5cf5e7b842d 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -12,7 +12,7 @@
             <div class="item active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
                 <div class="container">
                     <div class="row content">
-                        <div class="carousel-content col-md-6 col-sm-12 mt64">
+                        <div class="carousel-content col-md-6 col-xs-12 mt64">
                                 <h2>Your Banner Title</h2>
                                 <h3>Click to customize this text</h3>
                                 <p>
@@ -35,7 +35,7 @@
     <section class="s_text_image">
         <div class="container">
             <div class="row">
-                <div class="col-md-6 mt16">
+                <div class="col-md-6 col-xs-6 mt16">
                     <h3>A Section Subtitle</h3>
                     <p>
                         Write one or two paragraphs describing your product or
@@ -46,7 +46,7 @@
                         and give it to them.
                     </p>
                 </div>
-                <div class="col-md-6 mt16">
+                <div class="col-md-6 col-xs-6 mt16">
                   <img class="img img-responsive shadow mb16" src="/website/static/src/img/text_image.png" alt="Odoo text and image block"/>
                 </div>
             </div>
@@ -58,10 +58,10 @@
     <section class="s_image_text">
         <div class="container">
             <div class="row">
-                <div class="col-md-6 mt16">
+                <div class="col-md-6 col-xs-6 mt16">
                   <img class="img img-responsive shadow mb16" src="/website/static/src/img/image_text.jpg"  alt="Odoo image and text block"/>
                 </div>
-                <div class="col-md-6 mt16">
+                <div class="col-md-6 col-xs-6 mt16">
                     <h3>A Section Subtitle</h3>
                     <p>
                         Write one or two paragraphs describing your product,
@@ -81,7 +81,7 @@
     <section class="s_text_image_floating">
         <div class="container">
             <div class="row">
-                <div class="col-md-12 mb16 mt16">
+                <div class="col-md-12 col-xs-12 mb16 mt16">
                     <div class="o_image_floating o_margin_l pull-right">
                         <div class="o_container">
                             <img class="img img-rounded img-responsive" src="/website/static/src/img/odoo.jpg"  alt="Odoo Members"/>
@@ -140,13 +140,13 @@
     <section class="s_text_block">
         <div class="container">
             <div class="row">
-                <div class="col-md-12 text-center mt16 mb32">
+                <div class="col-md-12 col-xs-12 text-center mt16 mb32">
                     <h2>
                         A Great Headline
                     </h2>
                     <h3 class="text-muted">A good subtitle</h3>
                 </div>
-                <div class="col-md-12 mb16 mt16">
+                <div class="col-md-12 col-xs-12 mb16 mt16">
                     <p>
                         A great way to catch your reader's attention is to tell a story.
                         Everything you consider writing can be told as a story.
@@ -173,7 +173,7 @@
     <section class="s_title">
         <div class="container">
             <div class="row">
-                <div class="col-md-12">
+                <div class="col-md-12 col-xs-12">
                     <h1 class="text-center">Your Website Title</h1>
                     <h3 class="text-muted text-center">And a great subtitle too</h3>
                 </div>
@@ -186,17 +186,17 @@
     <section class="s_features">
         <div class="container">
             <div class="row mt16 mb16">
-                <div class="col-md-4 text-center">
+                <div class="col-md-4 col-xs-4  text-center">
                     <span class="fa fa-suitcase fa-5x"></span>
                     <h3 class="mt8 mb0">First Feature</h3>
                     <p class="text-muted">Tell what's the value for the<br/>customer for this feature.</p>
                 </div>
-                <div class="col-md-4 text-center">
+                <div class="col-md-4 col-xs-4 text-center">
                     <span class="fa fa-lock fa-5x"></span>
                     <h3 class="mt8 mb0">Second Feature</h3>
                     <p class="text-muted">Write what the customer would like to know,<br/>not what you want to show.</p>
                 </div>
-                <div class="col-md-4 text-center">
+                <div class="col-md-4 col-xs-4 text-center">
                     <span class="fa fa-heart fa-5x"></span>
                     <h3 class="mt8 mb0">Third Feature</h3>
                     <p class="text-muted">A small explanation of this great<br/>feature, in clear words.</p>
@@ -210,13 +210,13 @@
     <section class="oe_dark s_big_picture">
         <div class="container">
             <div class="row">
-                <div class="col-md-12 text-center mt32 mb32">
+                <div class="col-md-12 col-xs-12 text-center mt32 mb32">
                     <h2>A Punchy Headline</h2>
                 </div>
-                <div class="col-md-12">
+                <div class="col-md-12 col-xs-12">
                   <img class="img img-responsive" src="/website/static/src/img/big_picture.png" style="margin: 0 auto;"  alt="Odoo CMS - a big picture"/>
                 </div>
-                <div class="col-md-6 col-md-offset-3 mb16 mt16">
+                <div class="col-md-6 col-xs-6 col-md-offset-3 col-xs-offset-3 mb16 mt16">
                     <p class="text-center">
                         <b>A Small Subtitle</b>
                     </p>
@@ -238,7 +238,7 @@
     <section class="s_three_columns">
         <div class="container">
             <div class="row">
-                <div class="col-md-4">
+                <div class="col-md-4 col-xs-4">
                     <img class="img img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg" alt="Odoo - Sample 1 for three columns"/>
                     <h4 class="mt16">Feature One</h4>
                     <p>
@@ -247,7 +247,7 @@
                         column and use the top icons to perform your action.
                     </p>
                 </div>
-                <div class="col-md-4">
+                <div class="col-md-4 col-xs-4">
                     <img class="img img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg" alt="Odoo - Sample 2 for three columns"/>
                     <h4 class="mt16">Feature Two</h4>
                     <p>
@@ -257,7 +257,7 @@
                         one as a copy.
                     </p>
                 </div>
-                <div class="col-md-4">
+                <div class="col-md-4 col-xs-4">
                     <img class="img img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg" alt="Odoo - Sample 3 for three columns"/>
                     <h4 class="mt16">Feature Three</h4>
                     <p>
@@ -345,12 +345,12 @@
     <section class="s_comparisons">
         <div class="container">
           <div class="row">
-            <div class="col-md-12 text-center mt16 mb32">
+            <div class="col-md-12 col-xs-12 text-center mt16 mb32">
                 <h2>Our Offers</h2>
             </div>
           </div>
           <div class="row">
-            <div class="col-md-4">
+            <div class="col-md-4 col-xs-4">
                 <div class="panel panel-info">
 
                   <div class="panel-heading text-center">
@@ -379,7 +379,7 @@
                   </div>
                 </div>
             </div>
-            <div class="col-md-4">
+            <div class="col-md-4 col-xs-4">
                 <div class="panel panel-primary">
 
                   <div class="panel-heading text-center">
@@ -408,7 +408,7 @@
                   </div>
                 </div>
             </div>
-            <div class="col-md-4">
+            <div class="col-md-4 col-xs-4">
                 <div class="panel panel-info">
 
                   <div class="panel-heading text-center">
@@ -447,14 +447,14 @@
     <section class="jumbotron s_button">
         <div class="container">
             <div class="row">
-                <div class="col-md-9 text-muted">
+                <div class="col-md-9 col-xs-9 text-muted">
                     <p class="mb0">
                         <strong>50,000+ companies run Odoo to grow their businesses.</strong>
                     </p><p class="mb0">
                         Join us and make your company a better place.
                     </p>
                 </div>
-                <div class="col-md-3">
+                <div class="col-md-3 col-xs-3">
                     <a href="/page/website.contactus" class="btn btn-primary btn-lg pull-right mt8">
                         <i class="fa fa-arrow-right"></i>
                         Contact Us Now
@@ -511,7 +511,7 @@
     <section class="s_references">
         <div class="container">
             <div class="row">
-                <div class="col-md-12">
+                <div class="col-md-12 col-xs-12">
                     <h1 class="text-center">
                         Our References
                     </h1>
@@ -519,7 +519,7 @@
                         More than 500 happy customers.
                     </h3>
                 </div>
-                <div class="col-md-4 col-md-offset-1 mt16 mb32">
+                <div class="col-md-4 col-xs-4 col-md-offset-1 col-xs-offset-1 mt16 mb32">
                     <blockquote>
                         <p>
                             Write a quote here from one of your customers. Quotes are a
@@ -528,7 +528,7 @@
                         <small>Author of this quote</small>
                     </blockquote>
                 </div>
-                <div class="col-md-4 col-md-offset-2 mt16 mb32">
+                <div class="col-md-4 col-xs-4 col-md-offset-2 col-xs-offset-2 mt16 mb32">
                     <blockquote>
                         <p>
                             Odoo provides essential platform for our project management.
@@ -537,19 +537,19 @@
                         <small>John Doe, CEO</small>
                     </blockquote>
                 </div>
-                <div class="col-md-2 col-md-offset-1">
+                <div class="col-md-2 col-xs-2 col-md-offset-1 col-xs-offset-1">
                   <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail" alt="OpenERP logo"/>
                 </div>
-                <div class="col-md-2">
+                <div class="col-md-2 col-xs-2">
                   <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail" alt="OpenERP logo"/>
                 </div>
-                <div class="col-md-2">
+                <div class="col-md-2 col-xs-2">
                   <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail" alt="OpenERP logo"/>
                 </div>
-                <div class="col-md-2">
+                <div class="col-md-2 col-xs-2">
                   <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail" alt="OpenERP logo"/>
                 </div>
-                <div class="col-md-2">
+                <div class="col-md-2 col-xs-2">
                   <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail" alt="OpenERP logo"/>
                 </div>
             </div>
@@ -610,43 +610,43 @@
     <section class="s_feature_grid">
         <div class="container">
             <div class="row">
-                <div class="col-md-5 text-center">
+                <div class="col-md-5 col-xs-5 text-center">
                     <div class="col-md-12 mt16 mb16">
                         <h2>List of Features</h2>
                         <h4 class="text-muted">Add a great slogan</h4>
                     </div>
-                    <div class="col-md-12">
+                    <div class="col-md-12 col-xs-12">
                         <span style="min-width: 45px" class="fa fa-3x fa-comment pull-left mb16"></span>
                         <h3 class="mt0 mb0">Change Icons</h3>
                         <p>Click on the icon to adapt it to your feature</p>
                     </div>
-                    <div class="col-md-12">
+                    <div class="col-md-12 col-xs-12">
                         <span style="min-width: 45px" class="fa fa-3x fa-columns pull-left mb16"></span>
                         <h3 class="mt0 mb0">Duplicate</h3>
                         <p>Duplicate blocks to add more features.</p>
                     </div>
-                    <div class="col-md-12">
+                    <div class="col-md-12 col-xs-12">
                         <span style="min-width: 45px" class="fa fa-3x fa-user pull-left mb16"></span>
                         <h3 class="mt0 mb0">Delete Blocks</h3>
                         <p class="text-muted">Select and delete blocks to remove some features.</p>
                     </div>
                 </div>
                 <div class="col-md-5 text-center col-md-offset-2">
-                    <div class="col-md-12 mt16 mb16">
+                    <div class="col-md-12 col-xs-12 mt16 mb16">
                         <h2>Second List</h2>
                         <h4 class="text-muted">Add a great slogan</h4>
                     </div>
-                    <div class="col-md-12">
+                    <div class="col-md-12 col-xs-12">
                         <span style="min-width: 45px" class="fa fa-3x fa-magic pull-left mb16"></span>
                         <h3 class="mt0 mb0">Great Value</h3>
                         <p>Tell features the visitor would like to know, not what you'd like to say.</p>
                     </div>
-                    <div class="col-md-12">
+                    <div class="col-md-12 col-xs-12">
                         <span style="min-width: 45px" class="fa fa-3x fa-bolt pull-left mb16"></span>
                         <h3 class="mt0 mb0">Change Background</h3>
                         <p>From the main container, you can change the background to highlight features.</p>
                     </div>
-                    <div class="col-md-12">
+                    <div class="col-md-12 col-xs-12">
                         <span style="min-width: 45px" class="fa fa-3x fa-picture-o pull-left mb16"></span>
                         <h3 class="mt0 mb0">Sample images</h3>
                         <p>All these icons are licensed under creative commons so that you can use them.</p>
@@ -872,7 +872,7 @@
             </ul>
         </li>
     </div>
-     
+
     <div data-js='colorpicker'
         data-selector="section:not(.jumbotron), :not(.o_gallery > .container) > .carousel, .parallax">
         <li class="dropdown-submenu">
@@ -886,7 +886,7 @@
     <div data-js='gallery' data-selector=".o_gallery">
         <li class="dropdown-submenu">
             <a tabindex="-2" href="#">Mode</a>
-            
+
             <ul class="dropdown-menu">
                 <li data-mode="nomode"   > <a>Float</a></li>
                 <li data-mode="masonry"  > <a>Masonry</a> </li>
@@ -907,7 +907,7 @@
         </li>
         <li class="dropdown-submenu">
             <a tabindex="-2" href="#">Columns</a>
-            
+
             <ul class="dropdown-menu">
                 <li data-columns="1"  > <a>1</a> </li>
                 <li data-columns="2"  > <a>2</a> </li>
@@ -929,7 +929,7 @@
         </li>
         <li class="dropdown-submenu">
            <a tabindex="-2" href="#">Styling</a>
-           
+
            <ul class="dropdown-menu">
                <li data-styling=""              ><a>Square</a></li>
                <li data-styling="img-rounded"   ><a>Rounded corners</a></li>
@@ -954,7 +954,7 @@
         </li>
         <li data-remove="remove"><a>Remove from gallery</a></li>
     </div>
-     
+
     <div data-js='media'
         data-selector="img, .media_iframe_video, span.fa, i.fa, .glyphicon">
         <li data-edition="edition"><a>Change...</a></li>
@@ -1067,4 +1067,4 @@
 
 
 </data>
-</openerp>
+</openerp>
\ No newline at end of file
diff --git a/addons/website_quote/__openerp__.py b/addons/website_quote/__openerp__.py
index d5afa11ce78..35c35ff5fb6 100644
--- a/addons/website_quote/__openerp__.py
+++ b/addons/website_quote/__openerp__.py
@@ -12,9 +12,11 @@ OpenERP Sale Quote Roller
     'author': 'OpenERP SA',
     'depends': ['website', 'sale', 'mail', 'web_tip'],
     'data': [
+        'quotation_report.xml',
         'views/website_quotation.xml',
         'views/website_quotation_backend.xml',
         'views/report_saleorder.xml',
+        'views/report_quotation.xml',
         'data/website_quotation_data.xml',
         'security/ir.model.access.csv',
         'data/quotation_tip_data.xml',
diff --git a/addons/website_quote/controllers/main.py b/addons/website_quote/controllers/main.py
index 6c51dd0febc..c15431b9b2b 100644
--- a/addons/website_quote/controllers/main.py
+++ b/addons/website_quote/controllers/main.py
@@ -33,7 +33,7 @@ class sale_quote(http.Controller):
         "/quote/<int:order_id>",
         "/quote/<int:order_id>/<token>"
     ], type='http', auth="public", website=True)
-    def view(self, order_id, token=None, message=False, **post):
+    def view(self, order_id, pdf=None, token=None, message=False, **post):
         # use SUPERUSER_ID allow to access/view order for public user
         # only if he knows the private token
         order = request.registry.get('sale.order').browse(request.cr, token and SUPERUSER_ID or request.uid, order_id)
@@ -50,6 +50,11 @@ class sale_quote(http.Controller):
         days = 0
         if order.validity_date:
             days = (datetime.datetime.strptime(order.validity_date, '%Y-%m-%d') - datetime.datetime.now()).days + 1
+        if pdf:
+            report_obj = request.registry['report']
+            pdf = report_obj.get_pdf(request.cr, SUPERUSER_ID, [order_id], 'website_quote.report_quote', data=None, context=request.context)
+            pdfhttpheaders = [('Content-Type', 'application/pdf'), ('Content-Length', len(pdf))]
+            return request.make_response(pdf, headers=pdfhttpheaders)
         values = {
             'quotation': order,
             'message': message and int(message) or False,
diff --git a/addons/website_quote/data/website_quotation_data.xml b/addons/website_quote/data/website_quotation_data.xml
index 40335af3dff..b4613bd5e6d 100644
--- a/addons/website_quote/data/website_quotation_data.xml
+++ b/addons/website_quote/data/website_quotation_data.xml
@@ -101,7 +101,7 @@
                 </section>
                 <section data-snippet-id="text-block">
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-md-12 col-xs-12">
                             <p>
                                 <h3 class="text-muted">Our offer is based on 3 commitments, which drive our business and our partners:</h3>
                             </p>
@@ -110,7 +110,7 @@
                 </section>
                 <section data-snippet-id="quality">
                     <div class="row mt32">
-                        <div class="col-md-4">
+                        <div class="col-md-4 col-xs-4">
                             <div class="panel panel-info">
                                 <div class="panel-heading">
                                    <center><h3 class="panel-title">Quality</h3></center>
@@ -122,7 +122,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-md-4 col-xs-4">
                             <div class="panel panel-info">
                                 <div class="panel-heading">
                                    <center><h3 class="panel-title">Service</h3></center>
@@ -134,7 +134,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-md-4 col-xs-4">
                             <div class="panel panel-info">
                                 <div class="panel-heading">
                                    <center><h3 class="panel-title">Price</h3></center>
diff --git a/addons/website_quote/data/website_quotation_demo.xml b/addons/website_quote/data/website_quotation_demo.xml
index daffe0f07e5..6f3c1354733 100644
--- a/addons/website_quote/data/website_quotation_demo.xml
+++ b/addons/website_quote/data/website_quotation_demo.xml
@@ -59,7 +59,7 @@
                 </section>
                 <section>
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-md-12 col-xs-12">
                             <p>
                                 Our partnership offer includes all you need to
                                 grow your business and deliver quality services
@@ -80,7 +80,7 @@
 
                 <section>
                     <div class="row mt32">
-                        <div class="col-md-4">
+                        <div class="col-md-4 col-xs-4">
                             <div class="panel panel-info">
                                 <div class="panel-heading">
                                    <h3 class="panel-title">A Valuable Product</h3>
@@ -97,7 +97,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-md-4 col-xs-4">
                             <div class="panel panel-info">
                                 <div class="panel-heading">
                                    <h3 class="panel-title">A Strong Demand</h3>
@@ -113,7 +113,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-md-4 col-xs-4">
                             <div class="panel panel-info">
                                 <div class="panel-heading">
                                    <h3 class="panel-title">High Margins</h3>
@@ -147,10 +147,10 @@
 
                 <section>
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-md-12 col-xs-12">
                             <h2>Get access to our experts</h2>
                         </div>
-                        <div class="col-md-7">
+                        <div class="col-md-7 col-xs-7">
                             <p>
                                 For an extra fee, partners can get access to Odoo's
                                 core developers and functional experts. This can help
@@ -159,7 +159,7 @@
                                 consultants on demand.
                             </p>
                         </div>
-                        <div class="col-md-5">
+                        <div class="col-md-5 col-xs-5">
                             <img src="/website_quote/static/src/img/partner_icon_01.png"/>
                         </div>
                     </div>
@@ -167,10 +167,10 @@
 
                 <section>
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-md-12 col-xs-12">
                             <h2>Official certified partner</h2>
                         </div>
-                        <div class="col-md-7">
+                        <div class="col-md-7 col-xs-7">
                             <p>
                                 Odoo promotes its partners through various ways:
                                 publication on our website, official communication,
@@ -180,7 +180,7 @@
                                 directory listing.
                             </p>
                         </div>
-                        <div class="col-md-5">
+                        <div class="col-md-5 col-xs-5">
                             <img src="/website_quote/static/src/img/openerp_gold_partner.png"/>
                         </div>
                     </div>
@@ -188,10 +188,10 @@
 
                 <section>
                     <div class="row">
-                        <div class="col-md-12">
+                        <div class="col-md-12 col-xs-12">
                             <h2>Access to the Lead</h2>
                         </div>
-                        <div class="col-md-7">
+                        <div class="col-md-7 col-xs-7">
                             <p>
                                 Every year, we redirect more than 100,000 customer
                                 requests to our official partners. These are prospects
@@ -201,7 +201,7 @@
                                 (nearest partner) and the grade of the partner.
                             </p>
                         </div>
-                        <div class="col-md-5">
+                        <div class="col-md-5 col-xs-5">
                             <img src="/website_quote/static/src/img/partner_icon_02.png" class="img"/>
                         </div>
                     </div>
@@ -222,10 +222,10 @@
                 <section class="mb32">
                     <h2>Test developments automatically</h2>
                     <div class="row">
-                        <div class="col-md-5">
+                        <div class="col-md-5 col-xs-5">
                             <img src="/website_quote/static/src/img/partner_sc_01.png" class="img shadow"/>
                         </div>
-                        <div class="col-md-7">
+                        <div class="col-md-7 col-xs-7">
                             <p class="mt23">
                                 Save time in your implementation project by having your
                                 developments tested automatically by our automated test
@@ -259,7 +259,7 @@
                 </section>
                 <section>
                     <div class="row">
-                        <div class="col-md-12 mb32">
+                        <div class="col-md-12 col-xs-12 mb32">
                             <p>These courses feature the same high quality course content found in our traditional classroom trainings, supplemented with modular sessions and cloud-based labs. Many of our online learning courses also include dozens of recorded webinars and live sessions by our senior instructors. At the end of the training, you can pass the Odoo Certification exam in one of the 5000+ Pearson VUE test centers worldwide.</p>
                         </div>
                         <div class="col-md-offset-1">
@@ -271,13 +271,13 @@
                                 <li>Better comfort to facilitate your learning process</li>
                             </ul>
                         </div>
-                        <div class="col-md-12">
+                        <div class="col-md-12 col-xs-12">
                             <h2>Structure of the Training</h2>
                         </div>
                         <div class="col-md-5 col-md-offset-1 mt16 mb16">
                             <img class="img img-responsive" src="/website_quote/static/src/img/online_training.png"/>
                         </div>
-                        <div class="col-md-6 mt32">
+                        <div class="col-md-6 col-xs-6 mt32">
                             <h4><strong>There are three components to the training</strong></h4>
                             <ul>
                                 <li>Videos with detailed demos</li>
@@ -304,20 +304,21 @@
                 <section id="whatsuit">
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 text-center mb8 mt0">
+                            <div class="col-md-12 col-xs-12 text-center mb8 mt0">
                                 <h2>Course Summary</h2>
                             </div>
-                            <div class="col-md-12 mt16 mb0">
+                            <div class="col-md-12 col-xs-12 mt16 mb0">
                                 <p><span style="text-align: -webkit-center; ">This course is dedicated to developers who need to grasp knowledge of the <strong>business applications development </strong>process. This course is for new developers or for IT professionals eager to learn more about technical aspects.</span></p>
                             </div>
                         </div>
                     </div>
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 text-center mt0 mb16">
+
+                            <div class="col-md-12 col-xs-12 text-center mt0 mb16">
                                 <h2>What you will learn?</h2>
                             </div>
-                            <div class="col-md-4">
+                            <div class="col-md-4 col-xs-4">
                                 <div class="panel panel-info">
                                     <div class="panel-heading text-center">
                                         <h3 style="margin: 0">Day 1</h3>
@@ -336,7 +337,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-md-4">
+                            <div class="col-md-4 col-xs-4">
                                 <div class="panel panel-info">
                                     <div class="panel-heading text-center">
                                         <h3 style="margin: 0">Day 2</h3>
@@ -357,7 +358,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-md-4">
+                            <div class="col-md-4 col-xs-4">
                                 <div class="panel panel-info">
                                     <div class="panel-heading text-center">
                                         <h3 style="margin: 0">Day 3</h3>
@@ -383,11 +384,11 @@
                     </div>
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 text-center mb16 mt0">
+                            <div class="col-md-12 col-xs-12 text-center mb16 mt0">
                                 <h2>Requirements</h2>
                             </div>
 
-                            <div class="col-md-12 mb16 mt16">
+                            <div class="col-md-12 col-xs-12 mb16 mt16">
                                 <p><strong>Objectives:</strong></p>
 
                                 <p><strong>Having attended this course, participants should be able to:</strong></p>
@@ -395,20 +396,20 @@
                                 <ul><li>Understand the development concepts and architecture;</li>
                                     <li>Install and administer your own server;</li>
                                     <li>Develop a new module for a particular application.</li>
-                                </ul><p></p>
+                                </ul><p>&#160;</p>
 
                                 <p><strong>Our prices include:</strong></p>
 
                                 <ul><li>drinks and lunch;</li>
                                     <li>training material.</li>
-                                </ul><p></p>
+                                </ul><p>&#160;</p>
 
                                 <p><strong>Requirements:</strong></p>
 
                                 <ul><li>Bring your own laptop.</li>
                                     <li>Participants are expected to have some knowledge in programming. A basic knowledge of the Python programming is recommended.</li>
                                     <li>Participants preferably have a functional knowledge of our software (see Functional Training).</li>
-                                </ul><p></p>
+                                </ul><p>&#160;</p>
 
                                 <p>To get more information, visit the <a href="https://www.odoo.com/">Odoo Official Website</a>.</p>
                             </div>
@@ -433,16 +434,16 @@
                 <section>
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 text-center mb8 mt0">
+                            <div class="col-md-12 col-xs-12 text-center mb8 mt0">
                                 <h2>Objectives</h2>
                             </div>
-                            <div class="col-md-12 mt16 mb0">
+                            <div class="col-md-12 col-xs-12 mt16 mb0">
                                 <p><span style="text-align: -webkit-center; ">Upon completion of the training, the participant will be able to:</span></p>
                                 <ul class="list-group">
                                     <li class="list-group-item"> Install and administer Odoo.</li>
                                     <li class="list-group-item"> Become an Odoo Consultant.</li>
                                     <li class="list-group-item"> Do the GAP analysis of any Business Process.</li>
-                                    <li class="list-group-item"> Understand the functional concepts, business processes byOdoo.</li>
+                                    <li class="list-group-item"> Understand the functional concepts, business processes by Odoo.</li>
                                     <li class="list-group-item"> Operate/Work with Odoo Smoothly on regular basis.</li>
                                     <li class="list-group-item"> Configure Odoo using the standard modules.</li>
                                     <li class="list-group-item"> Change the look and feel from the front-end(GUI) rather than aneed of technical knowledge.</li>
@@ -453,10 +454,10 @@
                     </div>
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 text-center mt0 mb16">
+                            <div class="col-md-12 col-xs-12 text-center mt0 mb16">
                                 <h2>What you will learn?</h2>
                             </div>
-                            <div class="col-md-4">
+                            <div class="col-md-4 col-xs-4">
                                 <div class="panel panel-info">
                                     <div class="panel-heading text-center">
                                         <h3 style="margin: 0">Day 1</h3>
@@ -472,7 +473,7 @@
                                     </ul>
                                 </div>
                             </div>
-                            <div class="col-md-4">
+                            <div class="col-md-4 col-xs-4">
                                 <div class="panel panel-info">
                                     <div class="panel-heading text-center">
                                         <h3 style="margin: 0">Day 2</h3>
@@ -488,7 +489,7 @@
                                     </ul>
                                 </div>
                             </div>
-                            <div class="col-md-4">
+                            <div class="col-md-4 col-xs-4">
                                 <div class="panel panel-info">
                                     <div class="panel-heading text-center">
                                         <h3 style="margin: 0">Day 3</h3>
@@ -508,7 +509,7 @@
                     </div>
                     <div class="container">
                         <div class="row">
-                            <div class="col-md-12 mb16 mt16">
+                            <div class="col-md-12 col-xs-12 mb16 mt16">
                                 <h2>Requirements</h2>
 
                                 <ul><li>Bring your own laptop.</li>
diff --git a/addons/website_quote/quotation_report.xml b/addons/website_quote/quotation_report.xml
new file mode 100644
index 00000000000..b9b363b06c6
--- /dev/null
+++ b/addons/website_quote/quotation_report.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+    <data>
+        <report 
+            id="report_web_quote"
+            string="Web Quotation"
+            model="sale.order" 
+            report_type="qweb-pdf"
+            file="website_quote.report_quotation" 
+            name="website_quote.report_quote" 
+            menu="False"
+        />
+    </data>
+</openerp>
diff --git a/addons/website_quote/views/report_quotation.xml b/addons/website_quote/views/report_quotation.xml
new file mode 100644
index 00000000000..737b164d075
--- /dev/null
+++ b/addons/website_quote/views/report_quotation.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+    <data>
+        <template id="report_quote">
+            <t t-call="report.html_container">
+                <t t-set="data_report_margin_top" t-value="45"/>
+                <t t-set="data_report_header_spacing" t-value="40"/>
+                <t t-call="report.external_layout">
+                    <t t-foreach="docs" t-as="quotation">
+                        <div class="page">
+                            <t t-call="website_quote.so_quotation_content"/>
+                        </div>
+                    </t>
+                </t>
+            </t>
+        </template>
+    </data>
+</openerp>
diff --git a/addons/website_quote/views/website_quotation.xml b/addons/website_quote/views/website_quotation.xml
index bce804af470..37954db1b0a 100644
--- a/addons/website_quote/views/website_quotation.xml
+++ b/addons/website_quote/views/website_quotation.xml
@@ -167,7 +167,7 @@
           </a>
       </div>
   </template>
-
+  <!-- Complete page of the quotation -->
   <template id="so_quotation" name="Product Quotation">
       <t t-call="website.layout">
         <body data-spy="scroll" data-target=".navspy" data-offset="50">
@@ -186,7 +186,7 @@
                               <div class="mt8" t-if="order_valid">
                                   <a type="submit" href="#discussion">
                                       Ask Changes
-                                  </a> or 
+                                  </a> or
                                   <a data-toggle="modal" data-target="#modeldecline">
                                       Reject
                                   </a>
@@ -237,6 +237,7 @@
                       </div>
                   </div>
                   <div class="col-md-9">
+
                       <div class="alert alert-success alert-dismissable" t-if="message==1">
                           <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&amp;times;</button>
                           Your message has been successfully sent!
@@ -251,17 +252,8 @@
                           and do not hesitate to <a href="#discussion">contact us</a> for
                           any question.
                       </div>
-                      <a id="introduction"/>
-                      <h1 class="page-header mt16">
-                          <span t-if="quotation.state in ('draft','sent','cancel')">Your Quotation</span>
-                          <span t-if="quotation.state not in ('draft','sent','cancel')">Your Order</span>
-                          <em t-esc="quotation.name"/>
-                          <small t-field="quotation.state"/>
-                          <div groups="base.group_website_publisher" t-ignore="true" class="pull-right css_editable_mode_hidden">
-                              <a class="btn btn-info hidden-print" t-att-href="'/web#return_label=Website&amp;model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % (quotation._name, quotation.id, action)">Update Quote</a>
-                          </div>
-                      </h1>
 
+                      <!-- modal relative to the actions Accept/Reject/Cancel -->
                       <div class="modal fade" id="modelaccept" role="dialog" aria-hidden="true">
                         <div class="modal-dialog">
                           <form id="accept" method="POST" t-attf-action="/quote/accept/#{quotation.id}/?token=#{quotation.access_token}" class="js_accept_json modal-content">
@@ -290,11 +282,6 @@
                         </div>
                       </div>
 
-                      <div class="alert alert-warning alert-dismissable" t-if="quotation.state == 'cancel'">
-                          <button type="button" class="close hidden-print" data-dismiss="alert" aria-hidden="true">&amp;times;</button>
-                          <strong>This quotation has been canceled.</strong> Contact us to get a new quote.
-                      </div>
-
                       <div class="modal fade" id="modeldecline" role="dialog" aria-hidden="true">
                         <div class="modal-dialog">
                           <form id="decline" method="POST" t-attf-action="/quote/#{quotation.id}/#{quotation.access_token}/decline" class="modal-content">
@@ -316,84 +303,120 @@
                         </div>
                       </div>
 
-                      <div class="row mt32">
-                          <div class="col-md-6">
-                              <div class="row">
-                                  <label class="col-sm-4 text-right">Customer:</label>
-                                  <div class="col-sm-8">
-                                      <div t-field="quotation.partner_id"/>
-                                  </div>
-                              </div>
-                              <div class="row">
-                                  <label class="col-sm-4 text-right">Bill To:</label>
-                                  <div class="col-sm-8">
-                                      <div t-field="quotation.partner_invoice_id" t-field-options='{
-                                          "widget": "contact",
-                                          "fields": ["address", "name", "phone", "email"]
-                                          }'/>
-                                  </div>
-                              </div>
-                              <div t-if="quotation.partner_shipping_id.id != quotation.partner_invoice_id.id" class="row">
-                                  <label class="col-sm-4 text-right">Ship To:</label>
-                                  <div class="col-sm-8">
-                                      <div t-field="quotation.partner_shipping_id" t-field-options='{
-                                        "widget": "contact",
-                                        "fields": ["address", "name", "phone"]
-                                        }'/>
-                                  </div>
-                              </div>
-                          </div>
-                          <div class="col-md-6">
-                              <div class="row">
-                                  <label class="col-sm-5 text-right">Your Contact:</label>
-                                  <div class="col-sm-7">
-                                      <div t-field="quotation.user_id" t-field-options='{
-                                          "widget": "contact",
-                                          "fields": ["name", "phone", "email"]
-                                          }'/>
-                                  </div>
-                              </div>
-                              <div class="row">
-                                  <label class="col-sm-5 text-right">Quote Date:</label>
-                                  <div class="col-sm-7">
-                                      <span t-field="quotation.date_order"/>
-                                  </div>
-                                  <div class="clearfix"/>
-                                  <div t-if="quotation.client_order_ref">
-                                      <label class="col-sm-5 text-right">Your Reference:</label>
-                                      <div class="col-sm-7">
-                                          <span t-field="quotation.client_order_ref"/>
-                                      </div>
-                                  </div>
-                              </div>
-                          </div>
+                      <div class="alert alert-warning alert-dismissable hidden-print" t-if="quotation.state == 'cancel'">
+                          <button type="button" class="close hidden-print" data-dismiss="alert" aria-hidden="true">&amp;times;</button>
+                          <strong>This quotation has been canceled.</strong> Contact us to get a new quote.
                       </div>
 
-                      <a id="offer"/>
-                      <div t-field="quotation.website_description" class="oe_no_empty"/>
-
-                      <t t-foreach="quotation.order_line" t-as="line">
-                          <a t-att-id="line.id"/>
-                          <div t-field="line.website_description" class="oe_no_empty"/>
-                      </t>
-    
-                      <div class="oe_structure"/>
-
-                      <a id="pricing"/>
-                      <t t-call="website_quote.pricing"/>
-                      
-                      <a id="options"/>
-                      <t t-call="website_quote.optional_products"/>
+                      <t t-call="website_quote.so_quotation_content"/>
 
+                      <!--
+                        DO NOT include the chatter in the so_quotation_content, since chatter template required website, which is not given to render a report
+                      -->
                       <a id="discussion"/>
                       <t t-call="website_quote.chatter"/>
-                  </div>
+                  </div><!-- //col-md-9 -->
               </div>
             </div>
         </body>
       </t>
   </template>
 
+
+  <!-- Quotation content : intro, informations, chatter, order lines, remarks, descriptions .... -->
+  <template id="so_quotation_content" name="Quotation Content">
+      <!-- Intro -->
+      <a id="introduction"/>
+      <h1 class="page-header mt16">
+          <span t-if="quotation.state in ('draft','sent','cancel')">Your Quotation</span>
+          <span t-if="quotation.state not in ('draft','sent','cancel')">Your Order</span>
+          <em t-esc="quotation.name"/>
+          <small t-field="quotation.state"/>
+          <div groups="base.group_website_publisher" t-ignore="true" class="pull-right css_editable_mode_hidden hidden-print">
+              <a class="btn btn-info" target="_blank" t-att-href="'/quote/%s/%s' % (quotation.id,quotation.access_token)+'?pdf=True'">Print</a>
+              <a class="btn btn-info" t-att-href="'/web#return_label=Website&amp;model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % (quotation._name, quotation.id, action)">Update Quote</a>
+          </div>
+      </h1>
+      <!-- Informations -->
+      <div class="row mt32">
+          <div class="col-md-6 col-xs-6">
+              <div class="row">
+                  <label class="col-sm-4 col-xs-4 text-right">Customer:</label>
+                  <div class="col-sm-8 col-xs-8">
+                      <div t-field="quotation.partner_id"/>
+                  </div>
+              </div>
+              <div class="row">
+                  <label class="col-sm-4 col-xs-4 text-right">Bill To:</label>
+                  <div class="col-sm-8 col-xs-8">
+                      <div t-field="quotation.partner_invoice_id" t-field-options='{
+                          "widget": "contact",
+                          "fields": ["address", "name", "phone", "email"]
+                          }'/>
+                  </div>
+              </div>
+              <div t-if="quotation.partner_shipping_id.id != quotation.partner_invoice_id.id" class="row">
+                  <label class="col-sm-4 col-xs-4 text-right">Ship To:</label>
+                  <div class="col-sm-8 col-xs-8">
+                      <div t-field="quotation.partner_shipping_id" t-field-options='{
+                        "widget": "contact",
+                        "fields": ["address", "name", "phone"]
+                        }'/>
+                  </div>
+              </div>
+          </div>
+          <div class="col-md-6 col-xs-6">
+              <div class="row">
+                  <label class="col-sm-5 col-xs-5 text-right">Your Contact:</label>
+                  <div class="col-sm-7 col-xs-7">
+                      <div t-field="quotation.user_id" t-field-options='{
+                          "widget": "contact",
+                          "fields": ["name", "phone", "email"]
+                          }'/>
+                  </div>
+              </div>
+              <div class="row">
+                  <label class="col-sm-5 col-xs-5 text-right">Quote Date:</label>
+                  <div class="col-sm-7 col-xs-7">
+                      <span t-field="quotation.date_order"/>
+                  </div>
+                  <div class="clearfix"/>
+                  <div t-if="quotation.validity_date">
+                    <label class="col-sm-5 col-xs-5 text-right">Expiration Date:</label>
+                    <div class="col-sm-7 col-xs-7">
+                        <span t-field="quotation.validity_date"/>
+                    </div>
+                  </div>
+                  <div class="clearfix"/>
+                  <div t-if="quotation.client_order_ref">
+                      <label class="col-sm-5 col-xs-5 text-right">Your Reference:</label>
+                      <div class="col-sm-7 col-xs-7">
+                          <span t-field="quotation.client_order_ref"/>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+
+      <a id="offer"/>
+      <div t-field="quotation.website_description" class="oe_no_empty"/>
+
+      <t t-foreach="quotation.order_line" t-as="line">
+          <a t-att-id="line.id"/>
+          <div t-att-class="'oe_no_empty' if line.website_description else 'oe_no_empty hidden-print'" t-field="line.website_description"/>
+      </t>
+
+      <div class="oe_structure"/>
+
+      <a id="pricing"/>
+      <t t-call="website_quote.pricing"/>
+
+      <a id="options"/>
+      <t t-call="website_quote.optional_products"/>
+
+  </template>
+
+
   <template id="navigation_menu">
     <div class="hidden-print navspy" t-ignore="true" role="complementary">
         <ul class="nav bs-sidenav" data-id="quote_sidebar">
@@ -418,7 +441,7 @@
   </template>
 
   <template id="optional_products">
-    <div class="container mt32" t-if="option">
+    <div class="container mt32" t-if="quotation.options">
         <section>
             <h1 class="page-header">Options</h1>
         </section>
@@ -470,6 +493,7 @@
     </div>
   </template>
 
+  <!-- Template to edit the quotation template with the website editor -->
   <template id="so_template" name="SO Template">
     <t t-call="website.layout">
         <body data-spy="scroll" data-target=".navspy" data-offset="50">
diff --git a/addons/website_report/views/layouts.xml b/addons/website_report/views/layouts.xml
index 5994adfde32..a4faebc164a 100644
--- a/addons/website_report/views/layouts.xml
+++ b/addons/website_report/views/layouts.xml
@@ -13,6 +13,14 @@
     <xpath expr="//head" position="inside">
         <style type="text/css">
             <t t-call="report.style"/>
+            /* To avoid broken snippets in report rendering */
+            .jumbotron, .panel, .carousel{
+                page-break-inside:avoid;
+            }
+            /* Wkhtmltopdf don't support very well the media-print CSS (depends on the version) */
+            .hidden-print{
+                display:none;
+            }
         </style>
     </xpath>
     <xpath expr="//body" position="attributes">
@@ -26,7 +34,7 @@
 
 <template id="website_html_container" inherit_id="report.html_container">
     <xpath expr="//t[@t-call='report.layout']" position="replace">
-        <t t-call="website_report.layout">          
+        <t t-call="website_report.layout">
             <t t-raw="0"/>
         </t>
     </xpath>