Getting rid of all the rounded corners in Twitter Bootstrap
I love Twitter Bootstrap 2.0 - I love how it's such a complete library... but I want to make a global modification for a very boxy-not-round site, which is to get rid of all the rounded corners in Bootstrap...
That's a lot of CSS to chug through. Is there a global switch, or what would be the best way to find and replace all the rounded's?
I set all element's border-radius to "0" like this:
* {
border-radius: 0 !important;
}
As I'm sure I don't want to overwrite this later I just use !important.
If you are not compiling your less files just do:
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
In bootstrap 3 if you are compiling it you can now set radius in the variables.less file:
@border-radius-base: 0px;
@border-radius-large: 0px;
@border-radius-small: 0px;
In bootstrap 4 if you are compiling it you can disable radius alltogether in the _custom.scss
file:
$enable-rounded: false;
Download the source .less
files and make the .border-radius()
mixin blank.