What is Btn PHP or Button Bootstrap 5? The article will summarize for you Types of buttons and how to create them in Bootstrap how!
If you are planning to develop a career in programming, you must definitely know how to use Bootstrap. Basically, it is a common HTML, CSS and JavaSript repository for responsive web development. Based on available basic components such as typography, forms, buttons, tables, grids, navigation, image carousels, etc., your web design process will no longer be difficult. You can start from existing elements or create new ones once you have an in-depth understanding of Bootstrap.
Continuing the previous Bootstrap lesson, in this part we will learn more about Buttons.
Buttons are an integral part of a website and application. They are used for different purposes, such as registering or resetting an HTML form, implementing interactive tasks such as showing or hiding certain elements on a web page when a button is clicked, navigating users. use other pages and more. Bootstrap provides a quick and easy way to create and customize buttons.
To create a button in Bootstrap you will use Depending on the button type, you will have to use it with the accompanying class. Let's see how to create the details below.
Button styles in Bootstrap
Anything that uses class .btn
The default interface will be a gray button with rounded corners. However, Bootstrap also provides button styles with different colors corresponding to the color classes in Bootstrap.
To easily visualize, you can see the image with the following code:
To see how the above buttons will appear, try creating and running the following .html file:
Ví dụ Bootstrap - Quantrimang.com
Kiểu button trong Bootstrap
Then you will receive buttons as shown below:
The button class can be used on the element ,
or
:
Link Button
Try running the .html file below to see the results:
Ví dụ Bootstrap - Quantrimang.com
You will get buttons like this:
Create a button with only a border
Bootstrap 5 provides 8 Button formats with only borders, these buttons will appear as rectangles surrounding the text, only when you hover over the button will it be colored. You can create these buttons with the following structure:
Try running the following code to see how these buttons will appear:
Ví dụ Bootstrap - Quantrimang.com
Button với đường viền
We will receive results as shown below:
Size of button in Bootstrap
You can use class .btn-lg
for big button and .btn-sm
for small buttons:
Let's create and test this .html file to see the button sizes in Bootstrap:
Ví dụ Bootstrap - Quantrimang.com
Kích thước của button
When you run the above code you will get buttons like this:
Block button
Add class .btn-block
to create a block button, with the button width equal to the width of the parent element.
For example, the full .html file would look like this:
Ví dụ Bootstrap - Quantrimang.com
Nút dạng khối
Nút dạng khối to
Nút dạng khối nhỏ
We will have block buttons like this:
Buttons are clickable, not clickable
You can set the button's state to be clickable or non-clickable. Class .active
will make the button clickable and attribute disable
make the button unclickable. Note that, disable attribute is not supported and class must be used .disabled
to make the button unclickable.
When writing in a .html file, you will complete the code as follows:
Ví dụ Bootstrap - Quantrimang.com
The displayed result will look like this:
The button is loading
You can add a loading state to the button using class .spinner-border
like the example below. We will have a separate article about spinners in Bootstrap and you will learn many ways to customize these spinners. Below is the most basic spinner.
Ví dụ Bootstrap - Quantrimang.com
Nút đang load
Thêm trạng thái đang load cho nút:
And here is the result: