<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-primary">primary button</button>
<button type="button" class="btn btn-secondary">secondary button</button>
<button type="button" class="btn btn-success">Success button</button>
<button type="button" class="btn btn-info">Info button</button>
<button type="button" class="btn btn-warning">warning button</button>
<button type="button" class="btn btn-danger">danger button</button>
<button type="button" class="btn btn-light">light button</button>
<!-- Cod Box Copy end -->
.btn-lg
class for large size buttons
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-primary btn-lg">primary button</button>
<button type="button" class="btn btn-secondary btn-lg">secondary button</button>
<button type="button" class="btn btn-success btn-lg">Success button</button>
<button type="button" class="btn btn-info btn-lg">Info button</button>
<button type="button" class="btn btn-warning btn-lg">warning button</button>
<button type="button" class="btn btn-danger btn-lg">danger button</button>
<button type="button" class="btn btn-light btn-lg">light button</button>
<!-- Cod Box Copy end -->
.btn-sm
class for small size buttons
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-primary btn-sm">primary button</button>
<button type="button" class="btn btn-secondary btn-sm">secondary button</button>
<button type="button" class="btn btn-success btn-sm">Success button</button>
<button type="button" class="btn btn-info btn-sm">Info button</button>
<button type="button" class="btn btn-warning btn-sm">warning button</button>
<button type="button" class="btn btn-danger btn-sm">danger button</button>
<button type="button" class="btn btn-light btn-sm">light button</button>
<!-- Cod Box Copy end -->
.btn-xs
class for extra small size buttons
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-primary btn-xs">primary button</button>
<button type="button" class="btn btn-secondary btn-xs">secondary button</button>
<button type="button" class="btn btn-success btn-xs">Success button</button>
<button type="button" class="btn btn-info btn-xs">Info button</button>
<button type="button" class="btn btn-warning btn-xs">warning button</button>
<button type="button" class="btn btn-danger btn-xs">danger button</button>
<button type="button" class="btn btn-light btn-xs">light button</button>
<!-- Cod Box Copy end -->
.active
class for active state
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-primary active">Active</button>
<button type="button" class="btn btn-secondary active">Active</button>
<button type="button" class="btn btn-success active">Active</button>
<button type="button" class="btn btn-info active">Active</button>
<button type="button" class="btn btn-warning active">Active</button>
<button type="button" class="btn btn-danger active">Active</button>
<button type="button" class="btn btn-light active">Active</button>
<!-- Cod Box Copy end -->
.disabled
class or disabled="disabled"
attribute for disabled button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-primary disabled">Disabled</button>
<button type="button" class="btn btn-secondary disabled">Disabled</button>
<button type="button" class="btn btn-success disabled">Disabled</button>
<button type="button" class="btn btn-info disabled">Info button</button>
<button type="button" class="btn btn-warning disabled">Disabled</button>
<button type="button" class="btn btn-danger disabled">Disabled</button>
<button type="button" class="btn btn-light disabled">Disabled</button>
<!-- Cod Box Copy end -->
.btn
class used with <button>
, <a>
and <input>
elements.
<!-- Cod Box Copy begin -->
<a class="btn btn-primary" href="#" data-bs-toggle="tooltip;" title="btn btn-primary" role="button">link</button>
<input class="btn btn-primary" type="button" value="Input" data-bs-toggle="tooltip;" title="btn btn-secondary">
<input class="btn btn-success" type="submit" value="Submit" data-bs-toggle="tooltip" title="btn btn-success">
<button class="btn btn-info" type="submit">Button</button>
<!-- Cod Box Copy end -->
.btn-outline-*
class for border button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-outline-primary">primary button</button>
<button type="button" class="btn btn-outline-secondary">secondary button</button>
<button type="button" class="btn btn-outline-success">Success button</button>
<button type="button" class="btn btn-outline-info">Info button</button>
<button type="button" class="btn btn-outline-warning">warning button</button>
<button type="button" class="btn btn-outline-danger">danger button</button>
<button type="button" class="btn btn-outline-light txt-dark">light button</button>
<!-- Cod Box Copy end -->
.btn-outline-*-2x
class for bold outline
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-outline-primary-2x">primary button</button>
<button type="button" class="btn btn-outline-secondary-2x">secondary button</button>
<button type="button" class="btn btn-outline-success-2x">Success button</button>
<button type="button" class="btn btn-outline-info-2x">Info button</button>
<button type="button" class="btn btn-outline-warning-2x">warning button</button>
<button type="button" class="btn btn-outline-danger-2x">danger button</button>
<button type="button" class="btn btn-outline-light-2x txt-dark">light button</button>
<!-- Cod Box Copy end -->
.btn-outline-*
class for outline and .btn-lg
class for large button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-outline-primary btn-lg">primary button</button>
<button type="button" class="btn btn-outline-secondary btn-lg">secondary button</button>
<button type="button" class="btn btn-outline-success btn-lg">Success button</button>
<button type="button" class="btn btn-outline-info btn-lg">Info button</button>
<button type="button" class="btn btn-outline-warning btn-lg">warning button</button>
<button type="button" class="btn btn-outline-danger btn-lg">danger button</button>
<button type="button" class="btn btn-outline-light btn-lg txt-dark">light button</button>
<!-- Cod Box Copy end -->
.btn-outline-*
class for outline and .btn-sm
class for small button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-outline-primary btn-sm">primary button</button>
<button type="button" class="btn btn-outline-secondary btn-sm">secondary button</button>
<button type="button" class="btn btn-outline-success btn-sm">Success button</button>
<button type="button" class="btn btn-outline-info btn-sm">Info button</button>
<button type="button" class="btn btn-outline-warning btn-sm">warning button</button>
<button type="button" class="btn btn-outline-danger btn-sm">danger button</button>
<button type="button" class="btn btn-outline-light btn-sm txt-dark">light button</button>
<!-- Cod Box Copy end -->
.btn-outline-*
class for outline and .btn-xs
class for extra small button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-outline-primary btn-xs">primary button</button>
<button type="button" class="btn btn-outline-secondary btn-xs">secondary button</button>
<button type="button" class="btn btn-outline-success btn-xs">Success button</button>
<button type="button" class="btn btn-outline-info btn-xs">Info button</button>
<button type="button" class="btn btn-outline-warning btn-xs">warning button</button>
<button type="button" class="btn btn-outline-danger btn-xs">danger button</button>
<button type="button" class="btn btn-outline-light btn-xs txt-dark">light button</button>
<!-- Cod Box Copy end -->
.disabled
class or disabled="disabled"
attribute for disabled state
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-outline-primary disabled">Disabled</button>
<button type="button" class="btn btn-outline-secondary disabled">Disabled</button>
<button type="button" class="btn btn-outline-success disabled">Disabled</button>
<button type="button" class="btn btn-outline-info disabled">Disabled</button>
<button type="button" class="btn btn-outline-warning disabled">Disabled</button>
<button type="button" class="btn btn-outline-danger disabled">Disabled</button>
<button type="button" class="btn btn-outline-light disabled txt-dark">Disabled</button>
<!-- Cod Box Copy end -->
.btn-*-gradien
class for gradien button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-primary-gradien">primary button</button>
<button type="button" class="btn btn-secondary-gradien">secondary button</button>
<button type="button" class="btn btn-success-gradien">Success button</button>
<button type="button" class="btn btn-info-gradien">Info button</button>
<button type="button" class="btn btn-warning-gradien">warning button</button>
<button type="button" class="btn btn-danger-gradien">danger button</button>
<!-- Cod Box Copy end -->