110-button-color
btn btn-secondary

Bootstrap Button Classes

Submit Submit Submit Submit Submit


111-button-size
btn btn-secondary btn-sm

Bootstrap Button Classes

Submit Submit Submit Submit Submit


112-active-disable-class
btn btn-secondary btn-sm disabled

Bootstrap Button Classes

Submit Submit Submit


113-block-button
btn btn-primary btn-block
Submit


114-group-button
btn-group

Bootstrap Button Group Classes



115-size-group-button
btn-group btn-group-lg

Bootstrap Button Group Classes



116-group-button-vertical
btn-group-vertical

Bootstrap Button Group Classes



117-button-toolbar
btn-toolbar & btn-group me-3

toolbar



118-icon-menu
mt-3 mb-5 text-center

toolbar



119-nesting-buttons
mt-3 mb-5 text-center

toolbar



Exported from Notepad++
<!DOCTYPR html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BootStrap</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <style> .container, .container-lg{ border:1px solid black; } .row{ border:0px solid blue; } </style></head> <body> <!-- button-color --> 110-button-color</br> btn btn-secondary <div class="container"> <h2 class="mt-3 mb-5 text-center">Bootstrap Button Classes</h2> <div class="row"> <div class="col py-3"> <a href="" class="btn btn-primary">Submit</a> <a href="" class="btn btn-secondary">Submit</a> <a href="" class="btn btn-success">Submit</a> <button type="button" class="btn btn-danger">Submit</button> <button type="button" class="btn btn-warning">Submit</button> <a href="" class="btn btn-outline-info">Submit</a> <a href="" class="btn btn-outline-dark">Submit</a> </div> </div> </div></br></br> <!-- button-size --> <!-- btn-lg --> <!-- btn-sm --> 111-button-size</br> btn btn-secondary btn-sm <div class="container"> <h2 class="mt-3 mb-5 text-center">Bootstrap Button Classes</h2> <div class="row"> <div class="col py-3"> <a href="" class="btn btn-primary btn-lg ">Submit</a> <a href="" class="btn btn-secondary btn-sm">Submit</a> <a href="" class="btn btn-success">Submit</a> <button type="button" class="btn btn-danger">Submit</button> <button type="button" class="btn btn-warning">Submit</button> <a href="" class="btn btn-outline-info">Submit</a> <a href="" class="btn btn-outline-dark">Submit</a> </div> </div> </div></br></br> <!-- active-disabled class --> 112-active-disable-class</br> btn btn-secondary btn-sm disabled <div class="container"> <h2 class="mt-3 mb-5 text-center">Bootstrap Button Classes</h2> <div class="row"> <div class="col py-3"> <a href="" class="btn btn-primary btn-lg active">Submit</a> <a href="" class="btn btn-secondary btn-sm disabled ">Submit</a> <button type="button" class="btn btn-warning" disabled>Submit</button> <a href="" class="btn btn-outline-dark">Submit</a> </div> </div> </div></br></br> <!-- block-button --> 113-block-button</br> btn btn-primary btn-block <div class="container"> <div class="row"> <div class="col-md-6 "> <a href="" class="btn btn-primary btn-block">Submit</a> </div> </div> </div></br></br> <!-- group-button --> 114-group-button</br> btn-group <div class="container"> <h2 class="mt-3 mb-5 text-center">Bootstrap Button Group Classes</h2> <div class="row"> <div class="col py-3"> <div class="btn-group"> <button type="button" class="btn btn-primary">Click</button> <button type="button" class="btn btn-success">Click</button> <button type="button" class="btn btn-danger">Click</button> </div> </div> </div> </div></br></br> <!-- size-group-button --> <!-- lg --> <!-- sm --> 115-size-group-button</br> btn-group btn-group-lg <div class="container"> <h2 class="mt-3 mb-5 text-center">Bootstrap Button Group Classes</h2> <div class="row"> <div class="col py-3"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Click</button> <button type="button" class="btn btn-success">Click</button> <button type="button" class="btn btn-danger">Click</button> </div> </div> </div> <div class="row"> <div class="col py-3"> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-primary">Click</button> <button type="button" class="btn btn-success">Click</button> <button type="button" class="btn btn-danger">Click</button> </div> </div> </div> </div></br></br> <!-- group-button vertical--> 116-group-button-vertical</br> btn-group-vertical <div class="container"> <h2 class="mt-3 mb-5 text-center">Bootstrap Button Group Classes</h2> <div class="row"> <div class="col py-3"> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Click</button> <button type="button" class="btn btn-success">Click</button> <button type="button" class="btn btn-danger">Click</button> </div> </div> </div> </div></br></br> <!-- button toolbar--> 117-button-toolbar</br> btn-toolbar & btn-group me-3 <div class="container"> <h2 class="mt-3 mb-5 text-center">toolbar</h2> <div class="row"> <div class="col py-3"> <div class="btn-toolbar"> <div class="btn-group me-3"> <button type="button" class="btn btn-primary">Click</button> <button type="button" class="btn btn-success">Click</button> <button type="button" class="btn btn-danger">Click</button> </div> <div class="btn-group"> <button type="button" class="btn btn-info">Click</button> <button type="button" class="btn btn-secondary">Click</button> </div> </div> </div> </div> </div></br></br> <!-- icon menu--> 118-icon-menu</br> mt-3 mb-5 text-center <div class="container"> <h2 class="mt-3 mb-5 text-center">toolbar</h2> <div class="row"> <div class="col py-3"> <div class="btn-toolbar"> <div class="btn-group me-3"> <button type="button" class="btn btn-primary"><i class="fa-solid fa-house"></i></button> <button type="button" class="btn btn-success">Click</button> <button type="button" class="btn btn-danger">Click</button> </div> <div class="btn-group"> <button type="button" class="btn btn-info">Click</button> <button type="button" class="btn btn-secondary">Click</button> </div> </div> </div> </div> </div></br></br> <!-- icon menu--> 119-nesting-buttons</br> mt-3 mb-5 text-center <div class="container"> <h2 class="mt-3 mb-5 text-center">toolbar</h2> <div class="row"> <div class="col py-3"> <div class="btn-toolbar"> <div class="btn-group me-3"> <button type="button" class="btn btn-primary"><i class="fa-solid fa-house"></i></button> <button type="button" class="btn btn-success">Click</button> <button type="button" class="btn btn-danger">Click</button> </div> <div class="btn-group"> <button type="button" class="btn btn-info">Click</button> <button type="button" class="btn btn-secondary">Click</button> </div> </div> </div> </div> </div></br></br> </body> </html>