Need Help Cleaning CSS Script / Overriding Bootstrap

Question

I'm NOT a computer programmer, but I've been assigned the task of designing a webpage. Here's what I have:

 <!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>Example</title>

    <!-- Bootstrap -->
     <link href="file:///Users/Theresa/Desktop/1page/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="all">

     <!---Custom -->
     <link href="file://localhost/Users/Theresa/Desktop/1page/custom.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
<nav class="navbar navbar-inverse">
    <div class="navbar-header">
     shastic
  </div>
</nav>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Shastic</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Text</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Text</a></li>
      </ul>
    </div>
  </div>
</nav>


<div class="container" style="background: #f1f1f1;;">
  <div class="row">
    <div class="col-sm-3 col-md-3 col-lg-3" style="background-color:#f1f1f1;">
<h1 style="  font-weight: 300; font-size: 72px; color: #666666; margin-bottom: -22px;">01</h1>
 <h2 style="font-size: 26px; font-weight: 300; color: #666666; text-transform: uppercase; -webkit-font-smoothing: antialiased;">overview</h2>

<p style="font-size: 12px;
  -webkit-font-smoothing: antialiased;">
Jump to same section in another guide:</p>
<a href="#" style="color: #0055CC; font-family: inherit; font-size:12px; -webkit-font-smoothing: antialiased; margin-right:-">Web</a> | <a href="#" style="color: #0055CC; font-family: inherit; font-size:12px; -webkit-font-smoothing: antialiased; margin-right:-">Homepage</a> 
</div>

<div class="col-sm-9 col-md-3 col-lg-3" style="background-color:#f1f1f1; font-size: 20px; font-weight: 300; color: #666666;-webkit-font-smoothing: antialiased; display: block; margin-right:-10px; margin-top:50px; text-align: center;">
The designs in this guide cover the visual treatment and interaction details for the mobile SSO pages from the below the top navigation bar. They also provide an overview of how the navigation works for Mobile SSO pages. 
</div>

    <div class="ol-sm-3 col-md-6 col-lg-6" style="background-color:#f1f1f1; padding: 20px;">
     <img src="file:///Users/Theresa/Desktop/1page/images/iphone.png"><BR>
    </div>


  </div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="file:///Users/Theresa/Desktop/1page/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

Basically, my HTML is really complicated because I can't for the life of me figure out how to override bootstrap's CSS (fonts,etc.) for the container section. Another problem I'm having is I can't change the OVERALL body background color from white to another color.

Here's my CSS:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
    <HEAD>
        <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
    </HEAD>
    <body>

<style>

/* navbar */
.navbar.navbar-default {
    background-color: #0078B1;
    border-color: #E7E7E7;
}

.navbar.navbar-inverse {
    background-color: #003B6A;
    border-color: #003B6A;
    margin-bottom: -20px;
    padding-bottom: 20px;
}

.container-fluid{
    background-color: #0078B1;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
  -webkit-font-smoothing: antialiased;
  text-align: right;
}
/* title */
.navbar-default .navbar-brand {
    color: #FFF;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #0078B1;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: #FFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #FFF;
    text-decoration: underline;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #FFFFFF;
    background-color: #0078B1;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #FFF;
    background-color: #0078B1;
}
/* dropdown and caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #FFF;
    border-bottom-color: #FFF;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #0078B1;
    border-bottom-color: #0078B1;
    background-color: #0078B1;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #0078B1;
    border-bottom-color: #0078B1;
}
/* mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #FFF;
    }

/*body*/

.container{background-color: #0078B1;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
  -webkit-font-smoothing: antialiased;
  text-align: right;}



</style>
</body>
</HTML>

Any help appreciated. thank you very much.

why are you trying to override bootstrap? – chiliNUT Jun 03 '15 at 01:50 — chiliNUT, Jun 03 '15 at 01:50
to change colors of the nav bar, etc. – Teresa Jun 03 '15 at 01:54 — Teresa, Jun 03 '15 at 01:54
have you tried making the styles `!important`? – chiliNUT Jun 03 '15 at 01:56 — chiliNUT, Jun 03 '15 at 01:56

score 1 · Answer 1 · edited May 23 '17 at 12:14

Change navbar color in Twitter Bootstrap 3

Changing the navbar color has been discussed in detail at this link

Bootstrap comes with light/dark options by default - however if you want custom colour best read the details in the link above so were not duplicating too much info here.

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

Need Help Cleaning CSS Script / Overriding Bootstrap

1 Answers1