Last active
February 16, 2021 13:37
-
-
Save tklee1975/054db8e12109d6c25caf7e428d6837f2 to your computer and use it in GitHub Desktop.
A Bootstrap Badge showing the using device
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Responsive Badge</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> | |
| <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <h1>Responsive Badge</h1> | |
| <P>The badge determine the device type by the screen width</P> | |
| </div> | |
| <!-- Responsive Badge --> | |
| <div class="fixed-bottom d-inline-flex "> | |
| <div class="d-sm-none badge badge-info ">Mobile</div> | |
| <div class="d-none d-sm-block d-lg-none badge badge-info">Tablet</div> | |
| <div class="d-none d-lg-block badge badge-info ">Desktop</div> | |
| </div> | |
| <!-- Responsive Checking (END)--> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment