bootstrap vue starter template

Solutions on MaxInterview for bootstrap vue starter template by the best coders in the world

showing results for - "bootstrap vue starter template"
01 Nov 2020
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
8
9    <title>My first BootstrapVue app</title>
10
11    <!-- Required Stylesheets -->
12    <link
13      type="text/css"
14      rel="stylesheet"
15      href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
16    />
17    <link
18      type="text/css"
19      rel="stylesheet"
20      href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
21    />
22
23    <!-- Load polyfills to support older browsers -->
24    <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
25
26    <!-- Required scripts -->
27    <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
28    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
29  </head>
30  <body>
31    <!-- Our application root element -->
32    <div id="app">
33      <b-container>
34        <b-jumbotron header="BootstrapVue" lead="Bootstrap v4 Components for Vue.js 2">
35          <p>For more information visit our website</p>
36          <b-btn variant="primary" href="https://bootstrap-vue.org/">More Info</b-btn>
37        </b-jumbotron>
38
39        <b-form-group
40          horizontal
41          :label-cols="4"
42          description="Let us know your name."
43          label="Enter your name"
44        >
45          <b-form-input v-model.trim="name"></b-form-input>
46        </b-form-group>
47
48        <b-alert variant="success" :show="showAlert">Hello {{ name }}</b-alert>
49      </b-container>
50    </div>
51
52    <!-- Start running your app -->
53    <script>
54      window.app = new Vue({
55        el: '#app',
56        data: {
57          name: ''
58        },
59        computed: {
60          showAlert() {
61            return this.name.length > 4 ? true : false
62          }
63        }
64      })
65    </script>
66  </body>
67</html>
source