Today morning I used btn-xs for one of my button stylings and surprisingly it was not working. btn-sm was fine, btn-lg was good, even only btn was returning the default size, but no hope when using btn-xs!
.png)
It was annoying. So tried Googling to find what happened actually and I have got surprised again. btn-xs was removed from Twitter Bootstrap 4 Alpha 6 release. My reaction was a big 'WHY'! Then I googled a little more and found the logic behind it.
Since Bootstrap is "mobile-first", the xs breakpoint which is less than 576px returns the default behavior and so there is no need to define separate media queries for it. Quite convincing, right?
So, not only in the button sizing, generic bootstrap classes are basically, col-1, col-2...col-12 obviously and don't need to use col-xs-1...12.
What happening here is:
xs (default) > overridden by sm > overridden by md > overridden by lg > overridden by xl
The search should be over by the time now. But I didn't give up as I was still missing my old and ugly -xs- and dying to use it! Then a little trick caught my eyes.
Someone like me, old and ugly, defined a simple CSS class as below:
.btn-xs { padding: .5rem .3rem; font-size: .875rem; line-height: .5; border-radius: .2rem; }
...and Wham!
<button class="btn btn-xs btn-danger">Remove</button>
Oh my pretty 'old and ugly!'
© A.S.M. Shahriar Zahan | www.zahantech.com
[Cover photo by Negative Space from Pexels.com]
No comments:
Post a Comment