title: overwrite or add styles to predefined classes in bootstrap 3
body: <p>This is regarding bootstrap 3. I want to change the colors of predefined bootstrap 3 columns when the browser is re-sized.</p>
  
  <p>Here is the code for the <strong>index.html</strong>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Bootstrap Template&lt;/title&gt;
  
  
  &lt;link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen"/&gt;
  &lt;link href="css/custom.css" rel="stylesheet" type="text/css" media="screen"/&gt;
  &lt;!--&lt;link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css" media="screen"/&gt;--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
             &lt;div class="col-lg-9 col-md-4 col-sm-2 col-xs-12 border"&gt;one&lt;/div&gt;
             &lt;div class="col-lg-2 col-md-4 col-sm-8 col-xs-12 border"&gt;two&lt;/div&gt;
             &lt;div class="col-lg-1 col-md-4 col-sm-2 col-xs-12 border"&gt;three&lt;/div&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  
  
  
  &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>custom.css</strong> file:</p>
  
  <pre><code>.border
  {
  border:2px solid;       
  }
  
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12{background-color:red;}
  
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12{background-color:yellow;}
  
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12{background-color:green;}
  
  .col-xs-1,
  .col-xs-2,
  .col-xs-3,
  .col-xs-4,
  .col-xs-5,
  .col-xs-6,
  .col-xs-7,
  .col-xs-8,
  .col-xs-9,
  .col-xs-10,
  .col-xs-11,
  .col-xs-12{background-color:blue;}
  </code></pre>
  
  <p>When the browser is re-sized, the first column should have background color red color, then background color yellow, followed by background color green and then finally background color blue. However when viewing this web page in a browser and re-sizing it, all columns background colors stay blue.</p>
  
  <p>I want to change the colors(overwrite or add styles to predefined classes in bootstrap 3). How can this be achieved?</p>