Documentation

Browse source code
Introduction Alerts Autosize Avatars Badges Breadcrumb Buttons Cards Carousel Colors Cursors Charts Divider Empty states Flags Form Elements Form helpers Input mask Progress Ribbons Spinners Steps Tables Tabs Timelines Toasts Tooltips Typography

Bootstrap documentation

Form Elements

Classic Input

Username
<div class="mb-2">
   <label class="form-label">Static</label>
   <div class="form-control-plaintext">Username</div>
</div>
<div class="mb-2">
   <label class="form-label">Text</label>
   <input type="text" class="form-control" name="example-text-input" placeholder="Text..">
</div>
<div class="mb-2">
   <label class="form-label">Disabled</label>
   <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
          value="Well, she turned me into a newt." disabled>
</div>
<div class="mb-2">
   <label class="form-label">Readonly</label>
   <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
          value="Well, how'd you become king, then?" readonly>
</div>

Password and validation

Invalid feedback
<div class="mb-2">
   <label class="form-label">Password</label>
   <input type="password" class="form-control" name="example-password-input" placeholder="Password..">
</div>
<div class="mb-2">
   <label class="form-label">Valid State</label>
   <input type="text" class="form-control is-valid" name="example-text-input-valid"
          placeholder="Valid State..">
   <input type="text" class="form-control mt-3 state-valid" value="Valid state">
</div>
<div class="mb-2">
   <label class="form-label">Invalid State</label>
   <input type="text" class="form-control is-invalid" name="example-text-input-invalid"
          placeholder="Invalid State..">
   <div class="invalid-feedback">Invalid feedback</div>
   <input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
</div>

Input size

Select

<div class="mb-2">
   <label class="form-label">Country</label>
   <select class="form-select">
      <option value="">Germany</option>
      <option value="">USA</option>
      <option value="">Poland</option>
   </select>
</div>

Textarea

<div class="mb-2">
   <label class="form-label">Textarea <span class="float-right text-muted">56/100</span></label>
   <textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>

Image check

<div class="mb-3">
   <label class="form-label">Image Check</label>
   <div class="row row-xs">
      <div class="col-6 col-sm-4">
         <label class="imagecheck mb-2">
            <input name="imagecheck" type="checkbox" value="1" class="imagecheck-input" />
            <span class="imagecheck-figure">
               <img src="./img/photos/77586f6ffa9fbc5e.jpg" alt="" class="imagecheck-image">
            </span>
         </label>
      </div>
      <div class="col-6 col-sm-4">
         <label class="imagecheck mb-2">
            <input name="imagecheck" type="checkbox" value="2" class="imagecheck-input"  checked/>
            <span class="imagecheck-figure">
               <img src="./img/photos/552683cc4e5f0e11.jpg" alt="" class="imagecheck-image">
            </span>
         </label>
      </div>
      <div class="col-6 col-sm-4">
         <label class="imagecheck mb-2">
            <input name="imagecheck" type="checkbox" value="3" class="imagecheck-input" />
            <span class="imagecheck-figure">
               <img src="./img/photos/3664593f945f0d8d.jpg" alt="" class="imagecheck-image">
            </span>
         </label>
      </div>
      <div class="col-6 col-sm-4">
         <label class="imagecheck mb-2">
            <input name="imagecheck" type="checkbox" value="4" class="imagecheck-input"  checked/>
            <span class="imagecheck-figure">
               <img src="./img/photos/529078594c496ec5.jpg" alt="" class="imagecheck-image">
            </span>
         </label>
      </div>
      <div class="col-6 col-sm-4">
         <label class="imagecheck mb-2">
            <input name="imagecheck" type="checkbox" value="5" class="imagecheck-input" />
            <span class="imagecheck-figure">
               <img src="./img/photos/a74c41b6fb7fdf34.jpg" alt="" class="imagecheck-image">
            </span>
         </label>
      </div>
      <div class="col-6 col-sm-4">
         <label class="imagecheck mb-2">
            <input name="imagecheck" type="checkbox" value="6" class="imagecheck-input" />
            <span class="imagecheck-figure">
               <img src="./img/photos/a159fb2bff29fda4.jpg" alt="" class="imagecheck-image">
            </span>
         </label>
      </div>
   </div>
</div>

Input color

