Forum Discussion

Shibu Mathew's avatar
Shibu Mathew
Copper Contributor
May 04, 2020

Applying bootstrap in spfx extensions

I have built a mega menu in the top placeholder using spfx extension. To bring the stylingin menu I have applied bootstrap v4 library(css and js). These menu have links to sharepoint list. But the problem  here is the list title and first row in the list disappears when seen in my desktop/laptop. But when viewed in mobile /table , the list title name appears.  I have attached screenshot of how the sharepoint list looks like. 

Could you provide your suggestions to fix the issue.

 

 
 
 

 

  • Sudharsan K's avatar
    Sudharsan K
    Steel Contributor
    May 05, 2020
    Hi, the best practice is to use office-ui-fabric styles for SharePoint Online, since the out-of-box is using the same. Using bootstrap will put you in a tough spot, the design will have a huge impacts on the existing out-of-box component.
    My suggestion is to use fabric nav component with the callout to show the submenus.

    Hope it helps, please like it or mark it as a solution if it resolves ur clarification or issue
    -Sudharsan K...

Resources