S1E16: How to Fix the SharePoint Ribbon after Applying Bootstrap! sharepoint developer tutorial

S1E16: How to Fix the SharePoint Ribbon after Applying Bootstrap!

When adding a custom design that uses the bootstrap framework, there are several ribbon icons, layouts, and spacing that may get distorted due to bootstraps overarching and general CSS rules.

In this video we will walk-through the process on how to correct these mis-aligned items.

We will also look at the logic needed to determine if we are in design mode or live mode with client-side coding. This is important because with this logic, you can do some really cool things, to the angularJS web part for the content managers and hide them from the end users. In this video we will walkthrough this implementation and discuss some of the scenarios.

here is the CSS snippet used in the video

/*credit to: Denis Molodtsov */
.ms-webpart-chrome-title *,
.ms-webpart-chrome-title *:before,
.ms-webpart-chrome-title *:after,
#s4-ribbonrow *,
#s4-ribbonrow *:before,
#s4-ribbonrow *:after,
.ms-webpart-controlBox,
.ms-dialog *,
.ms-dialog *:before,
.ms-dialog *:after,
#idStorefrontLayoutRoot *,
#idStorefrontLayoutRoot *:before,
#idStorefrontLayoutRoot *:after,
.ms-dialog #s4-workspace *,
.ms-dialog #s4-workspace *:before,
.ms-dialog #s4-workspace *:after,
.ms-dlgTitle *,
.ms-dlgTitle *:before,
.ms-dlgTitle *:after,
.ms-srch-result-groups *,
.ms-srch-result-groups *:before,
.ms-srch-result-groups *:after,
#Paging *,
#Paging *:before,
#Paging *:after,
#Hero-WPQ2 *,
#Hero-WPQ2 *:before,
#Hero-WPQ2 *:after,
#suiteBarButtons *,
#suiteBarButtons *:before,
#suiteBarButtons *:after {
-webkit-box-sizing: initial !important;
-moz-box-sizing: initial !important;
box-sizing: content-box !important;
}

#spEasyDev #sharepointrefiners #ngsharepoint #spclassroom

SPClassroom is a collection of sharepoint developer tutorials for SharePoint 2013, SP2016, SharePoint Online, office365, and SPFx SharePoint Developer's Framework, with a focus on training videos for Power Users, Developers, and SharePoint Architects.

Find More SharePoint Developer Tutorial, o365 Development Training, and SharePoint Training Videos here:

[cjideani]

Thanks DeShon!!! this was very helpful. I couldn't find any tutorial with someone successfully implementing with npm.

[HovhannesKonnor]

Ty bro! Although Sharepoint online has changed all that structure, the ribbon does not accept such parameters, I would suggest to mark down the aplicable frame

[amoridogjura]

Hey, do you have a video or would you know how can I implement a bootstrap theme to sharepoint? Trying to apply the theme to a custom site and give the buttons, etc actions. Connect them to a data source kind of like help desk management tool

[jr-pottv]

hi Deshon, did you try to install node package manager in sharepoint 2013?