CODEWITHSUNDEEP
csshtmltwitter-bootstrap
betoharres
betoharres

Reputation: 1833

How to change twitter bootstrap background color

I already tried the custom function from the website, but keeps give me error, and tried the BASIC method too:

body {background-color:red;}

so, does anyone know?

Upvotes: 6

Views: 47156

Answers (7)

Ajmal PraveeN
Ajmal PraveeN

Reputation: 413

For Bootstrap 3.3 Add the following BG Style.

body{
background-color: gray !important;
}

Source : from Bootstrap 3.3 Guide.

Upvotes: 0

Patrick Lee Scott
Patrick Lee Scott

Reputation: 8729

I have a boilerplate I've created that I use to create bootstrap themes, that will generate docs using the theme you've created. I've implemented this at companies that use it across multiple web teams in order to get a branded result while just using basic bootstrap components.

Check it out here: https://github.com/patrickleet/bootstrap-override-boilerplate

There are instructions in the README

Upvotes: 0

Dan
Dan

Reputation: 1

In html change to In CSS change "body {}" to ".body {}" This is because a CLASS is more specific than a tag, and so it will take the rule over the main bootsrap.css which only classifies as a tag.

Upvotes: 0

Oceinic
Oceinic

Reputation: 406

The correct way to change background color in Bootstrap 3 is to use bg-* classes. For red color there is bg-danger. Also available bg-primary, bg-success, bg-info and bg-warning. http://getbootstrap.com/css/#helper-classes-backgrounds

Upvotes: 9

Prashant Tiwari
Prashant Tiwari

Reputation: 67

I would strongly recommend using Sass with Bootstrap-Sass not just for making any customisations to the core Bootstrap framework but also to ensure your CSS is as DRY as possible. Then you can do something like

$red: #f00;

$body-bg: $red;

before you import your core Bootstrap CSS, and you will be good to go. Note that Sass allows you to reuse the variable ($red) you just declared anywhere else you may like in your app.

The benefits of using a CSS preprocessor like Sass or LESS don't end here. Bootstrap is based on a proportionate system of font sizes, so you can also do something like

$font-size-base: 16px;

and that will accordingly change the font sizes of all elements (p, h1..h6 etc) across the board. You may also, for example, write

$font-family-sans-serif: 'Gill Sans';

and that will replace Helvetica as the default sans-serif font for all elements.

Look here for all the customisations you can make to your code whenever you wish and not just while downloading Bootstrap if you use Sass.

Upvotes: 3

Kevin Lynch
Kevin Lynch

Reputation: 24723

I would not recommend changing the actual bootstrap CSS files. 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).

SOURCE: How to change the default background color white to something else in twitter boostrap

Upvotes: 3

scooterlord
scooterlord

Reputation: 15369

Download all of the bootstrap files and somewhere inside the .css file add:

body {
   background:red !important;
}

Upvotes: 13

Related Questions