How to add bootstrap in apex:commandButton?

Sometimes, we need to add css in apex:commandButton with bootstrap style.

Code

Sometimes, we need to add css in apex:commandButton with bootstrap style, however, there will have some conflictings between Bootstrap and visualforce css.

<apex:commandButton style="color: #fff; background-color: #5cb85c; border-color: #4cae4c;user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation;" 
                        value="Upload" id="theButton" action="{!uploadCSVByBatch}" rendered="{!batchMode}" />

And the result will be:

In normal case,

<button type="button" style="color: #fff; background-color: #f0ad4e; border-color: #eea236; display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap;user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px;" > 
                Cancel 
</button>

Result

And the result will be:

Besides, this css style can also add in input with button type.

<input type="button" onclick="{!c.deleteLine}" id="{!'Delete_'+line.Id}" value="Delete" > </input>

Reference

*Bootstrap W3C: W3schools Bootstrap