CODEWITHSUNDEEP
htmlcsstwitter-bootstrapodoo-8
Jas
Jas

Reputation: 3

Overriding Bootstrap CSS for 'btn-xs' With New Class

Hi I am new to Bootstrap and would like to override 'btn-xs' with new height width and padding. Essentially making th button smaller than it is and also the text will be reduced too.

I have tried adding a new class 'custom' on the following line of code but it does not take affect.

<button class="btn btn-default btn-xs custom" style=""> Filter</button>

Bellow is my custom css:

custom {
font-size: 10px;
padding: 1px 10px}

I'm probably doing something extremely stupid. Thanks for your help.

Upvotes: 0

Views: 2847

Answers (2)

eye-wonder
eye-wonder

Reputation: 1193

To avoid using !important you can try to be more spesific.

The button is probably affected by this rule set in the bootstrap CSS:

.btn-group-xs>.btn, .btn-xs { ... }

Try:

.btn-group-xs>.btn.custom, .btn-xs.custom {
font-size: 10px;
padding: 1px 10px}

Upvotes: 1

Lucho
Lucho

Reputation: 1

Try with !important, for example font-size: 10px !important

Upvotes: 0

Related Questions