Question

I am trying to override some of the default variables provided by bootstrap, particularly some default color and font settings, but only a few them seem to be taking effect. Here’s the top part of my custom.css.scss:

$myOrange:#f89406;
$myBlueDark: #304269;
$myBlue: #91BED4;
$myBlueLight: #D9E8F5;
$myWhite: #eee;
$myGrayBlue: #43464C;

/* colors */
$linkColor: $myBlueDark;
$navbarBackground: $myBlueDark;
$navbarBackgroundHighlight: lighten($navbarBackground, 10);
$navbarLinkColor: darken($myOrange, 10);
$navbarLinkColorHover: $myOrange;
$bodyBackground: #000;
$dropdownBackground: $myBlueDark;
$dropdownLinkColor: $myOrange;
$hrBorder: $myBlue;
$heroUnitBackground: lighten($myOrange, 20);
$dropdownLinkColorHover: $myOrange;

/* typography */
$sansFontFamily: 'PT Sans Narrow', 'Lucida Grande', serif;
$baseFontSize: 16px;

@import 'bootstrap';

// ... rest of the css .... 

Here I have specified values for a few bootstrap variables and expect the font to be be the specified one and the link colors to be the values I’ve set them to.

However, I’ve noticed that only a few of these values work. E.g. the font on my page still stays at bootstrap default (Helvetica Neue) but the navigation bar colors change to the correct values.

I’ve searched around on the internet but none of the solutions I found worked. There was an issue logged which resembles this problem, but it has since been closed: https://github.com/thomas-mcdonald/bootstrap-sass/issues/102

I would go ahead and comment on that thread, but I just wanted to make sure that I am not missing something.

Another thing to notice here, when I explicitly do this later in my custom.css.scss:

@mixin default_font {
  font-family: "PT Sans Narrow", "Lucida Grande", sans-serif;
  font-weight: 400;
}

body {
  padding-top: 60px;
  background-color: #D9E8F5;

  @include default_font;
}

The fonts show up fine. I am specifying background-color here because of the same problem.

I am using bootstrap-sass v2.0.3. Is there something I am doing wrong or missing?

Thanks.

Answer 1

While I was working on a demo app to reproduce my problem: https://github.com/verma/bootstrap-sass-tests I restarted the rails development server.

This seems to have fixed the issue. I am not really certain if this is a permanent fix, so I will wait before I mark this question as answered.