Vue.js / Bootstrap-Vue.js from CDN

index.html

<div id="app">
    <b-card-group deck
                  class="mb-3">
        <b-card bg-variant="primary"
                text-variant="white"
                header="Primary"
                class="text-center">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </b-card>
        <b-card bg-variant="secondary"
                text-variant="white"
                header="Secondary"
                class="text-center">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </b-card>
        <b-card bg-variant="success"
                text-variant="white"
                header="Success"
                class="text-center">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </b-card>
    </b-card-group>
    <b-card-group deck
                  class="mb-3">
        <b-card bg-variant="info"
                text-variant="white"
                header="Info"
                class="text-center">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </b-card>
        <b-card bg-variant="warning"
                text-variant="white"
                header="Warning"
                class="text-center">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </b-card>
        <b-card bg-variant="danger"
                text-variant="white"
                header="Danger"
                class="text-center">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </b-card>
    </b-card-group>
    <b-card-group deck
                  class="mb-3">
        <b-card bg-variant="light"
                header="Light"
                class="text-center">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </b-card>
        <b-card bg-variant="dark"
                header="Dark"
                text-variant="white"
                class="text-center">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </b-card>
        <b-card header="Default"
                class="text-center">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </b-card>
    </b-card-group>
</div>

script.js

console.clear()

new Vue({
  el:"#app"
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

styles

<link href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" rel="stylesheet" />

vue-js-bootstrap-vue-js-from-cdn.markdown

Vue.js / Bootstrap-Vue.js from CDN

A Pen by Bert Evans on CodePen.

License.