Load boostrap in your Custom Lightning Web Components

Question

I searched extensively on Stack Exchange but couldn't find the method to load Bootstrap. However, I managed to solve it, and I want to share this code and procedure with the Salesforce community.

Answer 1

You can load bootstrap to your Lightning components by following the below steps:

Static resource Name

component.js

import { LightningElement } from 'lwc';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import jquery from '@salesforce/resourceUrl/jquery';
import bootstrap from '@salesforce/resourceUrl/bootstrap';
// import popper from '@salesforce/resourceUrl/popper';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class BootstrapTesting extends LightningElement {

    renderedCallback() {

        Promise.all([
            loadStyle(this, bootstrap + '/bootstrap/css/bootstrap.css'),
            loadScript(this, bootstrap + '/bootstrap/js/bootstrap.js'),
            loadScript(this, jquery)     
        ])
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Third-Party Libraries Loaded',
                        variant: 'success',
                    }),
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error Loading Third-Party Libraries',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });

    }
}

Actually the URL import bootstrap from '@salesforce/resourceUrl/bootstrap' is the url of your static resource name. And then the remaining path '/bootstrap/css/bootstrap.css' is the folder-> inner folder (css) -> then file Name bootstrap.css. Please use the bootstrap.css file from the folder. Same procedure for the boostrap.js file.

component.html

<template>
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <div class="spinner-border text-secondary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <div class="spinner-border text-success" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <div class="spinner-border text-danger" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <div class="spinner-border text-warning" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <div class="spinner-border text-info" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <div class="spinner-border text-light" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <div class="spinner-border text-dark" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
</template>

Output: