How to change the default background color white t

问题:

I am building a web application where I have set my default color to navy blue using css. But when i added the twitter bootstrap css's in my page I did not find my navy blue color instead I found the white background color provided by twitter bootstrap.

My query is that what portion of css should I change in bootstrap to change my page's background.

回答1:

You can overwrite Bootstraps default CSS by adding your own rules.

<style type="text/css">
   body { background: navy !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>

回答2:

I would not recommend changing the actual bootstrap CSS files. If you do not want to use Jako's first solution you can create a custom bootstrap style sheet with one of the available Bootstrap theme generator (Bootstrap theme generators). That way you can use 1 style sheet with all of the default Bootstrap CSS with just the one change to it that you want. With a Bootstrap theme generator you do not need to write any CSS. You only need to set the hex values for the color you want for the body (Scaffolding; bodyBackground).

回答3:

You have to override the bootstrap default by being a bit more specific. Try this for a black background:

html body {
    background-color: rgba(0,0,0,1.00);

}

回答4:

You can simply add this line into your bootstrap_and_overides.css.less file

body { background: #000000 !important;}

that's it

回答5:

I'm using cdn boostrap, the solution that I found was: First include the cdn bootstrap, then you include the file .css where you are editing the default styles of bootstrap.

回答6:

Bootstrap 4 provides standard methods for this, fully described here: https://getbootstrap.com/docs/4.3/getting-started/theming

Eg. you can override defaults simply by setting variables in the SASS file, where you import bootstrap. An example from the docs (which also answers the question):

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

回答7:

Add your own .css file & put in it:

body{
    background: navy;
}

Important: While including css files in html, first include the cdn bootstrap css, then only include your own .css file. This way stylings in your own css file overrides the default behaviour from bootstrap css.

回答8:

The colors changed due to the order of CSS files.

Place the custom CSS under the bootstrap CSS.

回答9:

Its not recommended to overwrite bootstrap file, just in your local style.css use

body{background: your color !important;

here !important declaration overwrite bootstrap value.

share | improve this answer | follow | | | |