BS4 Buttons
Button Styles
Bootstrap 4 offers various button styles:
==== BUTTON MUKAVA ====
Example
<button type="button" class="btn">Basic</button>
<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-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-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
<a>, <button>, and <input> components can all be used with the button classes:
Example
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Why do we put a # in the href attribute of the link?
We use # as the link because we don’t have a page to link it to and we don’t want to receive a “404” error. Naturally, in the real world, the “Search” page’s actual URL should have been provided.
Button Outline
Bootstrap 4 offers eight buttons with borders and outline:
==== BUTTON MUKAVA ====
Example
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
Button Sizes
For large buttons, use the .btn-lg class, and for small buttons, the .btn-sm class:
==== BUTTON MUKAVA ====
Example
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Block Level Buttons
To make a block level button that fills the parent element’s width, add class .btn-block.
==== BUTTON MUKAVA ====
Example
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
Active/Disabled Buttons
A button can be configured to be either disabled (unclickable) or active (appear pressed):
==== BUTTON MUKAVA ====
A button with the class .active appears pressed, and a button with the disabled attribute cannot be clicked. Keep in mind that <a> elements need to use the .disabled class in order to visually look disabled because they do not support the disabled attribute.
Example
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
Spinner Buttons
Additionally, you may add “spinners” to a button; our BS4 Spinners Tutorial will teach you more about this.
==== BUTTON MUKAVA ====
Example
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
