Try Bootstrap + Vue

Template for https://github.com/znck/bootstrap-for-vue

by Rahul Kadyan

HTML

<!-- require bootstrap -->
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/tether.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.min.js"></script>

<!-- require vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<!-- require bootstrap-for-vue -->
<script src="https://unpkg.com/bootstrap-for-vue/dist/bootstrap-for-vue.min.js"></script>


<!-- testing arena -->
<div id="app">
  
  <input-box v-model="confirm" title="Default Checkbox"></input-box>
  <input-box v-model="confirm" title="Custom Checkbox" custom></input-box>
  
  <input-box v-model="radio" title="Custom Checkbox" radio="1"></input-box>
  <input-box v-model="radio" title="Custom Checkbox" radio="2"></input-box>
  
  <input-box v-model="radio" title="Custom Checkbox" radio="1" custom></input-box>
  <input-box v-model="radio" title="Custom Checkbox" radio="2" custom></input-box>
  
  <input-box v-model="radio" title="Custom Checkbox" radio="1" inline></input-box>
  <input-box v-model="radio" title="Custom Checkbox" radio="2" inline></input-box>

</div>

CSS

/* require bootstrap */
@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

/* require bootrap-for-vue */
@import url('https://unpkg.com/bootstrap-for-vue/dist/bootstrap-for-vue.min.css');

/* app styles */
#app {
  padding: 16px;
}

JavaScript

new Vue({
	el: '#app',
  
  data: () => ({ 
  	confirm: true,
    radio: '1',
  })
})