Bootstrap Modal View on a circle block item

Hi, as described, I have a circle block item and I want to make it to a button and open a modal view with it: <div class="circles-block"> <div class="row"> <div class="col-6"> <div class="circles-block-item"> <span class="circle circle-price">€ {{ $rate->amount_partner }}*</span> {{-- <button class="circle-text btn btn-info btn-lg" data-toggle="modal" data-target="#sevice-charge-{{ $loc_id }}">Per Day</button> --}} <button type="button" class="btn btn-info btn-lg circle-text" data-toggle="modal" data-target="#charge">Per Day</button> <div id="charge" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Price per Day. We keep the right to add a ServiceCharge to that price!</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="col-6"> <div class="circles-block-item" data-translate=""> <span class="circle circle-time">3 ^min</span> <span class="circle-text">Fast check-in</span> </div> </div> </div> </div>