<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-success">Success</button>
	<button type="button" class="btn btn-danger">Danger</button>
	<button type="button" class="btn btn-warning">Warning</button>
	<button type="button" class="btn btn-info">Info</button>
	<button type="button" class="btn btn-dark">Dark</button>
	<button type="button" class="btn btn-light text-dark">Light</button>

	<button type="button" class="btn btn-link text-primary">Link</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

	<!-- Outlined button -->
	<a class="btn btn-secondary-outlined" href="javascript:void(0)" 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-light-outlined" type="submit">light</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-light text-dark btn-rounded">Light</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

	<!-- 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>

	<!-- block level button -->
    <div class="d-grid gap-2">
      <button class="btn btn-primary" type="button">Block level button</button>
      <button class="btn btn-secondary" type="button">Block level button</button>
    </div>


						

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 .d-grid with .btn parent element

	<!-- 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="fab fa-facebook-f"></i></button>
	<button class="btn btn-social twitter"><i class="fab fa-twitter"></i></button>
	
	<!-- With hover effect-->
	<button class="btn btn-social btn-social-o facebook">
		<i class="fab fa-facebook-f"></i>
	</button>
	<button class="btn btn-social btn-social-o twitter">
		<i class="fab fa-twitter"></i>
	</button>
	<button class="btn btn-social btn-social-o pinterest">
		<i class="fab fa-pinterest-p"></i>
	</button>
	<button class="btn btn-social btn-social-o skype">
		<i class="fab fa-skype"></i>
	</button>
	<button class="btn btn-social btn-social-o linkedin">
		<i class="fab fa-linkedin-in"></i>
	</button>
	<button class="btn btn-social btn-social-o google-plus">
		<i class="fab fa-google-plus-g"></i>
	</button>
	<button class="btn btn-social btn-social-o youtube">
		<i class="fab fa-youtube"></i>
	</button>

	<!-- Social cicle button -->
	<button class="btn btn-social btn-cicle facebook"><i class="fab fa-facebook-f"></i></button>
	<button class="btn btn-social btn-cicle twitter"><i class="fab fa-twitter"></i></button>

	<!-- Social outlined button -->
	<button class="btn btn-social outlined pinterest"><i class="fab fa-pinterest-p"></i></button>
	<button class="btn btn-social outlined skype"><i class="fab fa-skype"></i></button>

	<!-- Social Rounded button -->
	<button class="btn btn-social rounded twitter"><i class="fab fa-twitter"></i></button>
	<button class="btn btn-social rounded pinterest"><i class="fab fa-pinterest-p"></i></button>

	<!-- Social button with title -->
	<button class="btn btn-social titled twitter"><i class="fab fa-twitter"></i> twitter</button>
	<button class="btn btn-social titled pinterest"><i class="fab 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