screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 5 Modal Example</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> <style> .container { margin-top: 20px; } .btn { margin-bottom: 5px; display: flex; align-items: center; } .btn i { margin-right: 5px; } </style> </head> <body> <h3>Bootstrap Button Icon with Text</h3> <div class="row"> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-house-fill"></i> Home</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-plus"></i> Add</button> </div> <div class="col-sm-3"> <button class="btn btn-danger"><i class="bi bi-save"></i> Save</button> </div> <div class="col-sm-3"> <button class="btn btn-warning"><i class="bi bi-pencil"></i> Edit</button> </div> </div> <div class="row"> <div class="col-sm-3"> <button class="btn btn-info"><i class="bi bi-download"></i> Download</button> </div> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-trash"></i> Delete</button> </div> <div class="col-sm-3"> <button class="btn btn-light"><i class="bi bi-upload"></i> Upload</button> </div> <div class="col-sm-3"> <button class="btn btn-dark"><i class="bi bi-search"></i> Search</button> </div> </div> <div class="row"> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-envelope"></i> Email</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-gear"></i> Settings</button> </div> <div class="col-sm-3"> <button class="btn btn-danger"><i class="bi bi-share"></i> Share</button> </div> <div class="col-sm-3"> <button class="btn btn-warning"><i class="bi bi-arrow-clockwise"></i> Refresh</button> </div> </div> <div class="row"> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-calendar"></i> Calendar</button> </div> <div class="col-sm-3"> <button class="btn btn-info"><i class="bi bi-printer"></i> Print</button> </div> <div class="col-sm-3"> <button class="btn btn-warning"><i class="bi bi-arrow-down"></i> Arrow Down</button> </div> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Arrow Left</button> </div> <div class="col-sm-3"> <button class="btn btn-info"><i class="bi bi-arrow-right"></i> Arrow Right</button> </div> <div class="col-sm-3"> <button class="btn btn-light"><i class="bi bi-arrow-up"></i> Arrow Up</button> </div> <div class="col-sm-3"> <button class="btn btn-dark"><i class="bi bi-soundwave"></i> Audio</button> </div> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-bell"></i> Bell</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-book"></i> Book</button> </div> <div class="col-sm-3"> <button class="btn btn-danger"><i class="bi bi-bookmark"></i> Bookmark</button> </div> <div class="col-sm-3"> <button class="btn btn-warning"><i class="bi bi-briefcase"></i> Briefcase</button> </div> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-calendar"></i> Calendar</button> </div> <div class="col-sm-3"> <button class="btn btn-info"><i class="bi bi-camera"></i> Camera</button> </div> <div class="col-sm-3"> <button class="btn btn-light"><i class="bi bi-check"></i> Check</button> </div> <div class="col-sm-3"> <button class="btn btn-dark"><i class="bi bi-exclamation-circle-fill"></i> Circle Exclamation</button> </div> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-info-circle"></i> Circle Info</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-question-circle"></i> Circle Question</button> </div> <div class="col-sm-3"> <button class="btn btn-danger"><i class="bi bi-x"></i> Close</button> </div> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-chat"></i> Comment</button> </div> <div class="col-sm-3"> <button class="btn btn-info"><i class="bi bi-clipboard"></i> Copy</button> </div> <div class="col-sm-3"> <button class="btn btn-light"><i class="bi bi-credit-card"></i> Credit Card</button> </div> <div class="col-sm-3"> <button class="btn btn-dark"><i class="bi bi-scissors"></i> Cut</button> </div> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-speedometer2""></i> Dashboard</button> </div> <div class=" col-sm-3"> <button class="btn btn-success"><i class="bi bi-file"></i> Document</button> </div> <div class="col-sm-3"> <button class="btn btn-danger"><i class="bi bi-download"></i> Download</button> </div> <div class="col-sm-3"> <button class="btn btn-warning"><i class="bi bi-edit"></i> Edit</button> </div> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-envelope"></i> Envelope</button> </div> <div class="col-sm-3"> <button class="btn btn-info"><i class="bi bi-exclamation"></i> Exclamation</button> </div> <div class="col-sm-3"> <button class="btn btn-light"><i class="bi bi-external-link"></i> External Link</button> </div> <div class="col-sm-3"> <button class="btn btn-dark"><i class="bi bi-eye"></i> Eye</button> </div> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-file"></i> File</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-film"></i> Film</button> </div> <div class="col-sm-3"> <button class="btn btn-danger"><i class="bi bi-folder"></i> Folder</button> </div> <div class="col-sm-3"> <button class="btn btn-warning"><i class="bi bi-fonts"></i> Font</button> </div> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-globe"></i> Globe</button> </div> <div class="col-sm-3"> <button class="btn btn-info"><i class="bi bi-graph-up"></i> Graph</button> </div> <div class="col-sm-3"> <button class="btn btn-light"><i class="bi bi-grid"></i> Grid</button> </div> <div class="col-sm-3"> <button class="btn btn-dark"><i class="bi bi-heart"></i> Heart</button> </div> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-bi bi-question-circle-fill"></i> Help</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-house"></i> Home</button> </div> <div class="col-sm-3"> <button class="btn btn-danger"><i class="bi bi-info"></i> Info</button> </div> <div class="col-sm-3"> <button class="btn btn-warning"><i class="bi bi-key"></i> Key</button> </div> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-laptop"></i> Laptop</button> </div> <div class="col-sm-3"> <button class="btn btn-info"><i class="bi bi-alt"></i> List Alt</button> </div> <div class="col-sm-3"> <button class="btn btn-light"><i class="bi bi-lock"></i> Lock</button> </div> <div class="col-sm-3"> <button class="btn btn-dark"><i class="bi bi-envelope"></i> Mail</button> </div> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-map"></i> Map</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-fullscreen"></i> Maximize</button> </div> <div class="col-sm-3"> <button class="btn btn-warning"><i class="bi bi-menu-button-wide-fill"></i> Menu</button> </div> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-envelope"></i> Message</button> </div> <div class="col-sm-3"> <button class="btn btn-info"><i class="bi bi-dash-circle"></i> Minus</button> </div> <div class="col-sm-3"> <button class="btn btn-light"><i class="bi bi-cash"></i> Money</button> </div> <div class="col-sm-3"> <button class="btn btn-dark"><i class="bi bi-moon"></i> Moon</button> </div> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-music-note"></i> Music</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-segmented-nav"></i> Navicon</button> </div> <div class="col-sm-3"> <button class="btn btn-danger"><i class="bi bi-paperclip"></i> Paperclip</button> </div> <div class="col-sm-3"> <button class="btn btn-warning"><i class="bi bi-pause"></i> Pause</button> </div> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-pencil"></i> Pencil</button> </div> <div class="col-sm-3"> <button class="btn btn-info"><i class="bi bi-phone"></i> Phone</button> </div> <div class="col-sm-3"> <button class="btn btn-light"><i class="bi bi-image"></i> Picture </button> </div> <div class="col-sm-3"> <button class="btn btn-dark"><i class="bi bi-plus"></i> Plus</button> </div> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-power"></i> Power Off</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-printer"></i> Print</button> </div> <div class="col-sm-3"> <button class="btn btn-danger"><i class="bi bi-puzzle-fill"></i> Puzzle Piece</button> </div> <div class="col-sm-3"> <button class="btn btn-warning"><i class="bi bi-question"></i> Question</button> </div> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-quote"></i> Quote Left</button> </div> <div class="col-sm-3"> <button class="btn btn-light"><i class="bi bi-arrow-return-left"></i> Redo</button> </div> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-trash"></i> Remove</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-arrow-clockwise"></i> Refresh</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-reply"></i> Reply</button> </div> <div class="col-sm-3"> <button class="btn btn-danger"><i class="bi bi-twitter"></i> Retweet</button> </div> <div class="col-sm-3"> <button class="btn btn-warning"><i class="bi bi-search"></i> Search</button> </div> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-send"></i> Send</button> </div> <div class="col-sm-3"> <button class="btn btn-info"><i class="bi bi-gear"></i> Settings</button> </div> <div class="col-sm-3"> <button class="btn btn-light"><i class="bi bi-share"></i> Share</button> </div> <div class="col-sm-3"> <button class="btn btn-dark"><i class="bi bi-shield"></i> Shield</button> </div> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-cart"></i> Shopping Cart</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-signal"></i> Signal</button> </div> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-speaker"></i> Speaker</button> </div> <div class="col-sm-3"> <button class="btn btn-danger"><i class="bi bi-star"></i> Star</button> </div> <div class="col-sm-3"> <button class="btn btn-secondary"><i class="bi bi-stopwatch"></i> Stopwatch</button> </div> <div class="col-sm-3"> <button class="btn btn-light"><i class="bi bi-subscript"></i> Subscript</button> </div> <div class="col-sm-3"> <button class="btn btn-dark"><i class="bi bi-superscript"></i> Superscript</button> </div> <div class="col-sm-3"> <button class="btn btn-primary"><i class="bi bi-tablet"></i> Tablet</button> </div> <div class="col-sm-3"> <button class="btn btn-success"><i class="bi bi-tag"></i> Tag</button> </div> <div class="col-sm-3"> <button class="btn btn-danger"><i class="bi bi-trash"></i> Trash</button> </div> </div>