Getting Rid of All the Rounded Corners in Twitter Bootstrap

Getting rid of all the rounded corners in Twitter Bootstrap

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;

Correct way to create rounded corners in Twitter Bootstrap

I guess it is what you are looking for: http://blogsh.de/tag/bootstrap-less/

@import 'bootstrap.less';
div.my-class {
    .border-radius( 5px );
}

You can use it because there is a mixin:

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

For Bootstrap 3, there are 4 mixins you can use...

.border-top-radius(@radius);
.border-right-radius(@radius);
.border-bottom-radius(@radius);
.border-left-radius(@radius);

or you can make your own mixin using the top 4 to do it in one shot.

.border-radius(@radius){
    .border-top-radius(@radius);
    .border-right-radius(@radius);
    .border-bottom-radius(@radius);
    .border-left-radius(@radius);
}

Bootstrap 3 Jumbotron Has Rounded Edges (How Do I Get Rid of Them?)

The Bootstrap 3 Jumbotron has the class:

.container .jumbotron {
    border-radius: 6px ;
}

You will want to set that to border-radius: 0px;, but I would suggest adding that same class to a separate stylesheet (being called after bootstrap.css) and override it, rather than changing the bootstrap.css file directly.

.container .jumbotron {
    border-radius: 0 !important;
}

Removing border-radius in Bootstrap 4 | list-group-item

Some of the class are predefined in bootstrap as per the documentation class="rounded-0" which will set border-radius to 0

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid">   <ul class="list-group">     <li class="list-group-item rounded-0">Cat</li>     <li class="list-group-item rounded-0">Dog</li>     <li class="list-group-item rounded-0">Rabbit</li>     <li class="list-group-item rounded-0">Alpaca</li>   </ul> </div>

Removing rounded corners from pagination

Option 1 (recommended) :

.pagination>li:first-child>a, .pagination>li:first-child>span {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

Option 2 (recommended) :

.pagination>li:first-child>a, .pagination>li:first-child>span,
.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-radius: 0;
}

Option 3 (not recommended) :

.pagination>li>a, .pagination>li>span {
    border-radius: 0 !important;
}

Option 4 (not recommended) :

.pagination * {
    border-radius: 0 !important;
}

---

Note :

I recommend AGAINST these last two options, because !important ignores specificity, which should be avoided as much as you can, because it makes your code more difficult to maintain! However, it does allow you to use smaller selectors!

As makshh explains, the reason your code doesn't work, is because it doesn't have the correct specificity.

---

Related Topics