How to have your own style.css and bootstrap at the same time?

Question

So I just got into Bootstrap and I want to use Bootstrap and use my own CSS for stuff I want to re-touch myself. Right now it's like this:

<link rel="stylesheet" href="css/bootstrap.css">

But when I override the stylesheet to be style.css (my css file) Bootstrap stops working. How do I style with CSS and Bootstrap? (without using style in the html.)

Answer 1

you should have something like this..

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">

if you want to edit something from bootstrap, you can copy it's css and edit it...

for example, bootstrap.css has this lines...

.navbar-default .navbar-nav>li>a {
    color: #777;
}

if you want to change that, you should put in your style.css something like this

.navbar-default .navbar-nav>li>a {
    color: #fff;
    font-weight: bold; /* plus additional codes if needed */
}

just be sure that style.css is after bootstrap.css in order of <link> tags.

Answer 2

There are two ways:

1. Create a new style sheet, and place if AFTER the bootstrap

     <link href="css/bootstrap.css" rel="stylesheet"/> <link rel="stylesheet" href="css/style.css" rel="stylesheet"/> 

Reason you need to put it after bootstrap so that it can override the default styles that may have been defined already in bootstrap, by cascading them.

1. Directly edit the bootstrap.css where ever you need to change the styling.