<!-- Basic Input -->
<div>
    <label for="basiInput" class="form-label">Basic Input</label>
    <input type="password" class="form-control" id="basiInput">
</div> 

 <!-- Input with Label -->
<div>
    <label for="labelInput" class="form-label">Input with Label</label>
    <input type="password" class="form-control" id="labelInput">
</div> 

 <!-- Input with Placeholder -->
<div>
    <label for="placeholderInput" class="form-label">Input with Placeholder</label>
    <input type="password" class="form-control" id="placeholderInput" placeholder="Placeholder">
</div> 

 <!-- Input with Value -->
<div>
    <label for="valueInput" class="form-label">Input with Value</label>
    <input type="text" class="form-control" id="valueInput" value="Input value">
</div> 

 <!-- Readonly Plain Text Input -->
<div>
    <label for="readonlyPlaintext" class="form-label">Readonly Plain Text Input</label>
    <input type="text" class="form-control-plaintext" id="readonlyPlaintext" value="Readonly input" readonly>
</div> 

 <!-- Readonly Input -->
<div>
    <label for="readonlyInput" class="form-label">Readonly Input</label>
    <input type="text" class="form-control" id="readonlyInput" value="Readonly input" readonly>
</div> 

 <!-- Disabled Input -->
<div>
    <label for="disabledInput" class="form-label">Disabled Input</label>
    <input type="text" class="form-control" id="disabledInput" value="Disabled input" disabled>
</div> 

 <!-- Input with Icon -->
<div>
    <label for="iconInput" class="form-label">Input with Icon</label>
    <div class="form-icon">
        <input type="email" class="form-control form-control-icon" id="iconInput" placeholder="example@gmail.com">
        <i class="ri-mail-unread-line"></i>
    </div>
</div> 

 <!-- Input with Icon Right -->
<div>
    <label for="iconrightInput" class="form-label">Input with Icon Right</label>
    <div class="form-icon right">
        <input type="email" class="form-control form-control-icon" id="iconrightInput" placeholder="example@gmail.com">
        <i class="ri-mail-unread-line"></i>
    </div>
</div> 

 <!-- Input Date -->
<div>
    <label for="exampleInputdate" class="form-label">Input Date</label>
    <input type="date" class="form-control" id="exampleInputdate">
</div> 

 <!-- Input Time -->
<div>
    <label for="exampleInputtime" class="form-label">Input Time</label>
    <input type="time" class="form-control" id="exampleInputtime" value="08:56 AM">
</div> 

 <!-- Input Password -->
<div>
    <label for="exampleInputpassword" class="form-label">Input Password</label>
    <input type="password" class="form-control" id="exampleInputpassword" value="44512465">
</div> 

 <!-- Example Textarea -->
<div>
    <label for="exampleFormControlTextarea5" class="form-label">Example Textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea5" rows="3"></textarea>
</div> 

 <!-- Form Text -->
<div>
    <label for="formtextInput" class="form-label">Form Text</label>
    <input type="password" class="form-control" id="formtextInput">
    <div id="passwordHelpBlock" class="form-text">
        Must be 8-20 characters long.
    </div>
</div> 

 <!-- Color Picker -->
<div>
    <label for="colorPicker" class="form-label">Color Picker</label>
    <input type="color" class="form-control form-control-color w-100" id="colorPicker" value="#364574">
</div> 

 <!-- Input Border Style -->
<div>
    <label for="borderInput" class="form-label">Input Border Style</label>
    <input type="text" class="form-control border-dashed" id="borderInput" placeholder="Enter your name">
</div> 

 <!-- Datalist example -->
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Search your country...">
<datalist id="datalistOptions">
    <option value="Switzerland">
    <option value="New York">
    <option value="France">
    <option value="Spain">
    <option value="Chicago">
    <option value="Bulgaria">
    <option value="Hong Kong">
</datalist> 

 <!-- Rounded Input -->
<div>
    <label for="exampleInputrounded" class="form-label">Rounded Input</label>
    <input type="text" class="form-control rounded-pill" id="exampleInputrounded" placeholder="Enter your name">
</div> 

 <!-- Floating Input -->
<div class="form-floating">
    <input type="text" class="form-control" id="firstnamefloatingInput" placeholder="Enter your firstname">
    <label for="firstnamefloatingInput">Floating Input</label>
</div> 

 <!-- Form Control Sm -->
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"> 

 <!-- Form Control Default -->
<input class="form-control" type="text" placeholder=".form-control-sm"> 

 <!-- Form Control Lg -->
<input class="form-control form-control-lg" type="text" placeholder=".form-control-sm"> 

 <!-- Default File Input Example -->
