<div class="col-md-6">
  <div class="card">
    <h5 class="card-header">Default</h5>
    <div class="card-body">
      
      <div>
        <label for="defaultFormControlInput" class="form-label">Name</label>
        <input type="text" class="form-control" id="defaultFormControlInput" placeholder="John Doe" aria-describedby="defaultFormControlHelp" />
        <div id="defaultFormControlHelp" class="form-text">
          We'll never share your details with anyone else.
        </div>
      </div>

      <hr class="m-0" />

      <h5 class="card-header">Float label</h5>
      <div class="form-floating">
        <input type="text" class="form-control" id="floatingInput" placeholder="John Doe" aria-describedby="floatingInputHelp" />
        <label for="floatingInput">Name</label>
        <div id="floatingInputHelp" class="form-text">
          We'll never share your details with anyone else.
        </div>
      </div>

      <hr class="m-0" />

      <h5 class="card-header">Autosize</h5>
      <div class="card-body">
        <textarea id="autosize-demo" rows="3" class="form-control autosize"></textarea>
      </div>

    </div>
  </div>
</div>
    

<div class="card mb-6">
    <h5 class="card-header">Checkboxes and Radios</h5>

    <!-- Checkboxes and Radios -->
    <div class="row row-bordered g-0">
        <div class="col-md p-6">
            <small class="fw-medium">Checkboxes</small>

            <div class="form-check form-check-dark mt-4">
                <input class="form-check-input" type="checkbox" id="defaultCheck1" />
                <label class="form-check-label" for="defaultCheck1">
                    Unchecked
                </label>
            </div>

            <div class="form-check form-check-dark">
                <input class="form-check-input" type="checkbox" id="defaultCheck3" checked />
                <label class="form-check-label" for="defaultCheck3">
                    Checked
                </label>
            </div>
        </div>

        <div class="col-md p-6">
            <small class="fw-medium">Radio</small>

            <div class="form-check form-check-dark mt-4">
                <input class="form-check-input"
                       type="radio"
                       name="default-radio-1"
                       id="defaultRadio1" />
                <label class="form-check-label" for="defaultRadio1">
                    Unchecked
                </label>
            </div>

            <div class="form-check form-check-dark">
                <input class="form-check-input"
                       type="radio"
                       name="default-radio-1"
                       id="defaultRadio2"
                       checked />
                <label class="form-check-label" for="defaultRadio2">
                    Checked
                </label>
            </div>
        </div>
    </div>

    <hr class="m-0" />

    <!-- Inline Checkboxes -->
    <div class="row row-bordered g-0">
        <div class="col-md p-6">
            <small class="fw-medium d-block">Inline Checkboxes</small>

            <div class="form-check form-check-dark form-check-inline mt-4">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" />
                <label class="form-check-label" for="inlineCheckbox1">1</label>
            </div>

            <div class="form-check form-check-dark form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox2" />
                <label class="form-check-label" for="inlineCheckbox2">2</label>
            </div>
        </div>

        <div class="col-md p-6">
            <small class="fw-medium d-block">Inline Radio</small>

            <div class="form-check form-check-dark form-check-inline mt-4">
                <input class="form-check-input"
                       type="radio"
                       name="inlineRadioOptions"
                       id="inlineRadio1" />
                <label class="form-check-label" for="inlineRadio1">1</label>
            </div>

            <div class="form-check form-check-dark form-check-inline">
                <input class="form-check-input"
                       type="radio"
                       name="inlineRadioOptions"
                       id="inlineRadio2" />
                <label class="form-check-label" for="inlineRadio2">2</label>
            </div>
        </div>
    </div>
</div>

    

<div class="card">
    <h5 class="card-header">Form Controls</h5>
    <div class="card-body">

        <div class="mb-4">
            <label for="exampleFormControlInput1" class="form-label">
                Email address
            </label>
            <input type="email"
                   class="form-control"
                   id="exampleFormControlInput1"
                   placeholder="name@example.com" />
        </div>

        <div class="mb-4">
            <label for="exampleFormControlSelect1" class="form-label">
                Example select
            </label>
            <select class="form-select"
                    id="exampleFormControlSelect1"
                    aria-label="Default select example">
                <option selected>Open this select menu</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </div>

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

    </div>
</div>

        

