How to change shape of Bootstrap button

Question

How can I change the round corner button default in bootstrap into normal rectangle button? Now I can only change the size color or the font of the button

Answer 1

The best practice is to create a custom class so you don't change your base CSS in the event you want to use it elsewhere, then apply your changes.

In the example I use .btn.btn-custom-lg, .btn.btn-custom-sm, .btn.btn-custom-xs but if you only want to change something like the border-radius for all buttons you can make one global class to apply to the button: .btn-square { border-radius: 0; }

See working example.

/*Specific Cases*/

.btn.btn-custom-lg,
.btn.btn-custom-sm,
.btn.btn-custom-xs {
  border-radius: 0;
}
/*Global*/

.btn.btn-square {
  border-radius: 0;
}

  

  
Specific
  
Button Default
  
Button Default
  
Button Default
  

  
Global
  
Button Default
  
Button Default
  
Button Default