btn-block with counter


Topic: btn-block with counter

cdenby pro asked 5 years ago

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


Mateusz Łubianka staff answered 5 years ago

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,


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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