diff --git a/src/views/message/MessageDemo.vue b/src/views/message/MessageDemo.vue
index c2405a68c..830b3d8f4 100755
--- a/src/views/message/MessageDemo.vue
+++ b/src/views/message/MessageDemo.vue
@@ -28,12 +28,12 @@
                 <h5>Validation Message</h5>
                 <div class="p-formgroup-inline" style="margin-bottom:.5rem">
                     <Label for="username" class="p-sr-only">Username</Label>
-                    <InputText placeholder="Username" class="p-invalid" />
+                    <InputText id="username" placeholder="Username" class="p-invalid" />
                     <InlineMessage>Username is required</InlineMessage>
                 </div>
                 <div class="p-formgroup-inline">
                     <Label for="email" class="p-sr-only">email</Label>
-                    <InputText placeholder="email" class="p-invalid" />
+                    <InputText id="email" placeholder="Email" class="p-invalid" />
                     <InlineMessage />
                 </div>
             </div>
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index a49e78b02..338d6cb16 100755
--- a/src/views/message/MessageDoc.vue
+++ b/src/views/message/MessageDoc.vue
@@ -251,12 +251,12 @@ import InlineMessage from 'primevue/inlinemessage';
 &lt;h3&gt;Validation Message&lt;/h3&gt;
 &lt;div class="p-formgroup-inline" style="margin-bottom:.5rem"&gt;
     &lt;Label for="username" class="p-sr-only"&gt;Username&lt;/Label&gt;
-    &lt;InputText placeholder="Username" class="p-invalid" /&gt;
+    &lt;InputText id="username" placeholder="Username" class="p-invalid" /&gt;
     &lt;InlineMessage&gt;Username is required&lt;/InlineMessage&gt;
 &lt;/div&gt;
 &lt;div class="p-formgroup-inline"&gt;
     &lt;Label for="email" class="p-sr-only"&gt;email&lt;/Label&gt;
-    &lt;InputText placeholder="email" class="p-invalid" /&gt;
+    &lt;InputText id="email" placeholder="Email" class="p-invalid" /&gt;
     &lt;InlineMessage /&gt;
 &lt;/div&gt;
 </template>
diff --git a/src/views/toast/ToastDemo.vue b/src/views/toast/ToastDemo.vue
index 5debb6132..021adf9e5 100755
--- a/src/views/toast/ToastDemo.vue
+++ b/src/views/toast/ToastDemo.vue
@@ -7,46 +7,22 @@
             </div>
         </div>
 
-        <div class="content-section implementation p-fluid">
+        <div class="content-section implementation">
             <div class="card">
                 <h5>Severities</h5>
-                <div class="p-grid">
-                    <div class="p-col-12 p-md-3">
-                        <Button label="Success" class="p-button-success" @click="showSuccess" />
-                    </div>
-                    <div class="p-col-12 p-md-3">
-                        <Button label="Info" class="p-button-info" @click="showInfo" />
-                    </div>
-                    <div class="p-col-12 p-md-3">
-                        <Button label="Warn" class="p-button-warning" @click="showWarn" />
-                    </div>
-                    <div class="p-col-12 p-md-3">
-                        <Button label="Error" class="p-button-danger" @click="showError" />
-                    </div>
-                </div>
+                <Button label="Success" class="p-button-success" @click="showSuccess" />
+                <Button label="Info" class="p-button-info" @click="showInfo" />
+                <Button label="Warn" class="p-button-warning" @click="showWarn" />
+                <Button label="Error" class="p-button-danger" @click="showError" />
 
                 <h5>Positions</h5>
-                <div class="p-grid">
-                    <div class="p-col-12 p-md-4">
-                        <Button label="Top Left" @click="showTopLeft" />
-                    </div>
-                    <div class="p-col-12 p-md-4">
-                        <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
-                    </div>
-                    <div class="p-col-12 p-md-4">
-                        <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
-                    </div>
-                </div>
+                <Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
+                <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
+                <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
 
                 <h5>Options</h5>
-                <div class="p-grid">
-                    <div class="p-col-12 p-md-6">
-                        <Button @click="showMultiple" label="Multiple" class="p-button-warning" />
-                    </div>
-                    <div class="p-col-12 p-md-6">
-                        <Button @click="showSticky" label="Sticky" />
-                    </div>
-                </div>
+                <Button @click="showMultiple" label="Multiple" class="p-button-warning" />
+                <Button @click="showSticky" label="Sticky" />
 
                 <h5>Remove All</h5>
                 <Button @click="clear" label="Clear" />
@@ -104,4 +80,18 @@ export default {
         'ToastDoc': ToastDoc
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+button {
+    min-width: 10rem;
+    margin-right: .5rem;
+}
+
+@media screen and (max-width: 960px) {
+    button {
+        width: 100%;
+        margin-bottom: .5rem;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index 89716c75e..28ece502d 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -248,46 +248,22 @@ this.$toast.removeAllGroups();
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;h3&gt;Severities&lt;/h3&gt;
-&lt;div class="p-grid"&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;Button label="Success" class="p-button-success" @click="showSuccess" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;Button label="Info" class="p-button-info" @click="showInfo" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;Button label="Warn" class="p-button-warning" @click="showWarn" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;Button label="Error" class="p-button-danger" @click="showError" /&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
+&lt;h5&gt;Severities&lt;/h5&gt;
+&lt;Button label="Success" class="p-button-success" @click="showSuccess" /&gt;
+&lt;Button label="Info" class="p-button-info" @click="showInfo" /&gt;
+&lt;Button label="Warn" class="p-button-warning" @click="showWarn" /&gt;
+&lt;Button label="Error" class="p-button-danger" @click="showError" /&gt;
 
-&lt;h3&gt;Positions&lt;/h3&gt;
-&lt;div class="p-grid"&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;Button label="Top Left" @click="showTopLeft" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
+&lt;h5&gt;Positions&lt;/h5&gt;
+&lt;Button label="Top Left" class="p-mr-2" @click="showTopLeft" /&gt;
+&lt;Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" /&gt;
+&lt;Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /&gt;
 
-&lt;h3&gt;Options&lt;/h3&gt;
-&lt;div class="p-grid"&gt;
-    &lt;div class="p-col-12 p-md-6"&gt;
-        &lt;Button @click="showMultiple" label="Multiple" class="p-button-warning" /&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-6"&gt;
-        &lt;Button @click="showSticky" label="Sticky" /&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
+&lt;h5&gt;Options&lt;/h5&gt;
+&lt;Button @click="showMultiple" label="Multiple" class="p-button-warning" /&gt;
+&lt;Button @click="showSticky" label="Sticky" /&gt;
 
-&lt;h3&gt;Remove All&lt;/h3&gt;
+&lt;h5&gt;Remove All&lt;/h5&gt;
 &lt;Button @click="clear" label="Clear" /&gt;
 </template>
 </CodeHighlight>