[Angular] List group with checkbox and badge?

Topic: [Angular] List group with checkbox and badge?

Giovanni De Stefano priority asked 6 years ago

Hello, how can I align a badge (counter) to the right when I have a checkbox? Basically I would like to have a list group with checkbox and badge Is it possible? Thanks! Giovanni

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Dear Giovanni, Please try code from below:

<div class="row">

<div class="col-md-3 mx-auto my-5">

<ul class="list-group">

<li class="list-group-item d-flex align-items-center">

<input mdbDeepDirective type="checkbox"id="checkbox1">

<label for="checkbox1">Classic checkbox</label>

<span class="badge badge-primary badge-pill ml-3">14</span>

</li>

<li class="list-group-item d-flex align-items-center">

<input mdbDeepDirective type="checkbox"id="checkbox2">

<label for="checkbox2">Classic checkbox</label>

<span class="badge badge-primary badge-pill ml-3">2</span>

</li>

<li class="list-group-item d-flex align-items-center">

<input mdbDeepDirective type="checkbox"id="checkbox3">

<label for="checkbox3">Classic checkbox</label>

<span class="badge badge-primary badge-pill ml-3">1</span>

</li>

</ul>

</div>

</div>

If it's not what you need, please modify this code to achieve your desired behavior. Best Regards, Damian

Giovanni De Stefano priority commented 6 years ago

Hello Damian, Thank you for pointing me to the direction! I modified the code you proposed and adapted it to my needs. Thanks! Giovanni

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

Giovanni De Stefano

87Support score
20Questions 2Answers 0Snippets