Vue.js

# bootstrap-vue

Getting Started

# With npm
npm install vue bootstrap-vue bootstrap

# With yarn
yarn add vue bootstrap-vue bootstrap

main.js

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Install BootstrapVue
Vue.use(BootstrapVue)

# layout

Use <b-container> for a responsive pixel width or <b-container fluid> for width: 100% across all viewport and device sizes.

Variable width content

getbootstrap flex

<b-container class="bv-example-row">
  <b-row class="justify-content-md-center">
    <b-col col lg="2">1 of 3</b-col>
    <b-col cols="12" md="auto">Variable width content</b-col>
    <b-col col lg="2">3 of 3</b-col>
  </b-row>
</b-container>

# color-variants-and-css-class-mapping

src/assets/bootstrap-custom.css

.btn-info2 {
  color: #fff;
  background-color: #0f929d;
  border-color: #0f929d;
}

main.js

import '@/assets/bootstrap-custom.css'

.vue

  <b-btn class="w-100 border-0" variant="info2"
          type="submit"
          @click.prevent="nextStep">
    <span v-text="$t('g_next')"></span>
  </b-btn>

# bootstrap-custom.css

getbootstrap colors

<input type="password"
       v-model="form.password"
       class="form-control border-0 bg-transparent"

.bg-transparent

.bg-transparent {
  background-color: transparent !important;
}

# Bootstrap Icons

main.js

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue-icons.min.css'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

# bootstrap.css

getbootstrap Download

Compiled CSS and JS > Bootstrap v4.5.0 > Download
bootstrap-4.5.0-dist / css / bootstrap.css

bootstrap.css -> src\assets\bootstrap.css

main.js

import '@/assets/bootstrap.css'

bootstrap.css

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

src\views\components\TabBar.vue

<template>
  <div>
    <b-container fluid class="tabBar fixed-bottom" v-if="isEntry">
    hello tab
    </b-container>
  </div>
</template>

← iView →