1. Code für Normal Buttons

<button type='button' class='btn btn-default'>Default</button>
<button type='button' class='btn btn-primary'>Primary</button>
<button type='button' class='btn btn-success'>Success</button>
<button type='button' class='btn btn-info'>Info</button>
<button type='button' class='btn btn-warning'>Warning</button>
<button type='button' class='btn btn-danger'>Danger</button>
<button type='button' class='btn btn-link'>Link</button>

1. Ausgabe für Normal Buttons

2. Code für Disabled Buttons

 <button type='button' class='btn btn-default disabled'>Default</button>
 <button type='button' class='btn btn-primary disabled'>Primary</button>
 <button type='button' class='btn btn-success disabled'>Success</button>
 <button type='button' class='btn btn-info disabled'>Info</button>
 <button type='button' class='btn btn-warning disabled'>Warning</button>
 <button type='button' class='btn btn-danger disabled'>Danger</button>
 <button type='button' class='btn btn-link disabled'>Link</button>

2. Ausgabe für Disabled Buttons

3. Code für Button Sizes

 <button type='button' class='btn btn-primary btn-lg'>Large button</button>
 <button type='button' class='btn btn-primary'>Default button</button>
 <button type='button' class='btn btn-primary btn-sm'>Small button</button>
 <button type='button' class='btn btn-primary btn-xs'>Mini button</button>
 <br>
 <br>
 <button type='button' class='btn btn-primary btn-lg btn-block'>Block level button</button>

3. Ausgabe für Button Sizes

4. Code für Normal Circle Buttons

<button type='button' class='btn btn-default btn-circle'><i class='fa fa-check'></i></button>
<button type='button' class='btn btn-primary btn-circle'><i class='fa fa-list'></i></button>
<button type='button' class='btn btn-success btn-circle'><i class='fa fa-link'></i></button>
<button type='button' class='btn btn-info btn-circle'><i class='fa fa-check'></i></button>
<button type='button' class='btn btn-warning btn-circle'><i class='fa fa-times'></i></button>
<button type='button' class='btn btn-danger btn-circle'><i class='fa fa-heart'></i></button>

>4. Ausgabe für Normal Circle Buttons

5. Code für Large Circle Buttons

<button type='button' class='btn btn-default btn-circle btn-lg'><i class='fa fa-check'></i></button>
<button type='button' class='btn btn-primary btn-circle btn-lg'><i class='fa fa-list'></i></button>
<button type='button' class='btn btn-success btn-circle btn-lg'><i class='fa fa-link'></i></button>
<button type='button' class='btn btn-info btn-circle btn-lg'><i class='fa fa-check'></i></button>
<button type='button' class='btn btn-warning btn-circle btn-lg'><i class='fa fa-times'></i></button>
<button type='button' class='btn btn-danger btn-circle btn-lg'><i class='fa fa-heart'></i></button>

5. Ausgabe für Large Circle Buttons

6. Code für Extra Large Circle Buttons

<button type='button' class='btn btn-default btn-circle btn-xl'><i class='fa fa-check'></i></button>
<button type='button' class='btn btn-primary btn-circle btn-xl'><i class='fa fa-list'></i></button>
<button type='button' class='btn btn-success btn-circle btn-xl'><i class='fa fa-link'></i></button>
<button type='button' class='btn btn-info btn-circle btn-xl'><i class='fa fa-check'></i></button>
<button type='button' class='btn btn-warning btn-circle btn-xl'><i class='fa fa-times'></i></button>
<button type='button' class='btn btn-danger btn-circle btn-xl'><i class='fa fa-heart'></i></button>

6. Ausgabe für Extra Large Circle Buttons

7. Code für Outline Buttons

<button type='button' class='btn btn-outline btn-default'>Default</button>
<button type='button' class='btn btn-outline btn-primary'>Primary</button>
<button type='button' class='btn btn-outline btn-success'>Success</button>
<button type='button' class='btn btn-outline btn-info'>Info</button>
<button type='button' class='btn btn-outline btn-warning'>Warning</button>
<button type='button' class='btn btn-outline btn-danger'>Danger</button>
<button type='button' class='btn btn-outline btn-link'>Link</button>

