when i try to set a bootstrap style for my sharepoint page by adding css file, all SharePoint:DateTimeControl in my page loose their style and become something like this : enter image description here

  • Bootstrap has some global rules which might make a mess in SharePoint, do you need to apply bootstrap to the whole page? We usually build bootstrap with less and that way target a specific parent selector – eirikb Aug 22 '15 at 9:35
  • what do you mean by build bootstrap with less ! – mokhtar nebli Aug 22 '15 at 9:45
  • We use less compiler (and bower) to build bootstrap, then we can do something like .some-app { @import "./bower_components/bootstrap/less/bootstrap.less; }, this way all bootstrap rules only apply within .some-app class. Of course rules for body and html etc. is lost, but beside that it works quite well. – eirikb Aug 22 '15 at 9:54
  • can you give me some turorial about this ? – mokhtar nebli Aug 22 '15 at 10:10
  • Sorry I don't know about any tutorial, but here my first hit on google: treyhunner.com/2015/02/creating-a-custom-bootstrap-build – eirikb Aug 22 '15 at 10:15

If you only need to add a limited set of bootstrap-styled controls (like a navbar, or a button group), you can create a custom bootstrap file here and then remove all global styles (those applied to body, all paragraphs, all links etc.) and only keep the styling for the controls you want to add (usually styles applied to classes). This way you'll get a small CSS file and you won't break SharePoint styles.

Has the drawbacks of being hard to maintain and takes a few minutes to look into the generated custom bootstrap.

  • Does this work? Can you remove scaffolding.less via their customizer? In my experience it's easier to wrap bootstrap even in manual building, since you need all the mixins and variables anyway (much less code to manage) – eirikb Aug 22 '15 at 10:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.