Topic: btn-block with counter
I see on this page:
https://mdbootstrap.com/docs/jquery/components/buttons-social/
that the btn-lg is accommodated with a counter-lg:
<button type="button" class="btn btn-lg btn-so">
<i class="fab fa-stack-overflow pr-1"></i>
<span>Stack Overflow</span>
</button>
<span class="counter counter-lg">22</span>
However, I don't see anything to accommodate the btn-block width. I've been trying a bunch of different css to make the counter behave on different screen sizes, and I am struggling with getting the counter to sit in the proper location for that treatment of the button.
Is there a solution to the btn-block and counter attached to it? I'm testing a few things here... https://mdbootstrap.com/snippets/jquery/cdenby/1835958
Hi @cdenby,
We don't have a styles to use counter in block buttons. At this moment there are styles for 'lg', 'md' and 'sm', like can you see in our examples: https://mdbootstrap.com/docs/jquery/components/buttons-social/ I will create a task with this topic on our Idea list, and our team will consider it. Thank you very much for your idea.
I think your solution with 'bsolute position and subcontainers' is good. For example in the conteiner:
<div class="container">
<button type="button" class="btn btn-lg btn-block btn-default">
<span>Test 1</span>
</button>
<div class="w100" style="Xbackground-color: blue;text-align:right;">
<span class="counter counter-lg"
style="top: -70px;right:-10px;"
>222</span>
</div>
</div>
Best,
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.14.0
- Device: PC
- Browser: Chrome
- OS: W10
- Provided sample code: No
- Provided link: Yes