<div class="mb-3">
   <label class="form-label">Color Input</label>
   <div class="row row-xs">
      <div class="col-auto">
         <label class="colorinput">
            <input name="color" type="checkbox" value="blue" class="colorinput-input" />
            <span class="colorinput-color bg-blue"></span>
         </label>
      </div>
      <div class="col-auto">
         <label class="colorinput">
            <input name="color" type="checkbox" value="azure" class="colorinput-input"  checked/>
            <span class="colorinput-color bg-azure"></span>
         </label>
      </div>
      <div class="col-auto">
         <label class="colorinput">
            <input name="color" type="checkbox" value="indigo" class="colorinput-input" />
            <span class="colorinput-color bg-indigo"></span>
         </label>
      </div>
      <div class="col-auto">
         <label class="colorinput">
            <input name="color" type="checkbox" value="purple" class="colorinput-input" />
            <span class="colorinput-color bg-purple"></span>
         </label>
      </div>
      <div class="col-auto">
         <label class="colorinput">
            <input name="color" type="checkbox" value="pink" class="colorinput-input" />
            <span class="colorinput-color bg-pink"></span>
         </label>
      </div>
      <div class="col-auto">
         <label class="colorinput">
            <input name="color" type="checkbox" value="red" class="colorinput-input" />
            <span class="colorinput-color bg-red"></span>
         </label>
      </div>
      <div class="col-auto">
         <label class="colorinput">
            <input name="color" type="checkbox" value="orange" class="colorinput-input" />
            <span class="colorinput-color bg-orange"></span>
         </label>
      </div>
      <div class="col-auto">
         <label class="colorinput">
            <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
            <span class="colorinput-color bg-yellow"></span>
         </label>
      </div>
      <div class="col-auto">
         <label class="colorinput">
            <input name="color" type="checkbox" value="lime" class="colorinput-input" />
            <span class="colorinput-color bg-lime"></span>
         </label>
      </div>
      <div class="col-auto">
         <label class="colorinput">
            <input name="color" type="checkbox" value="green" class="colorinput-input" />
            <span class="colorinput-color bg-green"></span>
         </label>
      </div>
   </div>
</div>

Input color picker

<div class="mb-3">
   <label class="form-label">Color picker</label>
   <input type="color" class="form-control form-control-color" value="#206bc4" title="Choose your color">
</div>

Datalists

<div class="mb-3">
   <label class="form-label">Datalist example</label>
   <input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
   <datalist id="datalistOptions">
      <option value="Aruba"/>
      <option value="Afghanistan"/>
      <option value="Angola"/>
      <option value="Anguilla"/>
      <option value="Albania"/>
      <option value="Andorra"/>
      <option value="United Arab Emirates"/>
      <option value="Argentina"/>
      <option value="Armenia"/>
      <option value="American Samoa"/>
   </datalist>
</div>

Custom selectboxes

<div class="mb-3">
   <label class="form-label">Shipping methods</label>
   <div class="selectgroup selectgroup-vertical">
      <label class="selectgroup-item">
         <input type="radio" name="shipping-method" value="Unregistered" class="selectgroup-input" checked>
         <span class="selectgroup-button">Unregistered</span>
      </label>
      <label class="selectgroup-item">
         <input type="radio" name="shipping-method" value="Priority Mail" class="selectgroup-input">
         <span class="selectgroup-button">Priority Mail</span>
      </label>
      <label class="selectgroup-item">
         <input type="radio" name="shipping-method" value="Express Mail" class="selectgroup-input">
         <span class="selectgroup-button">Express Mail</span>
      </label>
   </div>
</div>
<div class="mb-3">
   <label class="form-label">Icons input</label>
   <div class="selectgroup w-100">
      <label class="selectgroup-item">
         <input type="radio" name="device" value="smartphone" class="selectgroup-input" checked>
         <span class="selectgroup-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12" y2="18"></line></svg>
         </span>
      </label>
      <label class="selectgroup-item">
         <input type="radio" name="device" value="tablet" class="selectgroup-input">
         <span class="selectgroup-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="4" y="2" width="16" height="20" rx="2" ry="2" transform="rotate(180 12 12)"></rect><line x1="12" y1="18" x2="12" y2="18"></line></svg>
         </span>
      </label>
      <label class="selectgroup-item">
         <input type="radio" name="device" value="monitor" class="selectgroup-input">
         <span class="selectgroup-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
         </span>
      </label>
      <label class="selectgroup-item">
         <input type="radio" name="device" value="x" class="selectgroup-input">
         <span class="selectgroup-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
         </span>
      </label>
   </div>
</div>
<div class="mb-3">
   <label class="form-label">Icon input</label>
   <div class="selectgroup selectgroup-pills">
      <label class="selectgroup-item">
         <input type="checkbox" name="name" value="sun" class="selectgroup-input" checked>
         <span class="selectgroup-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
         </span>
      </label>
      <label class="selectgroup-item">
         <input type="checkbox" name="name" value="moon" class="selectgroup-input">
         <span class="selectgroup-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
         </span>
      </label>
      <label class="selectgroup-item">
         <input type="checkbox" name="name" value="cloud-rain" class="selectgroup-input">
         <span class="selectgroup-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16" y1="13" x2="16" y2="21"></line><line x1="8" y1="13" x2="8" y2="21"></line><line x1="12" y1="15" x2="12" y2="23"></line><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path></svg>
         </span>
      </label>
      <label class="selectgroup-item">
         <input type="checkbox" name="name" value="cloud" class="selectgroup-input">
         <span class="selectgroup-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
         </span>
      </label>
      <label class="selectgroup-item">
         <input type="checkbox" name="name" value="Other" class="selectgroup-input">
         <span class="selectgroup-button">Other</span>
      </label>
   </div>
</div>
<div class="mb-3">
   <label class="form-label">Your skills</label>
   <div class="selectgroup selectgroup-pills selectgroup-separated">
      <label class="selectgroup-item">
         <input type="checkbox" name="name" value="HTML" class="selectgroup-input" checked>
         <span class="selectgroup-button">HTML</span>
      </label>
      <label class="selectgroup-item">
         <input type="checkbox" name="name" value="CSS" class="selectgroup-input">
         <span class="selectgroup-button">CSS</span>
      </label>
      <label class="selectgroup-item">
         <input type="checkbox" name="name" value="PHP" class="selectgroup-input">
         <span class="selectgroup-button">PHP</span>
      </label>
      <label class="selectgroup-item">
         <input type="checkbox" name="name" value="JavaScript" class="selectgroup-input">
         <span class="selectgroup-button">JavaScript</span>
      </label>
   </div>
</div>

Toggle switches

Toggle switches
Single switch
<div class="mb-3">
   <div class="form-label">Toggle switches</div>
   <label class="form-check form-switch">
      <input class="form-check-input" type="checkbox" checked>
      <span class="form-check-label">Option 1</span>
   </label>
   <label class="form-check form-switch">
      <input class="form-check-input" type="checkbox">
      <span class="form-check-label">Option 2</span>
   </label>
   <label class="form-check form-switch">
      <input class="form-check-input" type="checkbox">
      <span class="form-check-label">Option 3</span>
   </label>
</div>
<div class="mb-3">
   <div class="form-label">Single switch</div>
   <label class="form-check form-switch">
      <input class="form-check-input" type="checkbox">
      <span class="form-check-label">I agree with terms and conditions</span>
   </label>
</div>

Radios

Radios
Inline Radios
<div class="mb-3">
   <div class="form-label">Radios</div>
   <div>
      <label class="form-check">
         <input class="form-check-input" type="radio" checked>
         <span class="form-check-label">Option 1</span>
      </label>
      <label class="form-check">
         <input class="form-check-input" type="radio">
         <span class="form-check-label">Option 2</span>
      </label>
      <label class="form-check">
         <input class="form-check-input" type="radio" disabled>
         <span class="form-check-label">Option 3</span>
      </label>
      <label class="form-check">
         <input class="form-check-input" type="radio" checked disabled>
         <span class="form-check-label">Option 4</span>
      </label>
   </div>
</div>
<div class="mb-3">
   <div class="form-label">Inline Radios</div>
   <div>
      <label class="form-check form-check-inline">
         <input class="form-check-input" type="radio" checked>
         <span class="form-check-label">Option 1</span>
      </label>
      <label class="form-check form-check-inline">
         <input class="form-check-input" type="radio">
         <span class="form-check-label">Option 2</span>
      </label>
      <label class="form-check form-check-inline">
         <input class="form-check-input" type="radio" disabled>
         <span class="form-check-label">Option 3</span>
      </label>
   </div>
</div>

Checkboxes

Checkboxes
Inline Checkboxes
<div class="mb-3">
   <div class="form-label">Checkboxes</div>
   <div>
      <label class="form-check">
         <input class="form-check-input" type="checkbox">
         <span class="form-check-label">Checkbox input</span>
      </label>
      <label class="form-check">
         <input class="form-check-input" type="checkbox" disabled>
         <span class="form-check-label">Disabled checkbox input</span>
      </label>
      <label class="form-check">
         <input class="form-check-input" type="checkbox" checked>
         <span class="form-check-label">Checked checkbox input</span>
      </label>
   </div>
