Bootstrap element styling

Bootstrap styles <abbr> elements with a light dotted border along the bottom and reveal the full text on hover.

The HTML <abbr> element provides markup for abbreviations or acronyms, such as NASA, HTTPS, ICC, etc.

You can try to run the following to understand how Bootstrap styles the <abbr> element −

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap abbr styling</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </head>
   <body>
      <abbr title = "National Aeronautics and Space Administration">NASA</abbr><br>
      <abbr title = "International Cricket Council">ICC</abbr>
   </body>
</html>

Chandu yadav

Updated on: 12-Jun-2020

405 Views

Kickstart Your Career

Get certified by completing the course

Get Started