Add Bootstrap to SharePoint SPFx Webpart – Step By Step

Bootstrap is one of the most popular frameworks for front-end web development. Instead of using plain HTML and CSS for styling, you can use Bootstrap libraries. With Bootstrap, we can quickly add styling and layout features without writing a lot of CSS.

In SPFx development, you can also use Bootstrap libraries to provide styling in a client-side web part. Here, I will explain step by step how to use Bootstrap in a SharePoint Framework (SPFx) client-side web part.

What is the Bootstrap Library

Bootstrap is a popular open-source front-end framework for quickly and efficiently designing responsive, mobile-first websites. Originally developed by Twitter, it provides a collection of pre-designed HTML, CSS, and JavaScript components that help developers create consistent and visually appealing web interfaces without starting from scratch.

Bootstrap includes ready-to-use elements such as navigation bars, buttons, forms, modals, carousels, and grids, all of which can be easily customized to fit specific design needs without coding everything from scratch.

One of Bootstrap’s key features is its responsive grid system, which allows web pages to automatically adjust their layout based on the screen size or device type. This ensures that websites built with Bootstrap look good on desktops, tablets, and smartphones.

Integrate Bootstrap with SPFx Webpart

In the example below, you can see that I used Bootstrap tables and pagination to display the data from my SharePoint list named “Monthly Orders”.

This bootstrap table also provides built-in pagination, and when the user clicks a page number, it displays the items on that page.

Here, I have used the PnPJS library to fetch SharePoint list items and display them using the Bootstrap table.

I hope you have a SPFx development environment ready.

Follow the steps below to achieve this!

1. Open the command prompt. Create a directory for the SPFx solution and navigate to it.

md SPFxScriptEditorSol

cd SPFxScriptEditorSol

2. Run Yeoman SharePoint Generator to create the solution

yo @microsoft/sharepoint

Yeoman generator will present you with a wizard that asks questions about the solution to be created.

• What is your solution name? boot-strapwith-sp-fx
• Which type of client-side component to create? WebPart
• Add new Web part to solution boot-strapwith-sp-fx.
• What is your Web part name? SPFxBootstrapTable
• Which template would you like to use? React

3. Once the solution is created, run the two commands below also.

npm install @pnp/sp --save
npm install bootstrap react-bootstrap

• @pnp/sp –save = To interact with SharePoint using the PnP JS library.
• bootstrap react-bootstrap = To use Bootstrap classes in our webpart.

4. In the command prompt, type the below command to open the solution in VS Code editor-> ” code .“
5. Go to the “ISpFxBootstrapTableProps.ts” file and copy and paste the code below.

import { WebPartContext } from "@microsoft/sp-webpart-base";
import { SPFI } from "@pnp/sp";
export interface ISpFxBootstrapTableProps {
  description: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  hasTeamsContext: boolean;
  userDisplayName: string;
  context: WebPartContext
  sp :SPFI
}

Here we added the two properties below to the default ones:

• context = holds the current webpart context.
• sp = holds pnp instance.

6. Then, open the “SpFxBootstrapTableWebPart.ts” file and update the code below in your existing code.

import { spfi,SPFx,SPFI } from '@pnp/sp';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

export interface ISpFxBootstrapTableWebPartProps {
  description: string;
}

export default class SpFxBootstrapTableWebPart extends BaseClientSideWebPart<ISpFxBootstrapTableWebPartProps> {

