Bootstrap + Own Style Sheet [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm fairly new to web development (by fairly new I mean I'm taking a class on it right now), and I had a nicely styled website with my own external style sheet linked and all sorts of nifty javascript built in. However while trying to make my site look even better I decided to try out some bootstrap designs for my nav bar and assumed I could just copy and paste what I had in my original style sheet into the bootstrap.css sheet and link that, and now all my style is gone. Can anyone explain why this would happen/if I'm just making some sort of rookie mistake? Thanks!

Answer 1

You have to place your custom style sheet under the bootstrap.css like so
<!-- Bootstrap Core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet">
<!-- custom stylesheet -->
<link href="css/custom.css" rel="stylesheet">
It is because the HTML reads the css files from up to bottom. Always start with a bootstrap css and from there on you have to tweak inside your css file. So, if your adding a bootstrap nav, you have to make edits in your custom css to change the layout. Maybe you could add some code to be more specific what is going wrong.
Example of a tweak to bootstrap.css:
HTML of a navbar
<nav class="navbar navbar-default">
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>HOME</li>
<li class="dropdown">
PORTFOLIO<span class="caret"></span>
<ul class="dropdown-menu">
<li>WEDDING</li>
<li>LOVE</li>
</ul>
</li>
<li class="dropdown">
ABOUT<span class="caret"></span>
<ul class="dropdown-menu">
<li>US</li>
</ul>
</li>
<li class="dropdown">
BLOG<span class="caret"></span>
<ul class="dropdown-menu">
<li>STORIES</li>
<li>ARCHIVE</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Custom CSS tweaks
/* BOOTSTRAP TWEAKS */
.navbar-default {
background: none;
border: none;
}
.navbar-default .navbar-nav li a {
color: #9c9c9c;
}
.caret {
border-top-color: #9c9c9c;
border-bottom-color: #9c9c9c;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: black;
text-decoration: underline #9c9c9c;
background: none;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #555555;
background: none;
}
.dropdown-menu {
list-style: none;
background: none;
border: none;
-webkit-box-shadow:none;
box-shadow: none;
}