Buttons
Bootstrap buttons are an integral part of any web interface, providing users with interactive elements for performing various actions like form submissions, navigation, and other interactive tasks. Designed with responsiveness and aesthetics in mind, Bootstrap buttons come in various sizes, colors, and styles, fitting seamlessly into the modern web design paradigm. They are easily customizable and can be integrated into web pages with minimal effort, offering both functionality and visual appeal. With a range of classes provided by Bootstrap, developers can quickly implement buttons that align with the overall design and functionality of their web applications.
Classes for Bootstrap Buttons
Here’s a table listing the common classes used for styling buttons in Bootstrap:
Class Name | Description |
.btn | The base class for all Bootstrap buttons. |
.btn-primary | Indicates the primary action button, styled with the theme’s primary color. |
.btn-secondary | A secondary style, less prominent than primary. |
.btn-success | Indicates a successful or positive action. |
.btn-danger | Used for actions that could be potentially dangerous or need caution. |
.btn-warning | Indicates a warning or something that needs attention. |
.btn-info | Typically used for informational buttons. |
.btn-light | A light-colored button. |
.btn-dark | A dark-colored button. |
.btn-outline-* | For an outlined version of the button (* can be replaced with any of the above styles). |
.btn-lg, .btn-sm | For larger or smaller buttons than the default size. |
.btn-block | Makes the button span the full width of its parent. |
.disabled or disabled attribute | Disables the button functionality. |
Code Examples with Explanation
Basic Button
This button is styled with an outline and a transparent background, suitable for a less prominent action.
Large Success Button:
This example demonstrates a larger button (btn-lg) with a success color theme, indicating a positive action like “Save” or “Submit”.
Block Level Button:
A block level button (btn-block) extends the full width of its parent, useful for key actions in a form or dialog.
Disabled Button:
This button is styled with the btn-danger class but is disabled, indicating that the action is not currently available.
These examples showcase the versatility of Bootstrap buttons, demonstrating how they can be adapted for various functions and design needs within a web application.
YouTube Reference :
1) Button in Hindi/Urdu Part-1
2) Button in Hindi/Urdu Part-2
