Bootstrap 4.4.1 Docs

[Jenn Smotherman]

Inmany of the examples shown in BootstrapVue's documentation, you may see the use of CSS classes such as ml-2, py-1, etc. These are Bootstrap v4.6 utility classes that help control padding, margins, positioning, and more. You can find information on these classes in the Utility Classes reference section.

Many of the examples in this documentation are live and can be edited in-place for an enhanced learning experience (note some examples may not work in IE 11 due to use of ES6 JavaScript code in the sections).

Bootstrap v4 CSS employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Refer to the following sub-sections for details.

Bootstrap is optimized for mobile devices first and then scales up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

For more straightforward sizing in CSS, the global box-sizing value is switched from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

Most likely you are using module bundlers like Webpack, Parcel or rollup.js, which makes it easy to directly include the package into your project. To do this, use npm or yarn to get the latest version of Vue.js, Bootstrap v4 and BootstrapVue:

Note: If your project has multiple webpack config files (i.e. webpack.config.js, webpack.renderer.config.js, webpack.vendor.config.js, webpack.server.config.js, webpack.client.config.js, etc.), you will need to set the appropriate alias in all of them.

When using a module bundler you can optionally import only specific components groups (plugins), components and/or directives. Note that tree shaking only applies to the JavaScript code and not CSS/SCSS.

When importing as plugins, all subcomponents and related directives are imported in most cases. i.e. When importing , all the sub components are also included, as well all dropdown sub components. Component shorthand aliases (if any) are also included in the plugin. Refer to the component and directive documentation for details.

There are two additional helper plugins for providing the $bvModal and $bvToast injections (if you are not using the ModalPlugin or ToastPlugin plugins) which are available for import from 'bootstrap-vue':

You can override the use of the esm/ build by aliasing 'bootstrap-vue' to use the BootstrapVue source files, and whitelisting node_modules/bootstrap-vue/src/* for transpilation by your build process, in your module bundler config. This will allow you to transpile BootstrapVue for your target browsers/environments and potentially reduce bundle sizes (and will only include the babel helper utils once) at the expense of slightly longer build times.

BootstrapVue's custom SCSS relies on Bootstrap SCSS variables and mixins, and any variable overrides you may have set. You can include Bootstrap and BootstrapVue SCSS in your project's custom SCSS file:

If you wish to reduce your production bundle size because you only use a subset of the available BootstrapVue plugins, you can configure the list of BootstrapVue componentPlugins or directivePlugins you want to globally install in your Nuxt.js project. Note tree shaking only applies to the JavaScript code and not CSS/SCSS.

There are two additional helper plugins for providing the $bvModal and $bvToast injections (if you are not using the ModalPlugin or ToastPlugin plugins) that are available in the componentPlugins option:

Refer to the reference section at the bottom of each of the component and directive docs for details on the plugin names available (and which components and directives are included in each plugin) and component and/or directive import names.

If you want to import individual BootstrapVue components into specific pages and/or components of your Nuxt app, you may want to bypass the Nuxt.js module and, instead, follow the module bundlers and Tree shaking with module bundlers sections above. Alternatively you may want to to just import a few plugins (such as LayoutPlugin) in your Nuxt.js module config, and then import additional components or plugins in the pages where needed.

You can override this option using usePretranspiled option. Setting to true always uses the pre-transpiled versions, while setting it to false will always use src/. By default usePretranspiled is enabled in development mode only. You should not need to use this option as the default is most optimal for performance.

For additional configuration for Vue CLI 3 for using project relative paths for image src props on various BootstrapVue components, refer to the Vue CLI 3 section of the Image Src Resolving reference page.

Note the UMD (browser) variant does not include BootstrapVue icons support. All other variants listed above do include the BootstrapVueIcons (IconsPlugin) plugin (note the icons plugin is not automatically installed, and must explicitly installed via Vue.use(). See the Icons usage section for more details.

All of the build variants listed above have been pre-transpiled targeting the browsers supported by BootstrapVue. However, if you are targeting only modern browsers, you may want to import BootstrapVue from src/index.js, (by aliasing bootstrap-vue to bootstrap-vue/src/index.js) and whitelisting bootstrap-vue/src for transpilation via your own project. This can potentially reduce final project bundle sizes. See the Using BootstrapVue source code for smaller bundles section above for more details.

BootstrapVue relies on Popper.js (for Tooltip, Popover, and Dropdown positioning), PortalVue (for toasts) and vue-functional-data-merge (used by our functional components). These three dependencies are included in the BootstrapVue UMD bundle, while the UMD (browser) icons only bundle includes vue-functional-data-merge. All other builds do not include these dependencies.

If you are using VS Code as your text editor, BootstrapVue has intellisense autocompletion for component attributes and directives available via the dist/vetur-tags.json and dist/vetur-attributes.json files.

Bootstrapping is the process of preparing your AWS environment for usage with the AWS Cloud Development Kit (AWS CDK).Before you deploy a CDK stack into an AWS environment, the environment must first be bootstrapped.

Resources and their configuration that are used by the CDK are defined in an AWS CloudFormation template. Thistemplate is created and managed by the CDK team. For the latest version of this template, see bootstrap-template.yaml in the aws-cdk GitHubrepository.

To bootstrap an environment, you use the AWS CDK Command Line Interface (AWS CDK CLI) cdk bootstrapcommand. The CDK CLI retrieves the template and deploys it to AWS CloudFormation as a stack, known as thebootstrap stack. By default, the stack name is CDKToolkit. By deploying thistemplate, CloudFormation provisions the resources in your environment. After deployment, the bootstrap stack will appear inthe AWS CloudFormation console of your environment.

Notice the prominent Documentation link in the top navigation bar. The documentation starts out all right. It provides an overview, example programs, information about the environment, and even a hello world tutorial.

First, the docs break up the information into a series of small chunks of digestible information. This is no doubt because the information is in the form of a learning tutorial rather than reference documentation.

If you're a technical writer and want to keep on top of the latest trends in the tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.

I have been working on a customized version of Twitter Bootstrap as a base for a new university website. We want to have public documentation for campus developers to be able to see all of the components Bootstrap provides, so serving the documentation via Jekyll is not a feasible option. We also want to be able to build the documentation using our customizations.

I have been looking around online, and I can't find anyone who has built static documentation for 3.x. Has anyone done this, or is the only way going to be simply parsing the HTML files and re-creating them in the appropriate format?

Note that you will have to update the docs with any components you may have created that are not out-of-the-box Bootstrap, but that is just a matter of updating the docs folder, merging the changes in to the gh-pages branch, and pushing up to GH.

As mentioned by @SeanRyan , I was dismissing Jekyll too quickly. When I posted this, I had the impression that Jekyll was primarily a way to quickly serve a site locally rather than generate a static site that you can push almost anywhere. However, we did not have a public (or even private) GitHub organization or GitHub Enterprise server to which I could push a gh-pages branch with our custom doc.

The best solution for our use case (which I unfortunately never quite finished) was to incorporate the Jekyll build into the rest of the build process. Instead of making a separate gh-pages branch to push to a GitHub server somewhere, I had a style-guide branch, which contained the files for the Jekyll site. I set up tasks in our Grunt build which would compile the documentation using the templates and assets from master and automatically create a new commit in style-guide. The idea was that, during the build process, we could automatically build our site and assets, generate the documentation and style guide, push the static site to its own branch, and deploy the compiled style guide to its own URL on our web server.

Obviously, if you are using GitHub or GitHub Enterprise, the process is even easier. See @SeanRyan's answer or GitHub's documentation for detailed instructions on setting up a Jekyll site on gh-pages.

3a8082e126