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?
This question is related to
css
twitter-bootstrap
twitter-bootstrap-2
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>
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
If you want to avoid recompiling the all thing, just add .btn {border-radius: 0;}
to your CSS.
There is a very easy way to customize Bootstrap:
This question is pretty old however it is highly visible on search engines even in Bootstrap 4 related searches. I think it worths to add an answer for disabling the rounded corners, BS4 way.
In the _variables.scss
there are several global modifiers exists to quickly change the stuff such as enabling or disabling flex gird system, rounded corners, gradients etc. :
$enable-flex: false !default;
$enable-rounded: true !default; // <-- This one
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: false !default;
Rounded corners are enabled
by default.
If you prefer compiling the Bootstrap 4 using Sass and your very own _custom.scss
like me (or using official customizer), overriding the related variable is enough:
$enable-rounded : false
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;
code,
kbd,
pre,
.img-rounded,
.img-thumbnail,
.img-circle,
.form-control,
.btn,
.btn-link,
.dropdown-menu,
.list-group-item,
.input-group-addon,
.input-group-btn,
.nav-tabs a,
.nav-pills a,
.navbar,
.navbar-toggle,
.icon-bar,
.breadcrumb,
.pagination,
.pager *,
.label,
.badge,
.jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.well,
.modal-content,
.tooltip-inner,
.popover,
.popover-title,
.carousel-indicators li {
border-radius:0 !important;
}
When using Bootstrap >= 3.0
source files (SASS
or LESS
) you don't have to get rid of the rounded corners on everything if there is just one element that is bugging you, for example, to just get rid of the rounded corners on the navbar, use:
$navbar-border-radius: 0;
@navbar-border-radius: 0;
However, if you do want to get rid of the rounded corners on everything, you can do what @adamwong246 mentioned and use:
$baseBorderRadius: 0;
@baseBorderRadius: 0;
Those two settings are the "root" settings from which the other settings like navbar-border-radius
will inherit from unless other values are specified.
For a list all variables check out the variables.less or variables.scss
.btn {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
Or define a mixin and include it wherever you want an unrounded button.
@mixin btn-round-none {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.btn.btn_1 {
@inlude btn-round-none
}
The code posted above by @BrunoS did not work for me,
* {
.border-radius(0) !important;
}
what i used was
* {
border-radius: 0 !important;
}
I hope this helps someone
You may also want to have a look at FlatStrap. It provides a Metro-Style replacement for the Bootstrap CSS without rounded corners, gradients and drop shadows.
Download the source .less
files and make the .border-radius()
mixin blank.
I have create another css file and add the following code Not all element are included
/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid, .panel {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
border-collapse: collapse !important;
background-image: none !important;
}
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"/>_x000D_
<a class="btn btn-primary">Regular Rounded Corners</a>_x000D_
<a class="btn btn-primary rounded-pill">Pill Corners</a>_x000D_
<a class="btn btn-primary rounded-0">Square Corners</a>
_x000D_
Or you could add this to the html of the element you want to remove the border radius from (this way you wouldn't be removing it from all buttons / elements):
style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"
Source: Stackoverflow.com