<!-- HTML5 Inputs -->
<div class="card mb-6">
    <h5 class="card-header">HTML5 Inputs</h5>
    <div class="card-body">

        <div class="mb-4 row">
            <label for="html5-text-input" class="col-md-2 col-form-label">Text</label>
            <div class="col-md-10">
                <input class="form-control" type="text" value="Sneat" id="html5-text-input" />
            </div>
        </div>

        <div class="mb-4 row">
            <label for="html5-search-input" class="col-md-2 col-form-label">Search</label>
            <div class="col-md-10">
                <input class="form-control" type="search" value="Search ..." id="html5-search-input" />
            </div>
        </div>

        <div class="mb-4 row">
            <label for="html5-email-input" class="col-md-2 col-form-label">Email</label>
            <div class="col-md-10">
                <input class="form-control" type="email" value="john@example.com" id="html5-email-input" />
            </div>
        </div>

        <div class="mb-4 row">
            <label for="html5-tel-input" class="col-md-2 col-form-label">Phone</label>
            <div class="col-md-10">
                <input class="form-control" type="tel" value="90-(164)-188-556" id="html5-tel-input" />
            </div>
        </div>

        <div class="mb-4 row">
            <label for="html5-date-input" class="col-md-2 col-form-label">Date</label>
            <div class="col-md-10">
                <input class="form-control" type="date" value="2021-06-18" id="html5-date-input" />
            </div>
        </div>

    </div>
</div>

        

<!-- File input -->
<div class="card">
    <div class="card-body">

        <div class="mb-4">
            <label for="formFile" class="form-label">Default file input example</label>
            <input class="form-control" type="file" id="formFile" />
        </div>

        <div class="mb-4">
            <label for="formFileMultiple" class="form-label">Multiple files input example</label>
            <input class="form-control" type="file" id="formFileMultiple" multiple />
        </div>

        <div class="mb-4">
            <div class="input-group">
                <input type="file" class="form-control" id="inputGroupFile02" />
                <label class="input-group-text" for="inputGroupFile02">Upload</label>
            </div>
        </div>

        <div class="form-check form-check-dark form-switch mb-2">
            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" />
            <label class="form-check-label" for="flexSwitchCheckDefault">
                Default switch checkbox input
            </label>
        </div>

        <div class="form-check form-check-dark form-switch mb-2">
            <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked />
            <label class="form-check-label" for="flexSwitchCheckChecked">
                Checked switch checkbox input
            </label>
        </div>

        <div class="small fw-medium mt-4">Default with icon</div>
        <label class="switch">
            <input type="checkbox" class="switch-input" />
            <span class="switch-toggle-slider">
                <span class="switch-on">
                    <i class="icon-base bx bx-check"></i>
                </span>
                <span class="switch-off">
                    <i class="icon-base bx bx-x"></i>
                </span>
            </span>
            <span class="switch-label">With icon</span>
        </label>

        <div class="mb-2">
            <label for="formRange1" class="form-label">Example range</label>
            <input type="range" class="form-range" id="formRange1" />
        </div>

    </div>
</div>

        

<div class="card mb-6">
    <h5 class="card-header">Merged</h5>
    <div class="card-body demo-vertical-spacing demo-only-element">

        <div class="input-group input-group-merge">
            <span class="input-group-text" id="basic-addon-search31">
                <i class="icon-base bx bx-search"></i>
            </span>
            <input type="text"
                   class="form-control"
                   placeholder="Search..."
                   aria-label="Search..."
                   aria-describedby="basic-addon-search31" />
        </div>

        <div class="form-password-toggle">
            <label class="form-label" for="basic-default-password32">Password</label>
            <div class="input-group input-group-merge">
                <input type="password"
                       class="form-control"
                       id="basic-default-password32"
                       placeholder="••••••••••••"
                       aria-describedby="basic-default-password" />
                <span class="input-group-text cursor-pointer" id="basic-default-password">
                    <i class="icon-base bx bx-hide"></i>
                </span>
            </div>
        </div>

        <div class="input-group input-group-merge">
            <input type="text"
                   class="form-control"
                   placeholder="Recipient's username"
                   aria-label="Recipient's username"
                   aria-describedby="basic-addon33" />
            <span class="input-group-text" id="basic-addon33">example.com</span>
        </div>

        <div class="input-group input-group-merge">
            <span class="input-group-text">$</span>
            <input type="number"
                   class="form-control"
                   placeholder="100"
                   aria-label="Amount (to the nearest dollar)" />
            <span class="input-group-text">.00</span>
        </div>

        <div class="input-group input-group-merge">
            <span class="input-group-text">With textarea</span>
            <textarea class="form-control" aria-label="With textarea"></textarea>
        </div>

    </div>
</div>