What are PHP buttons or Bootstrap 5 buttons? This article will summarize the different types of buttons and how to create them in Bootstrap!
What are PHP buttons or Bootstrap 5 buttons? This article will summarize the different types of buttons and how to create them in Bootstrap !
If you're planning a career in programming, you absolutely must know how to use Bootstrap. Essentially, it's a repository of popular HTML, CSS, and JavaScript code for developing responsive web applications. Based on readily available basic components like typography, forms, buttons, tables, grids, navigation, image carousels, etc., your web design process will no longer be difficult. You can start with these pre-made elements or create new ones after gaining a deeper understanding of Bootstrap.
Continuing from our previous Bootstrap lesson, this section will delve deeper into Buttons.
Buttons are an integral part of any website or application. They are used for various purposes, such as registering or resetting an HTML form, implementing interactive tasks like showing or hiding elements on a webpage when a button is clicked, navigating users to other pages, and much more. Bootstrap provides a quick and easy way to create and customize buttons.
To create a button in Bootstrap, you'll need to use the appropriate class depending on the button type. See the detailed instructions below.
Button types in Bootstrap
Anything that uses a class .btnwill have a default appearance of a gray button with rounded corners. However, Bootstrap also provides button styles with different colors corresponding to Bootstrap's color classes .
To make it easier to understand, you can look at the image accompanying the code below:
To see how these buttons will appear, try creating and running the following .html file:
Ví dụ Bootstrap - TipsMake.com.com Button types in Bootstrap
Then you will get buttons like the ones shown below:
The button class can be used on the element , or :
Link Button Try running the .html file below to see the result:
Ví dụ Bootstrap - TipsMake.com.com Button Elements
Link Button Thành phần của Button Button chứa link You will receive the following buttons:
Create a button with only a border.
Bootstrap 5 offers eight border-only button formats. These buttons appear as rectangles surrounding text, and only fill in color when you hover your mouse over them. You can create these buttons using the following structure:
Try running the following code to see how these buttons will appear:
Ví dụ Bootstrap - TipsMake.com.com Button with border
We will get the result as shown below:
Button size in Bootstrap
You can use classes .btn-lgfor the large button and .btn-smfor the small buttons:
Please create and run this .html file to see the button sizes in Bootstrap:
Ví dụ Bootstrap - TipsMake.com.com Button size
When you run the code above, you will get the following buttons:
Block-shaped button
Add a class .btn-blockto create a block-shaped button, with the button's width equal to the width of its parent element.
For example, a complete .html file would look like this:
Ví dụ Bootstrap - TipsMake.com.com Block-shaped button
Large block-shaped button
Small block-shaped button
We will have block-shaped buttons like this:
Clickable buttons, non-clickable buttons
You can set the state of a button to be clickable or non-clickable. The `class` .activewill make the button clickable, and the `property` disablewill make it non-clickable. Note that the `disable` property is not supported, and you must use a `class` .disabledto make the button non-clickable.
When writing in an .html file, the complete code would look like this:
Ví dụ Bootstrap - TipsMake.com.com Button state
Link không thể click The results will look like this:
Loading button
You can add a loading state to the button using a class, .spinner-borderas in the example below. We'll have a separate lesson on spinners in Bootstrap, and you'll learn many ways to customize them. Below is the most basic spinner.
Ví dụ Bootstrap - TipsMake.com.com Loading button
Add a loading state to the button:
And here are the results: