# 
## 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

<html>
 <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
 </head>
 <body>
   <h1 class="text-primary text-center text-capitalize">Using the <code>select</code> tag with the <code>form-control</code> class</h1>
   <form class="form-group">
     <label>Select your choice below:</label>
     <select class="form-control" >
       <option>option 1</option>
       <option>option 2</option>
       <option>option 3</option>
       <option>option 4</option>
       <option>option 5</option>
       <option>option 6</option>
       <option>option 7</option>
     </select>
   </form>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
 </body>
</html>

codemirror

 ### 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 `form-control` is included. This sets up for us, the `select` button.

## The select tag with the custom-select class

<html>
 <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
 </head>
 <body>
    <h1 class="text-secondray text-center text-capitalize">Using the <code>select</code> tag with the <code>custom-select</code> class</h1>
    <form class="form-group">
     <label>Select your choice below:</label>
     <select class="custom-select" >
       <option>option 1</option>
       <option>option 2</option>
       <option>option 3</option>
       <option>option 4</option>
       <option>option 5</option>
       <option>option 6</option>
       <option>option 7</option>
     </select>
   </form>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
 </body>
</html>

## 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.

How to use a select tag in Bootstrap

Use Bootstrap's form-control or custom-select classes with the select tag to create collapsible lists.