Openlayers ol-ext Custom Bootstrap button not working

Question

So I created 2 bootstrap buttons, one for print/export the map canvas and the other is for Map Coordinate searching. I'm using Openlayers 3 and this extension ol-ext (http://viglino.github.io/ol-ext/)

HTML:

<button class="btn btn-sm btn-light mx-1 custom-print" id="custom-print">
   <i class="fas fa-expand"></i>
</button>

<button class="btn btn-sm btn-primary mx-1 search-coordinate" id="search-coordinate">
   <i class="fas fa-map"></i>
</button>

JavaScript:

  var printControl = new ol.control.Print({
      className: 'custom-print',
      target: document.getElementById('custom-print'),
  });
  map.addControl(printControl);

  var search = new ol.control.SearchGPS();

   // Select feature when click on the reference index
   search.on('select', function(e){
       map.getView().animate({
       center:e.search.coordinate,
       zoom: Math.max (map.getView().getZoom(),22)
      });
   });

So the problem is they're not working it's like it is not passing the functions of the default to the custom buttons. The print button only works if I'm gonna put a custom CSS but if I put the classname and id to a bootstrap button, it's not functioning. While for the searchGPS button, it's not working at all even I set for a target ID.