Bootstrap : existe-t-il des class CSS pour pointer cursor en termes de bouton ou de lien ?

Le framework Bootstrap a beaucoup évolué depuis sa création en 2011 par la société Twitter. D'abord utilisé par le réseau social, il s'est répandu dans le monde et a connu 4 versions majeures avec des changements régulièrement. Lors des premières versions de Bootstrap 4, il n'existait pas de classe spécifique pour adapter la propriété "cursor:pointer". Cette propriété permet de modifier le curseur de la souris pour le remplacer par une main. On l'utilise généralement pour indiquer les liens.

Si vous travaillez avec une version de Bootstrap 4 antérieure à juin 2020, alors vous constaterez que lorsque vous utilisez un bouton, le curseur de la souris n'est pas modifié. Si vous souhaitez modifier le curseur, nous vous conseillons de créer votre propre classe CSS que vous ajouterez ensuite dans le code HTML de votre site.

# Votre fichier CSS
.cursor-pointer {
   cursor: pointer;
}
<!-- page HTML -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-success">Bouton sans curseur</button>
<button type="button" class="btn btn-success cursor-pointer">Bouton avec curseur</button>

Depuis juin 2020, Bootstrap 4 permet de nouveau d'afficher un curseur. Vous devez pour cela utiliser l'attribut "role". Cet attribut sémantique introduit avec HTML5 permet de définir la structure de vos pages. Il permet d'adapter le site pour une navigation plus facile pour les personnes handicapées. En indiquant la valeur "button", vous indiquez que l'élément est un bouton qui va interagir avec la page. Le framework va alors modifier le curseur de la souris pour indiquer le bouton.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" role="button" class="btn btn-success">Bouton avec curseur</button>

Bootstrap