How to use bootstrap in SPFx webpart

This SPFx tutorial explains, how to use bootstrap in 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.

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

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

Bootstrap in SPFx Web part

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

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

get sharepint list items in spfx web part

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

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
How to use bootstrap in SPFx  client side webpart
How to use bootstrap in SPFx webpart
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

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

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

bootstrap in sharepoint online

Step 9: Next go to your command prompt and execute this code using 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 what we will do, prepare a package, and upload the package in 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

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

how to use bootstrap in spfx webpart

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

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>