forked from UNO-Coders/Web-Development
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
solved bootstrap button group issue UNO-Coders#7
please review it @Bachittarjeet and let me know if it needs any changes
- Loading branch information
1 parent
d1b3896
commit 930db9c
Showing
1 changed file
with
103 additions
and
0 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| <!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"> | ||
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" | ||
| integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> | ||
|
|
||
| <title>Bootstrap Button Groups</title> | ||
|
|
||
| < </head> | ||
|
|
||
| <body> | ||
|
|
||
| <style> | ||
| .center { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| margin: 2rem 8rem; | ||
| } | ||
| </style> | ||
| <div> | ||
| <h1 class="display-3 text-center mt-2">Basic Button Group</h1> | ||
| <div class="btn-group center " role="group" aria-label="Basic example"> | ||
| <button type="button" class=" btn btn-primary">Left</button> | ||
| <button type="button" class=" btn btn-primary">Middle</button> | ||
| <button type="button" class=" btn btn-primary">Right</button> | ||
| </div> | ||
| <div> | ||
| <h3 class="display-6 text-center mt-2">Active button group</h3> | ||
| <div class="btn-group justify-content-center"> | ||
| <a href="#" class=" btn btn-primary active" aria-current="page">Active link</a> | ||
| <a href="#" class=" btn btn-primary">Link</a> | ||
| <a href="#" class=" btn btn-primary">Link</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h3 class="display-6 text-center mt-2">Mixed Style button group</h3> | ||
| <div class="btn-group" role="group" aria-label="Basic mixed styles example"> | ||
| <button type="button" class="btn btn-danger">Left</button> | ||
| <button type="button" class="btn btn-warning">Middle</button> | ||
| <button type="button" class="btn btn-success">Right</button> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <div> | ||
| <h3 class="display-6 text-center mt-2">Outlined styles button group</h3> | ||
| <div class="btn-group" role="group" aria-label="Basic outlined example"> | ||
| <button type="button" class="btn btn-outline-primary">Left</button> | ||
| <button type="button" class="btn btn-outline-primary">Middle</button> | ||
| <button type="button" class="btn btn-outline-primary">Right</button> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h3 class="display-6 text-center mt-2">Checkbox button groups</h3> | ||
| <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group"> | ||
| <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off"> | ||
| <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label> | ||
|
|
||
| <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off"> | ||
| <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label> | ||
|
|
||
| <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off"> | ||
| <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <h3 class="display-6 text-center mt-2">Button toolbar button groups</h3> | ||
| <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> | ||
| <div class="btn-group me-2" role="group" aria-label="First group"> | ||
| <button type="button" class="btn btn-primary">1</button> | ||
| <button type="button" class="btn btn-primary">2</button> | ||
| <button type="button" class="btn btn-primary">3</button> | ||
| <button type="button" class="btn btn-primary">4</button> | ||
| </div> | ||
| <div class="btn-group me-2" role="group" aria-label="Second group"> | ||
| <button type="button" class="btn btn-secondary">5</button> | ||
| <button type="button" class="btn btn-secondary">6</button> | ||
| <button type="button" class="btn btn-secondary">7</button> | ||
| </div> | ||
| <div class="btn-group" role="group" aria-label="Third group"> | ||
| <button type="button" class="btn btn-info">8</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" | ||
| integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" | ||
| crossorigin="anonymous"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
|
|
||
| <div class="position-absolute top-50 start-50 translate-middle"></div> |