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 ? Subscribe to SPClassroom SharePoint and o365 videos – https://www.youtube.com/user/clardo11… 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.