Question

When using custom css along with Twitter Bootstrap that overwrites some styles is it better to place the custom css link before or after the bootstrap-responsive css?

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

<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">

or

<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">

and what are the pros and cons of each?

If I edit the body padding after the bootstrap-responsive.css like so:

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

/* Add padding for navbar-top-fixed */
body {
  padding-top: 60px;
  padding-bottom: 40px;
}

Then I must also fix the responsive layout using a media query as I have overwritten the global body style.

/* Fix to remove top padding for narrow viewports */
@media (max-width: 979px) {
  body {
    padding-top: 0;
  }
}

Answer 1

It’s usually better to place your custom CSS after the Bootstrap CSS. I’d imagine that you’re wanting the custom CSS to override the Bootstrap CSS.

The advantages of placing your custom styles after Bootstraps is that you can change anything that is set in Bootstraps CSS by using the same selectors that they do. Making it very easy to change minor things. If you use the same selector then the browser will use the last rules applied to an element.

I can’t really see any advantages of placing the Bootstrap CSS after your custom CSS, it wouldn’t really make much sense to write your own styles and then override them with Bootstrap’s…

For example, this isn’t bootstrap CSS, but it would work the same way, if you had the following in your head section:

<link href="framework.css" rel="stylesheet" type="text/css" />
<link href="custom-styles.css" rel="stylesheet" type="text/css" />

Then in framework.css you had the following:

div.row {
    border: 1px solid #eee;
    border-radius: 3px;
    margin-bottom: 50px;
    padding: 15px;
}

But then you realised you wanted to add a red background (why oh why…) and change the border radius, you could have the following in custom-styles.css:

div.row {
    background-color: red;
    border-radius: 10px;
}

The resulting CSS applied to the element would be this:

div.row {
    background-color: red;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 50px;
    padding: 15px;
}

Because the styles from custom-styles.css override the existing ones in framework.css and the additional ones are applied too! 🙂