</div>
<div class="mb-3">
   <div class="form-label">Inline Checkboxes</div>
   <div>
      <label class="form-check form-check-inline">
         <input class="form-check-input" type="checkbox">
         <span class="form-check-label">Option 1</span>
      </label>
      <label class="form-check form-check-inline">
         <input class="form-check-input" type="checkbox" disabled>
         <span class="form-check-label">Option 2</span>
      </label>
      <label class="form-check form-check-inline">
         <input class="form-check-input" type="checkbox" checked>
         <span class="form-check-label">Option 3</span>
      </label>
   </div>
</div>

Range input

<div class="mb-3">
   <label class="form-label">Range input</label>
   <input type="range" class="form-range" min="0" max="10" step="1">
</div>

Sample form

<fieldset class="form-fieldset">
   <div class="mb-2">
      <label class="form-label">Full name<span class="form-required">*</span></label>
      <input type="text" class="form-control"/>
   </div>
   <div class="mb-2">
      <label class="form-label">Company<span class="form-required">*</span></label>
      <input type="text" class="form-control"/>
   </div>
   <div class="mb-2">
      <label class="form-label">Email<span class="form-required">*</span></label>
      <input type="email" class="form-control"/>
   </div>
   <div class="mb-2 mb-0">
      <label class="form-label">Phone number</label>
      <input type="tel" class="form-control"/>
   </div>
</fieldset>

Input group

News Messages
Edit Profile 
<div class="mb-2">
   <label class="form-label">Input group</label>
   <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for&hellip;">
      <span class="input-group-append">
         <button class="btn btn-primary" type="button">Go!</button>
      </span>
   </div>
</div>
<div class="mb-2">
   <label class="form-label">Input group buttons</label>
   <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-append">
         <button type="button" class="btn btn-primary">Action</button>
         <button data-toggle="dropdown" type="button"
                 class="btn btn-primary dropdown-toggle"></button>
         <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#">
               News
            </a>
            <a class="dropdown-item" href="#">
               Messages
            </a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">
               Edit Profile
            </a>
         </div>
      </div>
   </div>
</div>

Input with icon

<div class="mb-2">
   <label class="form-label">Icon input</label>
   <div class="input-icon mb-3">
      <input type="text" class="form-control" placeholder="Search for&hellip;">
      <span class="input-icon-addon">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
      </span>
   </div>
   <div class="input-icon">
      <span class="input-icon-addon">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
      </span>
      <input type="text" class="form-control" placeholder="Username">
   </div>
</div>

Separated inputs

<div class="mb-2">
   <label class="form-label">Separated inputs</label>
   <div class="row row-xs">
      <div class="col">
         <input type="text" class="form-control" placeholder="Search for&hellip;">
      </div>
      <span class="col-auto">
         <button class="btn btn-secondary" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
         </button>
      </span>
   </div>
</div>

Custom Input examples

@
.tabler.io
https://example.com/users/
$
.00 
<div class="mb-2">
   <label class="form-label">Username</label>
   <div class="input-group">
      <div class="input-group-prepend">
         <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="username" value="">
   </div>
</div>
<div class="mb-2">
   <label class="form-label">Subdomain</label>
   <div class="input-group">
      <input type="text" class="form-control" placeholder="subdomain" value="">
      <div class="input-group-append">
         <span class="input-group-text">.tabler.io</span>
      </div>
   </div>
</div>
<div class="mb-2">
   <label class="form-label">Your vanity URL</label>
   <div class="input-group">
      <div class="input-group-prepend">
         <span class="input-group-text">https://example.com/users/</span>
      </div>
      <input type="text" class="form-control">
   </div>
</div>
<div class="mb-2">
   <label class="form-label">Price</label>
   <div class="input-group">
      <div class="input-group-prepend">
         <span class="input-group-text">$</span>
      </div>
      <input type="text" class="form-control">
      <div class="input-group-append">
         <span class="input-group-text">.00</span>
      </div>
   </div>
</div>

Date component

