Table of Contents

• Getting Started
  • Theming
  • Webpack
• Layout
  • Overview
  • Content
• Extensions
  • bootstrap-social
  • bootstrap-vue

Getting Started

• requires HTML5
• uses border-box by default
• uses Reboot
  • Avoid margin-top. (Use only margin-bottom for vertical margins). Because they can collapse
• requires following meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Theming

• Every Sass variable in Bootstrap 4 includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code.
• See _variables.scss

• To import bootstrap variables from multiple scss files, import partially as following:

  @import "node_modules/bootstrap/scss/functions";
  @import "node_modules/bootstrap/scss/variables";
  @import "node_modules/bootstrap/scss/mixins";
  

Webpack

npm install bootstrap

To import Compiled CSS

import 'bootstrap';

To import Precompiled Sass:

@import "~bootstrap/scss/bootstrap";

Webpack's sass-loader interprets prepended ~ as a ./node_modules/ This behavior is defined in loader-utils.

Layout

Overview

Responsive breakpoints

• xs: extra small
• sm: small
• md: medium
• lg: large
• xl: extra large

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Content

Reboot

Applies some defaults for pages, fonts, tables, etc.

Typography

Extensions

bootstrap-social

bower install bootstrap-social

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-social/bootstrap-social.css';
import 'font-awesome/css/font-awesome.min.css';

<a class="btn btn-block btn-social btn-twitter">
  <span class="fa fa-twitter"></span> Sign in with Twitter
</a>

bootstrap-vue

npm i bootstrap-vue

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);