bootstrap buttons sizes

1Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
2<button type="button" class="btn btn-primary btn-lg">Large button</button>
3<button type="button" class="btn btn-secondary btn-lg">Large button</button>
4
5<button type="button" class="btn btn-primary btn-sm">Small button</button>
6<button type="button" class="btn btn-secondary btn-sm">Small button</button>
7
8<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
9<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
10
11<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
12<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

1<button type="button" class="btn btn-primary">Blue</button>
2<button type="button" class="btn btn-secondary">Grey</button>
3<button type="button" class="btn btn-success">Green</button>
4<button type="button" class="btn btn-danger">Red</button>
5<button type="button" class="btn btn-warning">Yellow</button>
6<button type="button" class="btn btn-info">Ligth blue</button>
7<button type="button" class="btn btn-light">White</button>
8<button type="button" class="btn btn-dark">Black</button>
9
10<button type="button" class="btn btn-link">White with blue text</button>

1In need of a button, but not the hefty background colors they bring? 
2Replace the default modifier classes with the .btn-outline-* ones to 
3remove all background images and colors on any button.
4
5<button type="button" class="btn btn-outline-primary">Primary</button>
6<button type="button" class="btn btn-outline-secondary">Secondary</button>
7<button type="button" class="btn btn-outline-success">Success</button>
8<button type="button" class="btn btn-outline-danger">Danger</button>
9<button type="button" class="btn btn-outline-warning">Warning</button>
10<button type="button" class="btn btn-outline-info">Info</button>
11<button type="button" class="btn btn-outline-light">Light</button>
12<button type="button" class="btn btn-outline-dark">Dark</button>

1Bootstrap includes several predefined button styles, each serving its own
2semantic purpose, with a few extras thrown in for more control.
3Using color to add meaning only provides a visual indication, which will
4not be conveyed to users of assistive technologies – such as screen readers. 
5Ensure that information denoted by the color is either obvious from the 
6content itself (e.g. the visible text), or is included through alternative
7means, such as additional text hidden with the .sr-only class.
8
9<button type="button" class="btn btn-primary">Primary</button>
10<button type="button" class="btn btn-secondary">Secondary</button>
11<button type="button" class="btn btn-success">Success</button>
12<button type="button" class="btn btn-danger">Danger</button>
13<button type="button" class="btn btn-warning">Warning</button>
14<button type="button" class="btn btn-info">Info</button>
15<button type="button" class="btn btn-light">Light</button>
16<button type="button" class="btn btn-dark">Dark</button>
17
18<button type="button" class="btn btn-link">Link</button>

1<button type="button" class="btn btn-primary">Primary</button>
2<button type="button" class="btn btn-secondary">Secondary</button>
3<button type="button" class="btn btn-success">Success</button>
4<button type="button" class="btn btn-danger">Danger</button>
5<button type="button" class="btn btn-warning">Warning</button>
6<button type="button" class="btn btn-info">Info</button>
7<button type="button" class="btn btn-light">Light</button>
8<button type="button" class="btn btn-dark">Dark</button>
9<button type="button" class="btn btn-link">Link</button>
10<a class="btn btn-primary" href="#" role="button">Link</a>
11<button class="btn btn-primary" type="submit">Button</button>
12<input class="btn btn-primary" type="button" value="Input">
13<input class="btn btn-primary" type="submit" value="Submit">
14<input class="btn btn-primary" type="reset" value="Reset">
15<button type="button" class="btn btn-outline-primary">Primary</button>
16<button type="button" class="btn btn-outline-secondary">Secondary</button>
17<button type="button" class="btn btn-outline-success">Success</button>
18<button type="button" class="btn btn-outline-danger">Danger</button>
19<button type="button" class="btn btn-outline-warning">Warning</button>
20<button type="button" class="btn btn-outline-info">Info</button>
21<button type="button" class="btn btn-outline-light">Light</button>
22<button type="button" class="btn btn-outline-dark">Dark</button>
23<button type="button" class="btn btn-primary btn-lg">Large button</button>
24<button type="button" class="btn btn-secondary btn-lg">Large button</button>
25<button type="button" class="btn btn-primary btn-sm">Small button</button>
26<button type="button" class="btn btn-secondary btn-sm">Small button</button>
27<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
28<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
29<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
30<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
31<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
32<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
33<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
34  Single toggle
35</button>
36<div class="btn-group-toggle" data-toggle="buttons">
37  <label class="btn btn-secondary active">
38    <input type="checkbox" checked autocomplete="off"> Checked
39  </label>
40</div>
41<div class="btn-group btn-group-toggle" data-toggle="buttons">
42  <label class="btn btn-secondary active">
43    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
44  </label>
45  <label class="btn btn-secondary">
46    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
47  </label>
48  <label class="btn btn-secondary">
49    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
50  </label>
51</div>

1<button type="button" class="btn btn-primary btn-lg">Large button</button>
2<button type="button" class="btn btn-secondary btn-sm">Small button</button>