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.

Bootstrap in SPFx Web part
spfx bootstrap

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.

get sharepint list items in spfx client side web part
spfx latest version

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

get sharepint list items in spfx web part
react-bootstrap-table-next

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.

How to use bootstrap in sharepoint framework webpart
sharepoint bootstrap

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

How to use bootstrap in SPFx web part
npm react-bootstrap-table-next
How to use bootstrap in SPFx  client side webpart
react bootstrap table
How to use bootstrap in SPFx webpart
react-bootstrap-table2-paginator
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.

bootstrap table in spfx web part
spfx tabbed web part

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

bootstrap table in spfx client side webpart
import bootstrap in react

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

bootstrap in sharepoint online
reactjs bootstrap

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.

bootstrap in spfx webpart
spfx bootstrap

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

how to use bootstrap in spfx webpart
react bootstrap table

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:

  • Hi,
    It’s very useful article. Now only i’m learning this, i need right sidebar with center content layout (like bootstrap easyui layout). It is possible to create spfx webpart using, it is possible means please advice me, how to create that layout.

  • Good article. Can you let me know how we can save the items (multiple rows of data) entered in Bootstrap table to SP List

  • >