CODEWITHSUNDEEP
twitter-bootstrapbutton
Gavin Niu
Gavin Niu

Reputation: 1335

How to change shape of Bootstrap button

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

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

.btn-sm,
.btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

Appreciate your help

Upvotes: 17

Views: 52153

Answers (2)

Saif Islam
Saif Islam

Reputation: 241

Add the class rounded-0, as explained on GetBootstrap.com:

<a href="tel:+447447218297" class="btn btn-lg btn-success rounded-0"><img src="">Call Now</a>

Upvotes: 22

vanburen
vanburen

Reputation: 21663

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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <hr>
  <h3>Specific</h3>
  <div class="btn btn-default btn-lg btn-custom-lg">Button Default</div>
  <div class="btn btn-default btn-sm btn-custom-sm">Button Default</div>
  <div class="btn btn-default btn-xs btn-custom-xs">Button Default</div>
  <hr>
  <h3>Global</h3>
  <div class="btn btn-default btn-lg btn-square">Button Default</div>
  <div class="btn btn-default btn-sm btn-square">Button Default</div>
  <div class="btn btn-default btn-xs btn-square">Button Default</div>
</div>

Upvotes: 17

Related Questions