how to change bootstrap-sass defaults

Question

I am working on a ruby on rails projects using rails 3.2 and bootstrap 3. The gem i am using is bootstrap-sass and it is the most current one. I am trying to change the default attributes of bootstrap's components in my stylesheets file. In the gem's documentation, it stated that I can change certain things of bootstrap before I use the:

@import "bootstrap";

i wanted to create a black border around bootstrap's thumbnails and make the

---

black by default.

So before the import statement, I added:

$thumbnail-border: #000000 5px; $hr-border: #000000;

Then, I placed the variables in the appropriate bootstrap classes and I get nothing. Any help would be much appreciated.

Answer 1

We can't adjust the thumbnail border width through the $thumbnail-border variable. The Bootstrap definition of this variable is "Thumbnail border color". In the bootstrap-sass gem we can see the variable is used here in _thumbnails.scss:

border: 1px solid $thumbnail-border;

So we can only adjust the color and to do so we would only need to have these lines in the app/assets/stylesheets/application.css.scss file:

$thumbnail-border: #000000;
@import "bootstrap";

To override both the size and color we'd have to do something like this in application.css.scss instead:

@import "bootstrap";
.thumbnail {
  border: 5px solid #000000;
}

That will keep the other thumbnail styles but will override the border values.