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.

You've just finished reading the article "Lesson 32: Selection Menus in Bootstrap 5" edited by the TipsMake team. You can save lesson-32-selection-menus-in-mdcqq.pdf to your computer here to read later or print it out. We hope this article has provided you with many useful tech tips and tricks. You can search for similar articles on tips and guides. Thank you for reading and for following us regularly.