<div>
    <label for="formFile" class="form-label">Default file input example</label>
    <input class="form-control" type="file" id="formFile">
</div> 

 <!-- Multiple Files Input Example -->
<div>
    <label for="formFileMultiple" class="form-label">Multiple files input example</label>
    <input class="form-control" type="file" id="formFileMultiple" multiple>
</div> 

 <!-- Disabled File Input Example -->
<div>
    <label for="formFileDisabled" class="form-label">Disabled File Input Example</label>
    <input class="form-control" type="file" id="formFileDisabled" disabled>
</div> 

 <!-- File Input Sizing Small -->
<div>
    <input class="form-control form-control-sm" id="formFileSm" type="file">
</div> 

 <!-- File Input Sizing Default -->
<div>
    <input class="form-control" id="formFileSm" type="file">
</div> 

 <!-- File Input Sizing Large -->
<div>
    <input class="form-control form-control-lg" id="formFileSm" type="file">
</div> 

 <!-- Basic example -->
<div class="input-group">
    <span class="input-group-text" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div> 
 <div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
</div> 
 <div class="input-group">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <span class="input-group-text">.00</span>
</div> 
 <div class="input-group">
    <input type="text" class="form-control" placeholder="Username" aria-label="Username">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div> 
 <div class="input-group">
    <span class="input-group-text">With textarea</span>
    <textarea class="form-control" aria-label="With textarea" rows="2"></textarea>
</div> 
 <label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div> 

 <!-- Wrapping -->
<div class="input-group flex-nowrap">
    <span class="input-group-text" id="addon-wrapping">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div> 

 <!-- Input Group Sizing -->
<div class="input-group input-group-sm">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
    <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div> 

 <div class="input-group">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
    <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div> 

 <div class="input-group input-group-lg">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
    <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div> 

 <!-- Multiple Inputs -->
<div class="input-group mb-3">
    <span class="input-group-text">First and last name</span>
    <input type="text" aria-label="First name" class="form-control">
    <input type="text" aria-label="Last name" class="form-control">
</div> 

 <div class="input-group mb-3">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
    <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div> 
    
 <div class="input-group">
    <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
</div> 

 <!-- Checkbox Input -->
<div class="input-group">
    <div class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
    </div>
    <input type="text" class="form-control" aria-label="Text input with checkbox">
</div> 

 <!-- Radio Input -->
<div class="input-group">
    <div class="input-group-text">
        <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
    </div>
    <input type="text" class="form-control" aria-label="Text input with radio button">
</div> 

 <!-- Buttons Input -->
<div class="input-group">
    <button class="btn btn-outline-primary" type="button" id="button-addon1">Button</button>
    <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div> 
 <div class="input-group">
    <input type="text" class="form-control" aria-label="Recipient's username" aria-describedby="button-addon2">
    <button class="btn btn-outline-success" type="button" id="button-addon2">Button</button>
</div> 
 <div class="input-group">
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-success" type="button">Button</button>
    <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
</div> 
 <div class="input-group">
    <input type="text" class="form-control" aria-label="Recipient's username with two button addons">
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-success" type="button">Button</button>
</div> 

 <!-- Buttons with dropdowns -->
<div class="input-group">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
    <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div> 

 <div class="input-group">
    <input type="text" class="form-control" aria-label="Text input with dropdown button">
    <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
    <ul class="dropdown-menu dropdown-menu-end">
      <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div> 

 <div class="input-group">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action before</a></li>
        <li><a class="dropdown-item" href="#">Another action before</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
    <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div> 

 <!-- Select -->
<div class="input-group">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
    <select class="form-select" id="inputGroupSelect01">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div> 
 <div class="input-group">
    <select class="form-select" id="inputGroupSelect02">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        </select>
    <label class="input-group-text" for="inputGroupSelect02">Options</label>
</div> 
 <div class="input-group">
    <button class="btn btn-outline-primary" type="button">Button</button>
    <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div> 
 <div class="input-group">
    <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div> 

 <!-- File Input -->
<div class="input-group">
    <label class="input-group-text" for="inputGroupFile01">Upload</label>
    <input type="file" class="form-control" id="inputGroupFile01">
</div> 
 <div class="input-group">
    <input type="file" class="form-control" id="inputGroupFile02">
    <label class="input-group-text" for="inputGroupFile02">Upload</label>
</div> 
 <div class="input-group">
    <button class="btn btn-outline-primary" type="button" id="inputGroupFileAddon03">Button</button>
    <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
</div> 
 <div class="input-group">
    <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
    <button class="btn btn-outline-success" type="button" id="inputGroupFileAddon04">Button</button>
</div>