Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

communitycreator
bootstrap

How to use a select tag in Bootstrap

Akande Olalekan Toheeb

Overview

The form is a Bootstrap element, which is mainly used in creating a form on our website.

Bootstrap select is a form-control. It sets up a collapsible list of items that are selectable.

Usage

Bootstrap select can be used in two ways.

  • Using the select tag with the form-control class.

  • Using the select tag with the custom-control class.

Note: Bootstrap 4 comes with customized form elements, which are meant to replace browser defaults. One of it is the custom-select class.

The select tag with the form-control class

Using the select tag with form-control

Explanation

  • Line 8: Theform element creates our form.
  • Line 9: A label is included. This gives a caption to what is going to follow.
  • Line 10: A select tag with the class form-control is included. This sets up for us, the select button.

The select tag with the custom-select class

Using the select tag with custom-select class

Explanation

  • Line 8: The form element creates our form.

  • Line 9: A label is included. This gives a caption to what is going to follow.

  • Line 10: A select tag with the class custom-select is included. This sets up the custom “select” button for us.

Bootstrap select is easy to use in creating collapsible options to choose from. Notice the difference between the two outputs and try it yourself.

RELATED TAGS

communitycreator
bootstrap

CONTRIBUTOR

Akande Olalekan Toheeb
RELATED COURSES

View all Courses

Keep Exploring