Bootstrap 3 Buttons Examples
Bootstrap is a complete framework containing all sort of elements like buttons, forms, panels, etc. It is easy to customize the color and size of elements with Bootstrap theme templates. In this article, we will showcase different types of Bootstrap 3 buttons examples. Check out the latest article for Bootstrap 4 buttons.
Bootstrap Buttons Examples
You need the following things in order to add the Bootstrap buttons on your site.
- Bootstrap CSS and JS
- jQuery script
- Font awesome icons
- Custom CSS styles
- HTML code
Special Offer: Get 91% discount on Mobirise Bootstrap website builder with 40+ themes and 1800+ blocks.
Getting the Code
First three components can be added using free CDN links. You can download the custom CSS and HTML code using the below button. The zip archive contains two files – one for CSS and one for HTML.
Adding the Code on Your Page
Finally the complete code should look as shown below. You can add the custom CSS code within style tags on the header section of your webpage or upload the .css file and link as an external stylesheet. If your site is already using Bootstrap, Font Awesome and jQuery then no need of adding the CDN links.
1 2 3 4 5 6 7 8 | <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <style> ADD CUSTOM CSS CODE HERE /* You can also link it as an external stylesheet */ </style> ADD HTML CODE HERE <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> |
Examples Showcase
The showcase buttons are categorized into different groups:
- Circle icon buttons
- Dropdown buttons
- Default buttons
- Line buttons
- Rectangle buttons
- Circle buttons
- Rounded corner buttons
- Flat buttons
- Gradient buttons
- Gradient and Rectangle buttons
- Flat and rectangle buttons
- Line and rectangle buttons
- Circle and line buttons
- Circle and gradient buttons
- Rounder and line buttons
- Large social buttons with icons and network name
- Small social buttons only with icons
Below are some of the examples of Bootstrap buttons. You can view the complete demo here.
If you are using the Bootstrap framework CSS and JS files on the site not using Bootstrap template then ensure to check all other elements are fine and not affected. Otherwise you may need to extract only the required CSS and use it on your site independently using Bootstrap customizer.
