Elements
These modular elements can be readily used and customized across pages and in different blocks.
Elements
- Alerts
- Animation
- Background
- Badge
- Breadcrumb
- Buttons
- Button group
- Card
- Carousel
- Collapse
- Columns
- Countdown
- Dropdowns
- Forms
- Gallery
- Icon Set
- Image
- Input group
- List group
- Map
- Modal
- Navs
- Navbar
- Pagination
- Popovers
- Pricing Table
- Progress
- Responsive Utilities
- Scrollspy
- Seperators
- Tabs & wizards
- Tables
- Team
- Testimonials
- Tooltips
- Typography
- Video & Audio
Default Buttons <> show code
<button type="button" class="btn btn-secondary">Secondary</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-inverse">inverse</button>
How to use
- Button styles you can use on a, button, input elements.
- Use the contextual classes .btn-secondary , .btn-primary , .btn-success , .btn-info , .btn-warning , .btn-danger & .btn-inverse for pre-styled button
Example:
Buttons types <> show code
<!-- Outlined button -->
<a class="btn btn-secondary-outlined" href="#" role="button">secondary</a>
<button class="btn btn-primary-outlined" type="submit">primary</button>
<button class="btn btn-success-outlined" type="submit">success</button>
<button class="btn btn-info-outlined" type="submit">info</button>
<button class="btn btn-warning-outlined" type="submit">warning</button>
<button class="btn btn-danger-outlined" type="submit">danger</button>
<button class="btn btn-inverse-outlined" type="submit">inverse</button>
<!-- Rounded button -->
<button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-inverse btn-rounded">inverse</button>
How to use
- Change the default contextual classes name with -outlined for outlined button. For example: change btn-primary to btn-primary-outlined
- For rounded button style use an extra class .btn-rounded with default .btn class
Button Sizes <> show code
<!-- small button -->
<button type="button" class="btn btn-secondary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<!-- medium button -->
<button type="button" class="btn btn-secondary btn-mid">Medium </button>
<button type="button" class="btn btn-primary btn-mid">Medium </button>
<!-- Large button -->
<button type="button" class="btn btn-secondary btn-lg">Large </button>
<button type="button" class="btn btn-primary btn-lg">Large </button>
<!-- Default button -->
<button type="button" class="btn btn-secondary btn-default">default </button>
<button type="button" class="btn btn-primary btn-default">default </button>
<!-- button with icon -->
<button type="button" class="btn btn-secondary btn-default"><i class="fa fa-facebook-f"></i> iconic </button>
<button type="button" class="btn btn-primary btn-default"><i class="fa fa-bitbucket"></i> iconic </button>
<!-- block level button -->
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>
How to use
- Use .btn-sm for small buttons, .btn-mid for medium button, .btn-lg for large button & .btn-default for default button sizes.
- For block level button add an .btn-block with .btn class
Small button
Medium button
Large button
button default
Block Level button
Social Icon Buttons <> show code
<!-- button with icon -->
<button type="button" class="btn btn-primary btn-icon"><i class="fa fa-user"></i> iconic </button>
<button type="button" class="btn btn-success btn-icon" type="submit"><i class="fa fa-user"></i> iconic</button>
<!-- Social buttons -->
<button class="btn btn-social facebook"><i class="fa fa-facebook-f"></i></button>
<button class="btn btn-social twitter"><i class="fa fa-twitter"></i></button>
<!-- Social cicle button -->
<button class="btn btn-social btn-cicle facebook"><i class="fa fa-facebook-f"></i></button>
<button class="btn btn-social btn-cicle twitter"><i class="fa fa-twitter"></i></button>
<!-- Social outlined button -->
<button class="btn btn-social outlined pinterest"><i class="fa fa-pinterest-p"></i></button>
<button class="btn btn-social outlined skype"><i class="fa fa-skype"></i></button>
<!-- Social Rounded button -->
<button class="btn btn-social rounded twitter"><i class="fa fa-twitter"></i></button>
<button class="btn btn-social rounded pinterest"><i class="fa fa-pinterest-p"></i></button>
<!-- Social button with title -->
<button class="btn btn-social titled twitter"><i class="fa fa-twitter"></i> twitter</button>
<button class="btn btn-social titled pinterest"><i class="fa fa-pinterest-p"></i> pinterest</button>
How to use
Different social button design.. Here’s how:
- Use any icon (here uses FontAwesome icon) into an <i> element
- Add .btn-social class with .btn for social button style
- To get the cicle, rounded, outlined button use .btn-circle , .rounded , .outlined class with .btn-social
- To use title with icon use .titled with .btn-social class