Change Bootstrap SASS border-radius (and other mixins) - Rails

Question

I'm using the rails gem Bootstrap SASS, and was wondering how I can overwrite some of the mixins. Specifically border radius and the like.

I thought I could simply overwrite it like:

@import "bootstrap";
@import "bootstrap-responsive";

    @mixin border-radius($radius: 1px) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
              border-radius: $radius;
    }

But that doesn't seem to do squat! Any ideas?

Bootstrap SASS - Mixins

Campagna

Answer 1

That is actually a mixin with an argument, SASS calls it a "mixin" but it's really a parametric or dynamic mixin. But to clarify your question, do you want to change the default value for the border radius mixin radius, or do you want to do it on the fly on a class by class basis? If you are looking to change the default you should do it directly in the Bootstrap mixin.scss file.

But if you want the latter, you just add the mixin to any class the same as you would add a property such as font-size, but then you pass in the value you wish to declare each time you use the mixin. Like this:

.giant-box {  
   width: 400px;
   height: 400px;
   background-color: #900;
   @include border-radius(20px);  
}

.small-box {  
   width: 10px;
   height: 10px;
   background-color: #900;
   @include border-radius(3px);  
}

In LESS it would look like this:

.giant-box {  
   width: 400px;
   height: 400px;
   background-color: #900;
   .border-radius(20px);  
}

Arvad

I wanted to know if I could change the default value. I don't have direct access to the mixin file for bootstrap (I'm using a gem that inserts it into middleware), but it seems I should maybe include manually in the assets. Thanks for you help, this clears it up! – Campagna

I am getting "undefined mixin 'border-radius'" (rails bootstrap-sass gem) – Alpenhorn

Answer 2

Check the Customize and Download page on the Bootstrap site. There are list of LESS variables listed on the page.

Usually the SASS variables are the same but with '$' instead of a '@'. To customize bootstrap without having to re-download everything after changing one or two variables you can instead do this in your .scss file:

$border-radius-base: 0;
@import "bootstrap";

Bankrupt

This does not work in Bootstrap 5.2. At least not for me. – Freethinker

Answer 3

If you want to overwrite the Bootstrap variables, you need to do so before the import. E.g.

$baseFontFamily: $serifFontFamily; // Use serif fonts instead of sans-serifs
@import "bootstrap";
@import "bootstrap-responsive";

Biotype

Answer 4

This is particularly late to the game but in Bootstrap 4 you can overwrite the enable-rounded Sass variable like so:

@enable-rounded    false;
@import "~bootstrap/scss/bootstrap" /*lots of ways to do this step, see other answers herein*/

Bootstrap Sass Options Documentation

Selfpronouncing

Answer 5

You can override .rounded class border radius value via sass.

Just define the radius:

$border-radius: 18px;

Bailey