How to Use Bootstrap in a Vue Project demo repo

Bootstrap (opens new window) is an open source toolkit for developing with HTML, CSS, and JS.

BootstrapVue (opens new window) is an implementation of the Bootstrap v4.5 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup.

WARNING

BootstrapVue is not compatible with Vue 3 at the time of this writing, so it will only be used for Vue 2.

👣 Steps

1. Create a Vue project and install Bootstrap and BootstrapVue for v2. Install Bootstrap, jQuery, and Popper.js instead for v3.

2. Register Bootstrap in src/main.js.

3. Customize Bootstrap, e.g. in src/assets/custom-bootstrap.scss. The path to the default variables is bootstrap/scss/_variables.scss.

$primary: #359499;
$secondary: #98ddde;
$success: #81894e;
$info: #185190;
$warning: #ffdb3b;
$danger: #f36e60;
$light: #f5fbfb;
$dark: #040b0c;

$link-hover-decoration: none;
$border-radius: 0;
$font-family-sans-serif: "Fira Sans", sans-serif;
$font-family-monospace: "Fira Mono", monospace;
$font-weight-bold: 600;

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
// @import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
// @import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/breadcrumb";
// @import "~bootstrap/scss/pagination";
// @import "~bootstrap/scss/badge";
@import "~bootstrap/scss/jumbotron";
// @import "~bootstrap/scss/alert";
// @import "~bootstrap/scss/progress";
// @import "~bootstrap/scss/media";
@import "~bootstrap/scss/list-group";
// @import "~bootstrap/scss/close";
// @import "~bootstrap/scss/toasts";
// @import "~bootstrap/scss/modal";
// @import "~bootstrap/scss/tooltip";
// @import "~bootstrap/scss/popover";
// @import "~bootstrap/scss/carousel";
// @import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/utilities";
// @import "~bootstrap/scss/print";

4. Import the style in src/App.vue:

@import "./assets/custom-bootstrap.scss";

5. Create a page, e.g. in src/views/bootstrap.vue. Here I will create a page with nav, about, and contact sections.

<template>
  <div>
    <h1>Bootstrap Demo</h1>

    <BootstrapNav />
    <BootstrapAbout />
    <BootstrapContact />
  </div>
</template>

<script>
import BootstrapAbout from "@/components/BootstrapAbout";
import BootstrapContact from "@/components/BootstrapContact";
import BootstrapNav from "@/components/BootstrapNav";

export default {
  components: {
    BootstrapAbout,
    BootstrapContact,
    BootstrapNav
  }
};
</script>

In src/components/BootstrapNav.vue:

In src/components/BootstrapAbout.vue:

In src/components/BootstrapContact.vue: