What are the design implications of using Bootstrap?

What are the design implications of using Bootstrap?

I am momentarily interested specifically in its implications with regards to font families and weights, but am also generally curious about the broader question.

For example: In building the site below, I’m finding that when the bootstrap code is included, the css which would otherwise give me the desired styling on the “question” and “answer” classes of <p> elements is nullified by the bootstrap code. (When I comment out the to Bootstrap in the index.html file, the styles I want come back.)

So, does this mean I’ll have to use something like !important every time I want to apply some custom, non-Bootstrap stylings?

WebFontConfig = {
  google: {
    families: ['Open+Sans:300,400,700:latin']
(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
body {
  overflow: hidden;

p {
  font-family: "Open Sans", sans-serif;
  font-size: 20px;

.question {
  font-weight: bold;

.answer {
  font-weight: normal;

#header {
  margin: 0px;

.navbar-brand {
  font-family: "Open Sans", sans-serif;

.nav {
  font-family: "Open Sans", sans-serif;

#mainPane {
  margin: 0px;
  padding: 20px;
  height: 100vw;
  background-color: white;
<link target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>

<nav id="header" 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>
      <a class="navbar-brand" target="_blank" rel="nofollow" href="# ">Brand</a>

    <!-- 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 class="active"><a target="_blank" rel="nofollow" href="#">Home<span class="sr-only">(current)</span > </a></li>
        <!-- <li><a target="_blank" rel="nofollow" href="#"> anotherListItem </a></li> -->
        <!-- <li><a target="_blank" rel="nofollow" href="#"> aThirdListItem </a></li> -->
    <!-- /.navbar-collapse -->
  <!-- /.container-fluid -->

<div id="mainPane" class="jumbotron">
  <p class="question">Q: Question 1</p>
  <p class="answer">A: Answer 1</p>


You seem to be running into an issue with your selector specificity. While you are importing your own custom css last, when another selector is more specific in a different stylesheet, those style will win out and be rendered on the page. CSS-Tricks has a seminal article on how specificity works and would be a good reference to help understand what is happening with your code.

I turned your code into a codeply project that you can experiment with and get a more hands-on understanding of what happens when you change the specificity your selectors.

Also, don’t be afraid to to open up the developer tools on your browser to see what’s going on. This is a picture taken from Chrome’s tools. You can see the styles and which ultimately are used when rendering your view. Properties that are crossed-out in this case might mean that another rule prevailed.