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

 1234
  
 12345
  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

      
 
 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.