How to add bootstrap to spfx extension

Question

I am building SPFx extension for the first time, I am little unsure how to add bootstrap to extension and I am creating dropdown. Basically it goes out of the frame.

BreadNav.tsx

import * as React from 'react';
import styles from './BreadNav.module.scss';
import { IBreadNavProps } from './IBreadNavProps';
import { SiteBreadcrumb } from "@pnp/spfx-controls-react/lib/SiteBreadcrumb";
    

export default class BreadNav extends React.Component<IBreadNavProps, {}> {
    
  public render(): React.ReactElement<IBreadNavProps> {
    return (
        <div className={styles.breadNav}>
             <div className={styles.navRight}>
        <ul className="nav navbar-nav">
        <li className="dropdown">
          <a className="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span className="caret"></span></a>
          <ul className="dropdown-menu">
            <li><a href="">Page 1-a</a></li>
            <li><a href="">Page 1-b</a></li>
            <li><a href="">Page 1-c</a></li>
          </ul>
        </li>
      </ul>
      </div>            
      <SiteBreadcrumb context={this.props.context}/>
       </div>
       
    );
  }
}

Answer 1

You can load Bootstrap CSS using SPComponentLoader.loadCss() method in CSS OR you can try installing it using npm i bootstrap command.

Check below links for detailed information:

1. SharePoint Framework (SPFx) web part & extensions: Bootstrap integration
2. NPM bootstrap