0

I wrote code for a simple one page application. I want to change background color(excluding navbar & jumbotron) from default white to some other color. I am unable to override white color in css sheet.

rate.html

 body
    {
     background:#2c3e50;
    }
<html>
        <head>
         <title></title>
         <link rel="stylesheet" type="text/css" href="effects.css">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        
        
         <script
          src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>
         
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
        
        </head>
        <body>
        
         <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><div class="glyphicon glyphicon-pencil"></div>
        Rate Gitam</a>
            </div>
            <p class="navbar-text">Gitam university's first rating site</p>
         </div><!-- /.navbar-collapse -->
         </nav>
         <div class="jumbotron">
          <h1>Rate your professor</h1>
          <p>Rate your professor and choice of your elective on a five point scale</p>
          
         </div>
         <div class="col"> 
         <form class="form-horizontal ">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Faculty Name</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputEmail3" placeholder=" Faculty Name">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">rating</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputPassword3" placeholder="Rating">
            </div>
          </div>
        
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
        </form>
        </div>
        
        </body>
        </html>
neophyte
  • 6,540
  • 2
  • 28
  • 43
priyatham
  • 49
  • 2
  • 7

6 Answers6

3

Use !important flag to override previous css behaviour with your new behaviour. run below snippet:

body
    {
     background:#2c3e50 !important;
    }
<html>
        <head>
         <title></title>
         <link rel="stylesheet" type="text/css" href="effects.css">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        
        
         <script
          src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>
         
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
        
        </head>
        <body>
        
         <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><div class="glyphicon glyphicon-pencil"></div>
        Rate Gitam</a>
            </div>
            <p class="navbar-text">Gitam university's first rating site</p>
         </div><!-- /.navbar-collapse -->
         </nav>
         <div class="jumbotron">
          <h1>Rate your professor</h1>
          <p>Rate your professor and choice of your elective on a five point scale</p>
          
         </div>
         <div class="col"> 
         <form class="form-horizontal ">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Faculty Name</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputEmail3" placeholder=" Faculty Name">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">rating</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputPassword3" placeholder="Rating">
            </div>
          </div>
        
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
        </form>
        </div>
        
        </body>
        </html>

All the bests.

EDIT: Or Include your css stylesheet file next to bootstrap or any library. (at end of head)

Community
  • 1
  • 1
Hasan Bayat
  • 926
  • 1
  • 13
  • 24
1

always include your css at the end of all other styles like this.

<head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="effects.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="css/style.css"> <!-- your custom stylesheet. you should create this stylesheet and add your styles here -->


        <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    </head>

i have edited your snippet too

 body
    {
     background:#2c3e50;
    }
<html>
        <head>
         <title></title>
         
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="effects.css"> <!-- if this is your stylesheet, use it here. if not, use your stylesheet here like i mentioned above -->
        
        
         <script
          src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>
         
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
        
        </head>
        <body>
        
         <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><div class="glyphicon glyphicon-pencil"></div>
        Rate Gitam</a>
            </div>
            <p class="navbar-text">Gitam university's first rating site</p>
         </div><!-- /.navbar-collapse -->
         </nav>
         <div class="jumbotron">
          <h1>Rate your professor</h1>
          <p>Rate your professor and choice of your elective on a five point scale</p>
          
         </div>
         <div class="col"> 
         <form class="form-horizontal ">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Faculty Name</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputEmail3" placeholder=" Faculty Name">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">rating</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputPassword3" placeholder="Rating">
            </div>
          </div>
        
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
        </form>
        </div>
        
        </body>
        </html>
Lucian
  • 1,715
  • 3
  • 17
  • 26
  • In this way you can't override the background color check your snippet. – neophyte Mar 05 '17 at 08:10
  • 1
    this snippet won't work since here is no style defined in the external stylesheet. OP will do that and it works. i have just copied his snippet to make it easier for him to understand. in the snippet i have just pointed where he can add the stylesheet – Lucian Mar 05 '17 at 08:18
  • exactly mention that in your answer otherwise OP will get confused..just a suggestion :) – neophyte Mar 05 '17 at 08:22
  • i have mentioned that at the top of the answer and later i have added his snippet – Lucian Mar 05 '17 at 08:23
  • anyways i added some more comment to make it more easier to understand – Lucian Mar 05 '17 at 08:26
1

By default bootstrap css has white as body background color, so in order to change it you need to override it .. in this way--

<style type="text/css">
 body { background: navy !important; } 
 </style>

But using !important is not recommended. so try to consider the below methods--

You should always wrap your code inside a container or container-fluid. As you want to add background color to the body so wrap everything in class="container-fluid". then style it.

If you don't want to use the background color to the jumbotron then use the colr in the class="row".

Also you have some basic problem in your HTML mark-up. your columns should always be under class="row".

.container-fluid
    {
     background-color: #2c3e50;
    }
<html>
        <head>
         <title></title>
         
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        
        
         <script
          src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>
         
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
        
        </head>
        <body id="bdy">
        
         <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><div class="glyphicon glyphicon-pencil"></div>
        Rate Gitam</a>
            </div>
            <p class="navbar-text">Gitam university's first rating site</p>
         </div><!-- /.navbar-collapse -->
         </nav>
          <div class="container-fluid">
         <div class="jumbotron">
          <h1>Rate your professor</h1>
          <p>Rate your professor and choice of your elective on a five point scale</p>
          
         </div>
          <div class="row">
         <div class="col"> 
         <form class="form-horizontal ">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Faculty Name</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputEmail3" placeholder=" Faculty Name">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">rating</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="inputPassword3" placeholder="Rating">
            </div>
          </div>
        
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
        </form>
        </div>
        </div>
        </div>
        </body>
        </html>

note

One of the answer says you should always include your style sheet after the bootstrap cdns that's also another thing you should consider.

Hope this helps!

neophyte
  • 6,540
  • 2
  • 28
  • 43
0

Just add additional css in the head section after the bootstrap css file

<style>
    body {
        background-color: <colorCode>
    }
</style>
lkdhruw
  • 572
  • 1
  • 7
  • 22
0

You need to add your style after other css files so that they don't override whatever you write.

Add this just before 

<style>
    body {
        background-color: #yourcolor
    }
</style>
mazen el zoor
  • 305
  • 4
  • 16
0

two different CSS selectors are telling that background color to be. because background color is overridden by the following css from bootstrap. you can solve this by adding white color in the body tag.

<body style="background-color:#2c3e50;">

check this : Specifics on CSS Specificity

Kasun Gunawardana
  • 316
  • 2
  • 6