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
- Create a Vue project and install Bootstrap and BootstrapVue for v2. Install Bootstrap, jQuery, and Popper.js instead for v3.
- Register Bootstrap in
src/main.js
.
- Customize Bootstrap, e.g. in
src/assets/custom-bootstrap.scss
. The path to the default variables isbootstrap/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";
- Import the style in
src/App.vue
:
@import "./assets/custom-bootstrap.scss";
- 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
: