[css] How to change the default background color white to something else in twitter bootstrap

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.

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.

how to change background color in html & css with class

example:

on html you write

<div class="pad_menu">
</div>

on css

.pad_menu {
   padding: 100px;
   background-color: #A9FFCB;
}

so your background will be change to Magic Mint, if you want to know the code of the color, i suggest you visit https://coolors.co. Hope this useful :)

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);

}

The colors changed due to the order of CSS files.

Place the custom CSS under the bootstrap CSS.

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

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.

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.

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";

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

body { background: #000000 !important;}

that's it