0

I know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.

Cœur
  • 37,241
  • 25
  • 195
  • 267
  • 1
    Please be more specific. You can change the style by overriding it or changing the original style of bootstrap which i do not recommend. – aleksandar Jul 01 '15 at 18:19
  • Well...I want to customize the jumbotron component like mentioned above. The background-color, the margins, etc. –  Jul 01 '15 at 18:28
  • Then override the original styles. – aleksandar Jul 01 '15 at 18:33
  • 2
    Don't modify the Bootstrap source. That will make it incredibly difficult for you or another dev to upgrade in the future. Override the styles with separate CSS or better yet [download a custom build](http://getbootstrap.com/customize/#jumbotron) – Turnip Jul 01 '15 at 18:41
  • Don't do it homie, it;s the wrong path to go down. – fauverism Jul 01 '15 at 19:46
  • See http://stackoverflow.com/a/8085921/3739498. Load your own styles AFTER bootstrap to override them. – Aibrean Jul 01 '15 at 23:01

3 Answers3

0

There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:

  1. Modify the css file you downloaded from Bootstrap
  2. (My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important

NOTE: This is likely NOT a comprehensive list, just a starting point.

Community
  • 1
  • 1
Xion Dark
  • 3,374
  • 2
  • 15
  • 23
  • 1
    No one should ever use !important – Derek Jul 01 '15 at 19:03
  • @Derek, using !important is perfectly valid, especially when writing component based CSS such as Bootstrap. Some of Bootstrap's own modifier classes even use !important – HaukurHaf Jul 01 '15 at 22:56
  • IMHO, adding your own stylesheet and overriding Bootstrap's defaults is the easiest way. I'd never touch the original Bootstrap files, that makes upgrading Bootstrap a pain. Keep your customizations in a separate file. – HaukurHaf Jul 01 '15 at 22:58
  • If you use a greater level of selector specificity you don't need !important. And while it might be valid to use, you can't override again. – Aibrean Jul 01 '15 at 23:00
  • @Aibrean, of course, but when you are writing component based CSS with modifier classes, you don't always want to use selector specificity. – HaukurHaf Jul 01 '15 at 23:02
  • That's why you load your own stylesheet CSS after the Bootstrap CSS. – Aibrean Jul 01 '15 at 23:02
  • @HaukurHaf - Just because someone else uses !important, doesn't mean it's ok to use it. Using !important is lazy coding. It's much better to learn specificity and code correctly. – Derek Jul 02 '15 at 15:56
  • @Derek I gave a perfectly good example when using !important is appropriate. Has nothing to do with lazyness. Sometimes specificity does not solve anything. Think about "modifier" classes, such as Bootstrap's .float-right utility class. How can you make sure that adding that class to *any* element in your markup, no matter what other CSS rules are being applied, will infact float the element? By using !important, that's right. – HaukurHaf Jul 02 '15 at 16:12
  • And just to emphasize, using !important to do what the OP wants to do is not the right way. I'm simply answering your statement that no one should ever use !important, which is simply not true. – HaukurHaf Jul 02 '15 at 16:15
0

You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.

qasimalbaqali
  • 2,079
  • 24
  • 51
0

Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff

Coding Enthusiast
  • 3,865
  • 1
  • 27
  • 50