CODEWITHSUNDEEP
cssbuttontwitter-bootstrapwidth
Trantor Liu
Trantor Liu

Reputation: 9126

Bootstrap link button and button not the same width. How to fix?

I added width property to bootstrap buttons. However, it did not make <a class="btn" /> the same width as <button class="btn" />. Here's the jsFiddle.

This is in Chrome.

Upvotes: 5

Views: 13371

Answers (1)

Moin Zaman
Moin Zaman

Reputation: 25435

Resetting the left and right padding to zero helps but leaves the link button 2px wider.

This is because chrome's user agent applies box-sizing: border-box to button elements which means the padding will be included in the width and not in addition to it.

Setting box-sizing: content-box in your class fixes this 2px difference as well.

See demo.

Upvotes: 9

Related Questions