Button Sizes
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
<!DOCTYPE html> <html> <head> <title>Bootstrap Tutorial</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button> </p> <p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button> </p> </body> </html>
Output
Create block level buttons—those that span the full width of a parent— by adding .btn-block.
<!DOCTYPE html> <html> <head> <title>Bootstrap Tutorial</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <button type="button" class="btn btn-primary btn-lg btn-block"> Block level button </button> <button type="button" class="btn btn-default btn-lg btn-block"> Block level button </button> </body> </html>