CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Daniel YC Lin
Daniel YC Lin

Reputation: 15992

assign background color in twitter bootstrap 3

I'm trying to understand bootstrap, I read document on Scaffolding section of http://getbootstrap.com/css/#less-variables.

Here is my simplified code, and it can NOT work.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" />
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" />
    <![endif]-->
    <style type="text/css">
@body-bg: #fff;
@text-color: @black-50;
    </style>
  </head>
<body>
hi
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" />
</body>
</html>

Upvotes: 0

Views: 1167

Answers (3)

Krzysztof Grzybek
Krzysztof Grzybek

Reputation: 9406

You're trying to put less variables into css, which is impossible.

Bootstrap converts less files into css code, for example:

less:

@body-bg: #fff;
body{
background: @body-bg;
}

converts to css code:

body{
background: #fff;
}

So if you want to change your bg color You have to change @body-bg: #fff; in bootstrap less file, or overwrite css in your stylesheet.

Upvotes: 1

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

The problem is simple, you're trying to redefine LESS variables, you need to do this in your styles.less for example, and from there you can do something like:

@import "bootstrap"; 

//redefine the bootstrap variables or define your own
@body-bg: #fff;

//@black-50; have to be previously defined since is 
//not a bootstrap variable
@text-color: @black-50; 
//Now you can do this
body{
   background-color: @body-bg; //You can scape this since bootstrap 
                               //will do it for you in _scaffolding.less

   color: @black-50;
}

That variables will work in your LESSs files, but when you compile your LESS to CSS will generate just the hex colors.

Upvotes: 1

Rakhat
Rakhat

Reputation: 4942

If you use inline styles you should set body background color in css:

<style type="text/css">
  body {
    background-color: #fff;
    color: #000;
  }
</style>

Better solution is to use bootstrap customize on this page or preprocessors like Sass or Less.

Upvotes: 1

Related Questions