How to use bootstrap in SPFx webpart

This SPFx tutorial explains, how to use bootstrap in the SPFx webpart. We will use bootstrap in SPFx client-side web part.

We will see here, how to use bootstrap table to display SharePoint Online list items in SPFx client-side web part.

Bootstrap in SPFx Web part

First, we will create an SPFx client-side web part and then we will see how to use bootstrap in SharePoint Framework (SPFx) client side web part.

Step 1: Open Node.js command prompt and create a new project as same as the below screenshot.

Step 2: Here I have created an SPFx client-side web part called BootstrapWithSPFX and I used the React as a framework.

So after the execution of the above command, our new web part got created successfully in the solution folder.

Now you type code . in the command prompt to open this project in Visual Studio code.

Now you can see the below screenshot where the new SPFx web part has been created successfully and the solution looks like below.

Step 3: Next I created a list in SharePoint Online as same as the below screenshot.

Step 4: Next expand the component folder and select BootstrapWithSpfx.tsx and replace the below code.

import * as React from 'react';
import styles from './BootstrapWithSpfx.module.scss';
import { IBootstrapWithSpfxProps } from './IBootstrapWithSpfxProps';
import { escape } from '@microsoft/sp-lodash-subset';
import BootstrapTable from 'react-bootstrap-table-next';    
//Import from @pnp/sp    
import { sp } from "@pnp/sp";    
import "@pnp/sp/webs";    
import "@pnp/sp/lists/web";    
import "@pnp/sp/items/list"; 
import { SPComponentLoader } from '@microsoft/sp-loader';
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
import paginationFactory from 'react-bootstrap-table2-paginator';

export interface IShowEmployeeStates{    
  ItemList :any[]    
} 
const paginationOptions = {    
        sizePerPage: 4,    
        hideSizePerPage: true,    
        hidePageListOnlyOnePage: true    
      };    

const ItemTablecolumns = [     
  {    
      dataField: "Title",    
      text: "Title",    
      headerStyle : {backgroundColor: '#d42aca'},    
      sort : true ,
      formatter: makeodd    
   
  },    
  {    
      dataField: "Column_x002d_1",    
      text: "Column-1" ,
      headerStyle : {backgroundColor: '#d42aca'} ,
      formatter: makeEven        
  },    
  {    
      dataField: "Column_x002d_2",    
      text: "Column-2" ,
      headerStyle : {backgroundColor: '#d42aca'} ,
      formatter: makeodd         
  },    
  {    
      dataField: "column_x002d_3",    
      text: "Column-3",
      headerStyle : {backgroundColor: '#d42aca'} ,
      formatter: makeEven         
  },
  {    
    dataField: "column_x002d_4",    
    text: "Column-4",
    headerStyle : {backgroundColor: '#d42aca'} ,
    formatter: makeodd          
},
{    
  dataField: "column_x002d_5",    
  text: "Column-5",
  headerStyle : {backgroundColor: '#d42aca'},
  formatter: makeEven         
},
{    
  dataField: "Date",    
  text: "Date",
  headerStyle : {backgroundColor: '#d42aca'}  ,
  formatter: makeodd    
}];

function makeodd(cell, row) {    
  return (    
    <span>    
      <strong style={ { color: 'green' } }> { cell }</strong>    
    </span>    
  );    
} 
function makeEven(cell, row) {    
  return (    
    <span>    
      <strong style={ { color: 'black' } }> { cell }</strong>    
    </span>    
  );    
}     
export default class BootstrapWithSpfx extends React.Component<IBootstrapWithSpfxProps, IShowEmployeeStates>{
constructor(props: IBootstrapWithSpfxProps){  
  super(props);    
  this.state ={    
    ItemList : []    
  }     
}

public getItemDetails = () =>{    
  sp.web.lists.getByTitle("ViewListInSharePoint").items.getAll().    
  then((results : any)=>{    
    
      this.setState({    
        ItemList:results    
      });        
  });    
} 
   
public componentDidMount(){    
  this.getItemDetails();    
}

  public render(): React.ReactElement<IBootstrapWithSpfxProps> {
    let cssURL = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";    
    SPComponentLoader.loadCss(cssURL);    
    return (
      <div className={ styles.bootstrapWithSpfx }>    
        <div className={ styles.container }>    
          <div className={ styles.row }>    
            <div className={ styles.column }>    
              <span className={ styles.title }>Welcome to SharePoint!</span>    
              <p className={ styles.subTitle }>Bootstrap With SharePoint List in SPFX</p>    
            </div>    
          </div>    
          <BootstrapTable keyField='id' data={this.state.ItemList} columns={ ItemTablecolumns } pagination={paginationFactory(paginationOptions)} headerClasses="header-class"/>    
        </div>    
      </div>    
    );    
  }    
}  

Step 5: Now I am going to explain clearly, how this will work exactly. Once you replace the above code, you will get an error in the below line which I have highlighted in yellow.

So what we can do, again we go back to node.js command prompt and execute the below packages.

install react-bootstrap-table2-paginator --save
npm install react-bootstrap-table-next -save
npm install @pnp/sp

Step 6: In the below method, I have called the list Item through PNP. So you just rename your list name which you have created.

Step 7: In the below code, you have to provide your list column name and what header you want to show in the table.

Step 8: In the below code, You will set your pagination of the table.

Step 9: Next go to your command prompt and execute this code using the below command.

• gulp clean
• gulp build
• gulp serve
• gulp bundle –ship
• gulp package-solution -ship

So you can run the above command as per the order. So once you click on gulp serve, it will open a new page where you have to add your newly added web part.

After adding the new SPFx web part, the page will look empty. The result will come after added this web part to your SharePoint Online site.

Step 10: Next we will do, prepare a package, and upload the package to our SharePoint App Catalog site.

So we have to prepare the package using the above command which is in step-8. After creating the package, we have to upload in App catalog site which is the same as the below screenshot.

Step 11: After adding your Web part in page, the output will looks like below screenshot.

In this tutorial, we learned how to use Bootstrap in the spfx webpart. Here, we used the bootstrap table inside a client-side web part in SharePoint Framework.

If you are new to SharePoint Framework development, you can check out the below tutorials:

• How to set up development environment for SharePoint framework
• SPFx Application Customizer Example – An Analog Clock with React
• How to get user details using Microsoft Graph API in SPFx
• How to display SharePoint list items in a table using SPFX
• Customize SharePoint Online site header and footer using SPFx Application Customizer
• How to use office UI fabric react groupedlist in SPFx web part