<div class="mb-2">
   <label class="form-label">Date of birth</label>
   <div class="row row-xs">
      <div class="col-5">
         <select name="user[month]" class="form-select">
            <option value="">Month</option>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option selected="selected" value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
         </select>
      </div>
      <div class="col-3">
         <select name="user[day]" class="form-select">
            <option value="">Day</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20" selected>20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
         </select>
      </div>
      <div class="col-4">
         <select name="user[year]" class="form-select">
            <option value="">Year</option>
            <option value="2014">2014</option>
            <option value="2013">2013</option>
            <option value="2012">2012</option>
            <option value="2011">2011</option>
            <option value="2010">2010</option>
            <option value="2009">2009</option>
            <option value="2008">2008</option>
            <option value="2007">2007</option>
            <option value="2006">2006</option>
            <option value="2005">2005</option>
            <option value="2004">2004</option>
            <option value="2003">2003</option>
            <option value="2002">2002</option>
            <option value="2001">2001</option>
            <option value="2000">2000</option>
            <option value="1999">1999</option>
            <option value="1998">1998</option>
            <option value="1997">1997</option>
            <option value="1996">1996</option>
            <option value="1995">1995</option>
            <option value="1994">1994</option>
            <option value="1993">1993</option>
            <option value="1992">1992</option>
            <option value="1991">1991</option>
            <option value="1990">1990</option>
            <option value="1989" selected>1989</option>
            <option value="1988">1988</option>
            <option value="1987">1987</option>
            <option value="1986">1986</option>
            <option value="1985">1985</option>
            <option value="1984">1984</option>
            <option value="1983">1983</option>
            <option value="1982">1982</option>
            <option value="1981">1981</option>
            <option value="1980">1980</option>
            <option value="1979">1979</option>
            <option value="1978">1978</option>
            <option value="1977">1977</option>
            <option value="1976">1976</option>
            <option value="1975">1975</option>
            <option value="1974">1974</option>
            <option value="1973">1973</option>
            <option value="1972">1972</option>
            <option value="1971">1971</option>
            <option value="1970">1970</option>
            <option value="1969">1969</option>
            <option value="1968">1968</option>
            <option value="1967">1967</option>
            <option value="1966">1966</option>
            <option value="1965">1965</option>
            <option value="1964">1964</option>
            <option value="1963">1963</option>
            <option value="1962">1962</option>
            <option value="1961">1961</option>
            <option value="1960">1960</option>
            <option value="1959">1959</option>
            <option value="1958">1958</option>
            <option value="1957">1957</option>
            <option value="1956">1956</option>
            <option value="1955">1955</option>
            <option value="1954">1954</option>
            <option value="1953">1953</option>
            <option value="1952">1952</option>
            <option value="1951">1951</option>
            <option value="1950">1950</option>
            <option value="1949">1949</option>
            <option value="1948">1948</option>
            <option value="1947">1947</option>
            <option value="1946">1946</option>
            <option value="1945">1945</option>
            <option value="1944">1944</option>
            <option value="1943">1943</option>
            <option value="1942">1942</option>
            <option value="1941">1941</option>
            <option value="1940">1940</option>
            <option value="1939">1939</option>
            <option value="1938">1938</option>
            <option value="1937">1937</option>
            <option value="1936">1936</option>
            <option value="1935">1935</option>
            <option value="1934">1934</option>
            <option value="1933">1933</option>
            <option value="1932">1932</option>
            <option value="1931">1931</option>
            <option value="1930">1930</option>
            <option value="1929">1929</option>
            <option value="1928">1928</option>
            <option value="1927">1927</option>
            <option value="1926">1926</option>
            <option value="1925">1925</option>
            <option value="1924">1924</option>
            <option value="1923">1923</option>
            <option value="1922">1922</option>
            <option value="1921">1921</option>
            <option value="1920">1920</option>
            <option value="1919">1919</option>
            <option value="1918">1918</option>
            <option value="1917">1917</option>
            <option value="1916">1916</option>
            <option value="1915">1915</option>
            <option value="1914">1914</option>
            <option value="1913">1913</option>
            <option value="1912">1912</option>
            <option value="1911">1911</option>
            <option value="1910">1910</option>
            <option value="1909">1909</option>
            <option value="1908">1908</option>
            <option value="1907">1907</option>
            <option value="1906">1906</option>
            <option value="1905">1905</option>
            <option value="1904">1904</option>
            <option value="1903">1903</option>
            <option value="1902">1902</option>
            <option value="1901">1901</option>
            <option value="1900">1900</option>
            <option value="1899">1899</option>
            <option value="1898">1898</option>
            <option value="1897">1897</option>
         </select>
      </div>
   </div>
</div>

Input with button

Action Another action Something else here Separated link 
<div class="mb-2">
   <label class="form-label">Button input</label>
   <div class="input-group">
      <div class="input-group-prepend">
         <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
                 aria-haspopup="true" aria-expanded="false">
            Action
         </button>
         <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
         </div>
      </div>
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
   </div>
</div>