Twitter Bootstrap Question posted in

How does one modify a twitter bootstrap component?

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.

Tags:

3

Answers


  1. 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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search