Overwrite Bootstrap CSS rules in webpage?

1

As the codepen I posted below, whenever I include bootstrap library in my page it will mess up some of the CSS i wrote.
In this case:

  1. Elements inside the nav bar is not properly centered.
  2. The a tag is becoming dark blue when I select them.

How do I write my css so that I can overrule this 2 error that bootstrap gave me? I believe it is in the default setting of bootstrap?
Codepen link

2

Load Bootstrap first, then load your project CSS second.
On your project CSS, you can override some of the BS properties you want.

For example, on one project I have this section on top of my project CSS

/******* LESS VARIABLES SECTION ***********/
@linkcolor: #0033FF;
@buttoncolor: #699ECB;
@buttoncolor-hover: #FC751B;

@default-font: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
@footer-font: "omnes-pro",sans-serif;

@gmap-height: 400px; 

/******* BOOTSTRAP3 OVERRIDE SECTION ***********/
a {
  color: @linkcolor;
  text-decoration: none;
}

a:focus{
  outline: 0;
  border: none;
}

hr {
  margin-top: 2em;
  margin-bottom: 2em;
  border: 0;
  border-top: 1px solid #dae2e9;
}

.carousel-control {
  width: 100px;
}
3

I tried add these to my css and it does not work. Even I added them at all the way top.
a{ color: inherit; text-decoration: none; } a:focus{ outline: 0; border: none; }

4

Also this is how I added all the link in my real project, do you see anything wrong here?

Screen Shot 2017-05-19 at 1.27.41 AM.png1687×680 110 KB

5

Have you tried setting color for
a:visited

6

Oh… I did not know about a:visited, it worked, the text are not white after I key in a:visited{color:inherit;}

But text-decoration: none; still does not work. Whenever I click on the text there is still an underline on it.

7

Open up Google Chrome inspector and inspect which .css file is taking effect. That way you can understand where it’s coming from.

You may have no choice but to do

text-decoration: none !important;
1 Like
8

I see thanks! :blush: