Bootstrap 5 Button Outline Last Updated : 06 Nov, 2022 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 provides a series of classes that can be used to create outline buttons in our project, i.e. buttons without background color. The outline button classes remove any background color or background image style applied to the buttons. We will use .btn-outline-* class to create the outline button, where * is replaced with the color name. Button Outline Classes: .btn-outline-primary.btn-outline-secondary.btn-outline-success.btn-outline-danger.btn-outline-warning.btn-outline-info.btn-outline-light.btn-outline-dark Syntax: <button type="button" class="btn btn-outline-*"> * </button> Example 1: In this example, we will use button outline classes to create the outline buttons. HTML <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Button Outline</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </head> <body style="text-align:center;"> <div class="container mt-3"> <h1 class="text-success"> GeeksforGeeks </h1> <h2>Bootstrap 5 Button Outline</h2> <button type="button" class="btn btn-outline-primary"> Primary Outline Button </button> <button type="button" class="btn btn-outline-secondary"> Secondary Outline Button </button> <button type="button" class="btn btn-outline-success"> Success Outline Button </button> <button type="button" class="btn btn-outline-danger"> Danger Outline Button </button> <br><br> <button type="button" class="btn btn-outline-warning"> Warning Outline Button </button> <button type="button" class="btn btn-outline-info"> Info Outline Button </button> <button type="button" class="btn btn-outline-light"> Light Outline Button </button> <button type="button" class="btn btn-outline-dark"> Dark Outline Button </button> </div> </body> </html> Output: Example 2: In this example, we will use button outline classes to create the outline buttons with font awesome icons. HTML <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Button Outline</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body style="text-align:center;"> <div class="container mt-3"> <h1 class="text-success"> GeeksforGeeks </h1> <h2>Bootstrap 5 Button Outline</h2> <button type="button" class="btn btn-lg btn-outline-primary"> <i class="fa fa-home"></i> </button> <button type="button" class="btn btn-lg btn-outline-secondary"> <i class="fa fa-code"></i> </button> <button type="button" class="btn btn-lg btn-outline-success"> <i class="fa fa-folder"></i> </button> <button type="button" class="btn btn-lg btn-outline-danger"> <i class="fa fa-file"></i> </button> <button type="button" class="btn btn-lg btn-outline-warning"> <i class="fa fa-filter"></i> </button> <button type="button" class="btn btn-lg btn-outline-info"> <i class="fa fa-barcode"></i> </button> <button type="button" class="btn btn-lg btn-outline-light"> <i class="fa fa-bug"></i> </button> <button type="button" class="btn btn-lg btn-outline-dark"> <i class="fa fa-gears"></i> </button> </div> </body> </html> Output: Reference: https://getbootstrap.com/docs/5.0/components/buttons/#outline-buttons Comment More infoAdvertise with us Next Article Bootstrap 5 Buttons Sizes V vkash8574 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 Buttons Disable text wrapping Bootstrap 5 Buttons Disable text wrapping is used if you don't want to wrap the button text. To disable the button text wrapping, we will use .text-nowrap class with .btn class. You can also use $btn-white-space: nowrap in SASS to disable text wrapping in each button.Buttons Disable text wrapping us 2 min read Bootstrap 5 Buttons Button tags Bootstrap 5 Buttons Button tags are used to create buttons using <a>, <button>, and <input> elements. To design the button tags, we will use .btn class. After applying the .btn class on <a>, <button>, and <input> elements, browsers can render the elements in sligh 2 min read Bootstrap 5 Button Outline Bootstrap 5 provides a series of classes that can be used to create outline buttons in our project, i.e. buttons without background color. The outline button classes remove any background color or background image style applied to the buttons. We will use .btn-outline-* class to create the outline b 2 min read Bootstrap 5 Buttons Sizes Bootstrap 5 provides 2 different classes that allow changing the button sizes. The .btn-lg and .btn-sm classes are used for large and small buttons. Buttons Sizes Classes: .btn-lg: This class is used to create large-size buttons..btn-sm: This class is used to create small-size buttons. Syntax: // Fo 2 min read Bootstrap 5 Buttons Disabled state The disabled option is used to create a button with the disabled state. It is a boolean attribute for any button element. The disabled button means the button is inactive and it will not be active after clicking or hovering the button. Disabled state Attribute: disabled: This attribute is used to cr 3 min read Bootstrap 5 Buttons Block buttons Bootstrap 5 Block buttons are used to display the full-width responsive buttons. To make the block buttons, we will use .d-grid, and .d-flex classes. We can also use screen sizes classes to change the button sizes on different screen sizes.Block buttons used Classes:.d-flex: This class is used to di 2 min read Bootstrap 5 Button Plugin Bootstrap 5 buttons plugin gives the flexibility to play around with setting the toggle states and also with adding certain predefined button methods which help to add utility to the button or even the ability to operate even outside the actual button.Bootstrap 5 Button plugin used classes for toggl 3 min read Bootstrap 5 Button Methods Bootstrap 5 has specially designed buttons that can be used in different utilities and the buttons can be used. To customize the usage of a user predefined methods can be used with JavaScript. The Button Methods with their function are given below:Bootstrap 5 Buttons Methods:toggle(): It changes the 3 min read Bootstrap 5 Buttons SASS Bootstrap 5 Buttons SASS can be used to change the default values provided for the buttons by customizing scss file of bootstrap 5.SASS variables of Buttons:$btn-padding-y: This variable provides the top and bottom padding of the button. By default, it is 0.375rem.$btn-padding-x: This variable provi 7 min read Like