Lesson 32: Selection Menus in Bootstrap 5

Bootstrap 5 will help you add features or redesign selection boxes for your website. Here's how to create a selection menu in Bootstrap 5 .

 

Menu selection

A selection menu is used if you want to give the user multiple different options. To style a selection menu in Bootstrap 5, add the class .form-selectto the element . For example:

 Bootstrap Example 

Menu selection on TipsMake.com.com

 Danh sách lựa chọn (chọn một):
1
2
3
4
  
 Danh sách nhiều lựa chọn (giữ phím Shift để chọn nhiều hơn):
1
2
3
4
5
  Submit 

 

Menu size selection

Use classes .form-select-lgor .form-select-smto resize the selection menu.

For example:

 Bootstrap Example 

Menu size selection

Use .form-select-lg or .form-select-sm to resize the selection menu:

TipsMake
VnDoc
Downloadvn
Downloadcomvn
 
1
2
3
4
 
1
2
3
4
  

 

Disable the selection menu.

Use properties disabledto disable the selection menu. For example:

 Bootstrap Example
TipsMake
2
3
4
  

As you can see, you cannot open the selection menu by clicking because it has been disabled.

Data list

Bootstrap 5 will also style data lists. It lists a list of predefined options for an element . For example:

 Bootstrap Example 

Data list

 Lựa chọn một trang web từ danh sách:

 Submit 

Above is how to create a selection menu using Bootstrap 5. As you can see, diversifying the selection menu in Bootstrap 5 is quite flexible and easy. Hopefully, this Bootstrap 5 lesson is useful to you.