CODEWITHSUNDEEP
csstwitter-bootstrap
SM Farhad Ali
SM Farhad Ali

Reputation: 1105

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.

Upvotes: 48

Views: 251477

Answers (11)

Rogerio O. Ferraz
Rogerio O. Ferraz

Reputation: 1

If the intention is to change the default light colors mode to a Dark Mode Theme, with Bootstrap 5.3 you can toggle the color modes globally using the data-bs-theme attribute on the element.

Example:

<html lang="en" data-bs-theme="dark">

Refer to:

Bootstrap documentation

w3schools

This is also covered in this question.

Upvotes: 0

Carmoreno
Carmoreno

Reputation: 1319

I'm using CDN bootstrap, and the solution that I found was: First, include the bootstrap's CDN, then in the next line, you include the file .css where you are editing the default styles of bootstrap.

<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Your styles -->
<link rel='stylesheet' href='styles/my_bootsrap_editions.css'>

Upvotes: 6

Esther
Esther

Reputation: 325

The colors changed due to the order of CSS files.

Place the custom CSS under the bootstrap CSS.

Upvotes: 2

Zoltan Peller
Zoltan Peller

Reputation: 421

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

Upvotes: 32

N. Syawali. A
N. Syawali. A

Reputation: 11

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

Upvotes: 0

karunesh
karunesh

Reputation: 315

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.

Upvotes: 1

abhishek kumar
abhishek kumar

Reputation: 107

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.

Upvotes: 5

Jako
Jako

Reputation: 4901

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>

Upvotes: 68

Richie
Richie

Reputation: 181

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

}

Upvotes: 18

user3209457
user3209457

Reputation: 111

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

body { background: #000000 !important;}

that's it

Upvotes: 7

Theo
Theo

Reputation: 141

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

Upvotes: 12

Related Questions