Jumbotron - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/jumbotron

HTML

<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css">
<div id="app">
<ul>
  <li v-for="item in items">{{ item.first_name }} <b-button size="sm" v-b-modal="'myModal'" user="'item'">Saluta {{item.first_name}}</b-button></li>
</ul>

    <b-modal id="myModal" :user="'user'">
      Hello {{name}}!
    </b-modal>
</div>

CSS

#app {
  padding: 20px;
  height: 450px;
}

JavaScript

new Vue({
  el: '#app',
  data: {items :[
        { first_name: 'Dickerson', last_name: 'Macdonald' },
        { first_name: 'Larsen', last_name: 'Shaw' },
        { first_name: 'Geneva', last_name: 'Wilson' },
        { first_name: 'Jami', last_name: 'Carney' }
  ]}

})