How to customize bootstrap css when using bootstrap-sass [closed]


Tags: css,ruby-on-rails,twitter-bootstrap,responsive-design,sass

Problem :

I'd like to change many things, for example buttons color or for example change the background-image color on the nav bar (header). I use boostrap-sass gem so i can't use boostrap website' Customize page

Should I really override all these on my file custom.css.scss or can I change these somewhere more low level ? i don't find the .css files allowing me to do that in my project file (I searched all lib, app and vendor /assets but noweher i find the css of boostrap. i suspect it's because they're not there but they're directly in the gem files) I have a lot of changes so i feel overiding so many things is not the best option.

What's the best way to do this? Thanks



Solution :

You should never modify Boostrap's original files. The best option is to override their classes with your own ones. You can do this by creating a css file in your assets/stylesheets folder, which will be included automatically in your app.


    CSS Howto..

    css how to select a class in another div

    How to create CSS for round, responsive, bootstrap button with border? Border is affecting pixels

    How to do scale to fit in my case?

    How to reference CSS children [duplicate]

    How to embed link HTML into CSS file for menus?

    How to load only html from web pages in selenium

    How to apply custom CSS to Angular Material md-contact-chips

    How to style multiples of 3 li elements [duplicate]

    CSS - how to avoid class= for every single paragraph?

    How to show a region on a image with CSS

    How to implement a CDN failsafe for css files?

    How to convert a jQuery fade effect in CSS?

    CSS float: how to form the second row based on tallest DIV?

    How do I design a css gradient to look like the attached Facebook Login screen

    How do I align the list items in an
      with my

      ?

    How to make div scalable by using percentage in CSS

    How to not inherit CSS styles from parents? [duplicate]

    How to fade loop background images in Twitter's Bootstrap 3

    How to get CSS around links like login button

    How to prevent cutting off absolute positioned elements and still keep a box-shadow embrace the parent div?

    How to do this kind of Button in CSS?

    How can I resize svg using CSS?

    how to position divs within another div

    How to disable the Dropdown?

    How does CSS resize images?

    how to give space between tr tag and divide by | in html

    How to add an additional css class from code behind using ASP.NET?

    Showing border when clicking icon on phones browser

    How to specify font-size for all bold text in the div?

    How can I affect Opacity of an image whilst hovering a div?