7. Ausgabe für Outline Buttons

8. Code für Outline Button Sizes

<button type='button' class='btn btn-outline btn-primary btn-lg'>Large button</button>
<button type='button' class='btn btn-outline btn-primary'>Default button</button>
<button type='button' class='btn btn-outline btn-primary btn-sm'>Small button</button>
<button type='button' class='btn btn-outline btn-primary btn-xs'>Mini button</button>
 <br>
 <br>
<button type='button' class='btn btn-outline btn-primary btn-lg btn-block'>Block level button</button>

8. Outline Button Sizes

9. Code für Social Buttons with Font Awesome Icons

<a class='btn btn-block btn-social btn-bitbucket'>
    <i class='fa fa-bitbucket'></i> Sign in with Bitbucket
</a>
<a class='btn btn-block btn-social btn-dropbox'>
    <i class='fa fa-dropbox'></i> Sign in with Dropbox
</a>
<a class='btn btn-block btn-social btn-facebook'>
    <i class='fa fa-facebook'></i> Sign in with Facebook
</a>
<a class='btn btn-block btn-social btn-flickr'>
    <i class='fa fa-flickr'></i> Sign in with Flickr
</a>
<a class='btn btn-block btn-social btn-github'>
    <i class='fa fa-github'></i> Sign in with GitHub
</a>
<a class='btn btn-block btn-social btn-google-plus'>
    <i class='fa fa-google-plus'></i> Sign in with Google
</a>
<a class='btn btn-block btn-social btn-instagram'>
    <i class='fa fa-instagram'></i> Sign in with Instagram
</a>
<a class='btn btn-block btn-social btn-linkedin'>
    <i class='fa fa-linkedin'></i> Sign in with LinkedIn
</a>
<a class='btn btn-block btn-social btn-pinterest'>
    <i class='fa fa-pinterest'></i> Sign in with Pinterest
</a>
<a class='btn btn-block btn-social btn-tumblr'>
    <i class='fa fa-tumblr'></i> Sign in with Tumblr
</a>
<a class='btn btn-block btn-social btn-twitter'>
    <i class='fa fa-twitter'></i> Sign in with Twitter
</a>
<a class='btn btn-block btn-social btn-vk'>
    <i class='fa fa-vk'></i> Sign in with VK
</a>

Hinweis: Für den Einsatz von Social Buttons müssen Sie die Datei bootstrap-social.css (download) herunterladen und dann in Ihrer HTML-Datei im HEAD-Bereich einbinden bzw. integrieren.

<link href='css/bootstrap-social.css' rel='stylesheet'>
<link href='css/font-awesome.min.css' rel='stylesheet' type='text/css'>

9. Social Buttons with Font Awesome Icons

10. Code für Social Buttons

<a class='btn btn-social-icon btn-bitbucket'><i class='fa fa-bitbucket'></i></a>
<a class='btn btn-social-icon btn-dropbox'><i class='fa fa-dropbox'></i></a>
<a class='btn btn-social-icon btn-facebook'><i class='fa fa-facebook'></i></a>
<a class='btn btn-social-icon btn-flickr'><i class='fa fa-flickr'></i></a>
<a class='btn btn-social-icon btn-github'><i class='fa fa-github'></i></a>
<a class='btn btn-social-icon btn-google-plus'><i class='fa fa-google-plus'></i></a>
<a class='btn btn-social-icon btn-instagram'><i class='fa fa-instagram'></i></a>
<a class='btn btn-social-icon btn-linkedin'><i class='fa fa-linkedin'></i></a>
<a class='btn btn-social-icon btn-pinterest'><i class='fa fa-pinterest'></i></a>
<a class='btn btn-social-icon btn-tumblr'><i class='fa fa-tumblr'></i></a>
<a class='btn btn-social-icon btn-twitter'><i class='fa fa-twitter'></i></a>
<a class='btn btn-social-icon btn-vk'><i class='fa fa-vk'></i></a>

10. Social Buttons