Cannot alter Bootstrap button - css

Question

<button class="btn btn-default">Click me</button>
I want to alter this button by reducing it's padding to 0px, so I added an extra class no-padding in style.css
.no-padding {
padding-left: 0;
padding-right: 0;
}
and called it like
<button class="btn btn-default no-padding">Click me</button>
But still I'm getting the same class
and If I use inline style statement, it works perfectly, but I don't want to do it in that way
Thanks!!

Answer 1

for that you need to know specificity concept of CSS
you can do like this
button.no-padding {
padding-left: 0;
padding-rigt: 0;
}
and your CSS works fine. You see difference in below snippet
button.no-padding {
padding-left: 0;
padding-right: 0;
}
.no-padding1 {
padding-left: 0;
padding-right: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button class="btn btn-default no-padding">Click me</button>
<button class="btn btn-default no-padding1">Click me</button>

Answer 2

You can use Bootstrap padding classes.
1 > px : padding at left and right. 2 > py : padding at top and
botton.
See more examples given below
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
Your Button as it is :
<button class="btn btn-default ">Click me</button>
<br/>
<br/>
Button with px class :
<button class="btn btn-primary px-0">Click me</button>
<br/>
<br/>
Button with py class
<button class="btn btn-warning py-0">Click me</button>
<br/>
<br/>
Button with px and py class :
<button class="btn btn-success px-0 py-0">Click me</button>
<br/>
<br/>
Button with pl class
<button class="btn btn-danger pl-0">Click me</button>
<br/>
<br/>
Button with pr class :
<button class="btn btn-success pr-0">Click me</button>