Lesson 10: Buttons in Bootstrap 5 - How to create different types of buttons 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:

Basic Primary Secondary Success Info Warning Danger Dark Light Link

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

 Cơ bản Chính Phụ Thành công Thông tin Cảnh báo Nguy hiểm Tối màu Xám nhạt Link 

 

Then you will get buttons like the ones shown below:

The button class can be used on the element , or :

Link Button Button 

Try running the .html file below to see the result:

 Ví dụ Bootstrap - TipsMake.com.com 

Button Elements

 Link Button Button Thành phần của Button Button chứa link Button 

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:

Chính Phụ Thành công Thông tin Cảnh báo Nguy hiểm Màu tối đậm Màu xám nhạt

 

Try running the following code to see how these buttons will appear:

 Ví dụ Bootstrap - TipsMake.com.com 

Button with border

 Chính Phụ Thành công Thông tin Cảnh báo Nguy hiểm Màu tối đậm Màu xám nhạt 

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:

Nút to Nút mặc định Nút nhỏ

Please create and run this .html file to see the button sizes in Bootstrap:

 Ví dụ Bootstrap - TipsMake.com.com 

Button size

 Nút to Kích thước mặc định Nút nhỏ 

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

 TipsMake.com TipsMake.com 

Large block-shaped button

 TipsMake.com TipsMake.com 

Small block-shaped button

 TipsMake.com TipsMake.com 

 

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

 Nút bình thường Nút có thể click Nút không thể click 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:

    Loading.   Loading.   Loading.  

And here are the results: