Remove all rounded corners from Bootstrap 3 using Less

Sam — Tue, 10 Nov 2015 14:42:33 +0000

A Bootstrap 3 design I am working on requires square rather than the default rounded css corners. The quick and easy solution involves overriding the values of only 5 Less variables in my own Less variables file:

@border-radius-base:    0;
@border-radius-large:   0;
@border-radius-small:   0;
@pager-border-radius:   0;
@badge-border-radius:   0;

There are a lot of other variables in Bootstrap for setting various border radius’, but all of them use one of the above values by default, with the exception of .img-circle – although .img-circle without rounded corners seems an odd idea.

// Perfect circle
.img-circle {
  border-radius: 50%; // set radius in percents
}

For quick reference, here are the other Bootstrap 3 variables (copied straight from Bootstrap’s variables.less) that can be used to customise border-radius in your Less-based web designs together with their default values:

@border-radius-base:        4px;
@border-radius-large:       6px;
@border-radius-small:       3px;

// Allows for customizing button radius independently from global border radius
@btn-border-radius-base:         @border-radius-base;
@btn-border-radius-large:        @border-radius-large;
@btn-border-radius-small:        @border-radius-small;

//** Default `.form-control` border radius
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
@input-border-radius:            @border-radius-base;
//** Large `.form-control` border radius
@input-border-radius-large:      @border-radius-large;
//** Small `.form-control` border radius
@input-border-radius-small:      @border-radius-small;

@navbar-border-radius:             @border-radius-base;

@nav-pills-border-radius:                   @border-radius-base;

@pager-border-radius:                  15px;

@alert-border-radius:         @border-radius-base;

//** Variable for setting rounded corners on progress bar.
@progress-border-radius:      @border-radius-base;

//** List group border radius
@list-group-border-radius:      @border-radius-base;

@panel-border-radius:         @border-radius-base;

//** Thumbnail border radius
@thumbnail-border-radius:     @border-radius-base;

@badge-border-radius:         10px;

The post Remove all rounded corners from Bootstrap 3 using Less appeared first on Hello :).

less – Hello :)

Remove all rounded corners from Bootstrap 3 using Less