How to Use Bootstrap in a Nuxt 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.

# 👣 Steps

  1. Create a Nuxt project and install Bootstrap and Bootstrap Vue.
npx create-nuxt-app nuxt-demo
cd nuxt-demo
npm i bootstrap bootstrap-vue
  1. Customize Bootstrap, e.g. in 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";

::selection {
  background-color: $primary;
  color: #fff;
}
  1. Import the style and module in nuxt.config.js.
export default {
  css: [{ src: "@/assets/custom-bootstrap", lang: "scss" }],
  modules: ["bootstrap-vue/nuxt"]
};
  1. Create a page, e.g. in pages/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>

In components/BootstrapNav.vue:

<template>
  <b-navbar toggleable="lg" type="dark" variant="dark" class="w-100">
    <b-navbar-brand to="/">
      <b-img
        class="d-inline-block align-top"
        src="~assets/logo.svg"
        alt="Logo"
        width="30"
        height="30"
      />
      <span class="font-weight-bold">Unordinary</span>
    </b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item v-for="(item, index) in menu" :key="index" :href="item.to">
          {{ item.label }}
        </b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { to: "#about", label: "About" },
        { to: "#contact", label: "Contact" }
      ]
    };
  }
};
</script>

In components/BootstrapAbout.vue:

<template>
  <b-jumbotron id="about" bg-variant="white" class="rounded-0 mb-0">
    <b-row>
      <b-col
        md="4"
        order-md="2"
        class="d-flex align-items-center justify-content-center"
      >
        <b-img fluid src="~assets/john-doe.jpeg" alt="John Doe" class="img" />
      </b-col>

      <b-col md="8" order-md="1">
        <b-container>
          <h2 class="display-4">John Doe</h2>

          <p class="lead">
            I am also known as joker, <del>shadow</del> king, and
            &#647;n&#477;sp&#592;&#654;.<br />I hate the hierarchy, so I broke
            it.
          </p>
        </b-container>
      </b-col>
    </b-row>
  </b-jumbotron>
</template>

<style scoped>
.img {
  max-height: 300px;
}
</style>

In components/BootstrapContact.vue:

<template>
  <b-container
    id="contact"
    fluid
    bg-variant="primary"
    class="bg-primary mh-100 px-0 text-white"
  >
    <b-container fluid class="content py-3 mh-100">
      <b-container>
        <h3 class="mb-4">Contact Me</h3>

        <p>
          You know I am busy teaching people lessons, so reach me through my
          sidekick <del>Cecile</del> <ins>Zeke</ins>.
        </p>

        <hr class="bg-white" />

        <b-row>
          <b-col md="7" class="mb-5 mb-md-0 py-3">
            <b-form
              action="https://formspree.io/yasmin@yasminzy.com"
              method="POST"
            >
              <b-form-group>
                <b-form-input
                  id="name"
                  class="form-control"
                  type="text"
                  name="name"
                  placeholder="Name"
                  required
                />
              </b-form-group>

              <b-form-group>
                <b-form-input
                  id="email"
                  class="form-control"
                  type="email"
                  name="_replyto"
                  aria-describedby="emailHelp"
                  placeholder="Email"
                  required
                />
              </b-form-group>

              <b-form-group>
                <b-form-textarea
                  id="message"
                  class="form-control"
                  rows="3"
                  name="message"
                  placeholder="Message"
                  required
                />
              </b-form-group>

              <input type="hidden" name="_subject" value="Bootstrap Demo" />
              <input
                type="hidden"
                name="_next"
                value="https://www.yasminzy.com"
              />

              <b-button
                type="submit"
                class="bg-white btn d-flex align-items-center text-dark"
              >
                SEND
                <ion-icon name="send" class="pl-2 text-primary" />
              </b-button>
            </b-form>
          </b-col>

          <b-col md="3" offset-md="1">
            <b-list-group class="mb-5">
              <b-list-group-item
                v-for="(item, index) in contact"
                :key="index"
                class="bg-transparent border-left-0 border-right-0 border-top-0 px-0"
              >
                <div>
                  <p class="font-weight-bold mb-2 text-uppercase">
                    {{ item.label }}
                  </p>

                  <small>{{ item.content }}</small>
                </div>
              </b-list-group-item>
            </b-list-group>
          </b-col>
        </b-row>
      </b-container>
    </b-container>
  </b-container>
</template>

<script>
export default {
  data() {
    return {
      contact: [
        {
          label: "Telephone",
          content: "(12) 345-6789"
        },
        {
          label: "Email",
          content: "king[at]welston.com"
        },
        {
          label: "Address",
          content: "2020 Black Speech Bubble, ID"
        }
      ]
    };
  }
};
</script>
Last updated: 11/1/2020, 3:28:11 PM