Getting rid of all the rounded corners in Twitter Bootstrap

Question

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 al

Answer 1

if you are using bootstrap you can just use the bootstrap class="rounded-0" to make the border with the sharp edges with no rounded corners <button class="btn btn-info rounded-0"">Generate</button></span>

Answer 2

With SASS Bootstrap - if you are compiling Bootstrap yourself - you can set all border radius (or more specific) simply to zero:

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;

Answer 3

If you are using Bootstrap version < 3...

With sass/scss

$baseBorderRadius: 0;

With less

@baseBorderRadius: 0;

You will need to set this variable before importing the bootstrap. This will affect all wells and navbars.

Update

If you are using Bootstrap 3 baseBorderRadius should be border-radius-base

Answer 4

If you want to avoid recompiling the all thing, just add .btn {border-radius: 0;} to your CSS.

Answer 5

Bootstrap has it's own classes for borders including .rounded-0 to get rid of rounded corners on any element including buttons

https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary">Regular Rounded Corners</a>
<a class="btn btn-primary rounded-pill">Pill Corners</a>
<a class="btn btn-primary rounded-0">Square Corners</a>

Answer 6

There is a very easy way to customize Bootstrap:

1. Just go to http://getbootstrap.com/customize/
2. Find all "radius" and modify them as you wish.
3. Click "Compile and Download" and enjoy your own version of Bootstrap.