  private _isDarkTheme: boolean = false;
  private _environmentMessage: string = '';
  private _sp: SPFI;
  public render(): void {
    const element: React.ReactElement<ISpFxBootstrapTableProps> = React.createElement(
      SpFxBootstrapTable,
      {
        description: this.properties.description,
        isDarkTheme: this._isDarkTheme,
        environmentMessage: this._environmentMessage,
        hasTeamsContext: !!this.context.sdks.microsoftTeams,
        userDisplayName: this.context.pageContext.user.displayName,
        context: this.context,
        sp: this._sp
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onInit(): Promise<void> {
    return this._getEnvironmentMessage().then(message => {
      this._environmentMessage = message;
        this._sp = spfi().using(SPFx(this.context));
    });
  }

Here:

• Initially, we imported some of the PnPJs library statements to interact with the web, list, and items.
  • private _sp: SPFI; =Created a variable with type SPFI.
  • this._sp = spfi().using(SPFx(this.context)); = We added this line in OnInIt(), so that it will create a PnP JS instance and assign it to the _sp variable.
  • sp: this._sp = Then, in render(), we assigned that PnP JS instance to prop sp.

7. After that, open the “SpFxBootstrapTable.tsx” file and update that code with the code below.

import * as React from 'react';
import styles from './SpFxBootstrapTable.module.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
import Pagination from 'react-bootstrap/Pagination';
import Table from 'react-bootstrap/Table';
interface ISpFxBootstrapTableState {
  items: any[];
  currentPage: number;
  itemsPerPage: number;
}
import type { ISpFxBootstrapTableProps } from './ISpFxBootstrapTableProps';
export default class SpFxBootstrapTable extends React.Component<ISpFxBootstrapTableProps, ISpFxBootstrapTableState > {
  constructor(props: ISpFxBootstrapTableProps) {
    super(props);
    this.state = {
      items: [],
      currentPage: 1,
      itemsPerPage: 10
    };
  }
   componentDidMount() {
    this._fetchListItems();
  }
  private async _fetchListItems(): Promise<void> {
    try {
      const items: any[] = await this.props.sp.web.lists.getByTitle("MonthlyOrders").items();
      this.setState({ items });
    } catch (error) {
      console.error("Error fetching list items: ", error);
    }
  }
   private handlePageClick(pageNumber: number) {
    this.setState({ currentPage: pageNumber });
  }

  
  public render(): React.ReactElement<ISpFxBootstrapTableProps> {
    const { items, currentPage, itemsPerPage } = this.state;
    // Calculate items to display for current page
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = items.slice(indexOfFirstItem, indexOfLastItem);
    // Calculate total pages
    const totalPages = Math.ceil(items.length / itemsPerPage);
    return (
      <section className={`${styles.spFxBootstrapTable}`}>
  {/* New heading with background */}
  <div className={styles.tableHeading}>
    Monthly Orders
  </div>

  <Table striped bordered hover responsive className={styles.customTable}>
    <thead>
      <tr>
        <th>Order ID</th>
        <th>Customer Name</th>
        <th>Order Date</th>
        <th>Order Amount</th>
      </tr>
    </thead>
    <tbody>
      {currentItems.map(item => (
        <tr key={item.Id}>
          <td>{item.OrderID}</td>
          <td>{item.CustomerName}</td>
          <td>{item.OrderDate}</td>
          <td>{item.OrderAmount}</td>
        </tr>
      ))}
    </tbody>
  </Table>

  {/* Pagination Centered */}
  <div className={styles.paginationWrapper}>
    <Pagination>
      {[...Array(totalPages)].map((_, index) => (
        <Pagination.Item
          key={index + 1}
          active={index + 1 === currentPage}
          onClick={() => this.handlePageClick(index + 1)}
          className={styles.paginationItem}
        >
          {index + 1}
        </Pagination.Item>
      ))}
    </Pagination>
  </div>
</section>
    );
  }

}

Here:

• import ‘bootstrap/dist/css/bootstrap.min.css’; -> It brings Bootstrap’s default CSS styles so Bootstrap components look properly styled.
• import Pagination from ‘react-bootstrap/Pagination’; -> It imports the Pagination component from React-Bootstrap to create paginated navigation in React.
• import Table from ‘react-bootstrap/Table’;-> It imports the Table component from React-Bootstrap to render styled tables with Bootstrap formatting.
• ISpFxBootstrapTableState ->We created an interface for state:
  • items -> It stores the list of items fetched from the SharePoint list.
  • currentPage -> It keeps track of the currently selected page in the pagination.
  • itemsPerPage-> It defines how many items should be displayed per page in the table.
• _fetchListItems() ->This method is fetching the SharePoint list “Monthly Orders” items and stores them in the items state.
• componentDidMount() -> This is a React lifecycle method, this function is called when the webpart is loaded, so within this method, we’re calling _fetchListItems().
• handlePageClick() -> This method updates the current page number. We’re calling this when clicking the page numbers in pagination.
• render()-> This method will display the webpart in the SharePoint Online page:
  • const { items, currentPage, itemsPerPage } = this.state; ->It extracts the current state values.
  • const indexOfLastItem = currentPage * itemsPerPage; ->It calculates the index of the last item to display on the current page.
  • const indexOfFirstItem = indexOfLastItem – itemsPerPage;->It calculates the index of the first item to display on the current page.
  • const currentItems = items.slice(indexOfFirstItem, indexOfLastItem) ->It extracts only the items that should be displayed on the current page.
  • const totalPages = Math.ceil(items.length / itemsPerPage); ->It will store the total number of pages required by dividing the total items by items per page.
  • <Table..>->It renders a Bootstrap-style table with rows and a responsive layout.
  • <thead>..</thead>->Defined the column headers of the table.
  • <tbody>..</tbody>->Iterates through currentItems and renders each row of data from the SharePoint list.
  • <Pagination>…</Pagination> ->Displays pagination links, with the active page highlighted using custom primary colour styling.

8. To apply styles, open the “SpFxBootstrapTable.module.scss” file and update the code below.

@import '~@fluentui/react/dist/sass/References.scss';

.spFxBootstrapTable {
  .tableHeading {
    background-color: #0078d7; // Primary color
    color: #fff;
    padding: 10px;
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 15px;
    border-radius: 4px;
  }

  .customTable {
    thead {
      background-color: #0078d7; // Primary color
      color: #fff;
      th {
        font-weight: 600;
        text-align: center;
      }
    }
    tbody td {
      text-align: center;
    }
  }

  .paginationWrapper {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }

  .paginationItem {
    a {
      color: #0078d7 !important;
    }
    &.active a {
      background-color: #0078d7 !important;
      border-color: #0078d7 !important;
      color: #fff !important;
    }
  }
}

Save the changes and run the “gulp serve” command to test this SPFx webpart locally. You can then view the SharePoint list items in the Bootstrap table with pagination. This way, we can integrate Bootstrap into our SPFx solutions.

In this tutorial, I explained how to use Bootstrap in a SharePoint Framework (SPFx) web part. We used a React Bootstrap table and pagination components in an SPFx web part. By following the same approach, you can also integrate other Bootstrap components into your SPFx solution. Do let me know if you have any questions.

Also, you may like:

• Display SharePoint List Items in a SPFX Web Part
• Display Current User Name in SPFx Client Side Web Part
• Retrieve Current User Information in SPFx Web Part using Graph API
• How to Use Microsoft Graph API in SPFx Web Parts
• Use office UI fabric react groupedlist in SPFx web part

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.