@extends('layouts.default')
{{-- Page title --}}
@section('title')
    Form Examples @parent
@stop
{{-- page level styles --}}
@section('header_styles')
    <!-- page vendors -->
    <!--end of page vendors -->
@stop
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">

        <div aria-label="breadcrumb" class="card-breadcrumb">
            <h1>Form Examples</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Content</a></li>
                <li class="breadcrumb-item active" aria-current="page">Form Examples</li>
            </ol>
        </div>
        <div class="separator-breadcrumb border-top"></div>


    </section>

    <!-- content start-->
    <section class="content">
        <div class="row ">
            <div class="col-lg-6 col-md-12 col-12">
                <div class="card">
                    <div class="card-header bg-primary text-white ">
                        <h3 class="card-title d-inline">
                            Form Action on Top
                        </h3>
                        <span class="float-end">
                            <i class="fa fa-chevron-up clickable"></i>
                            <i class="fa fa-times removepanel clickable"></i>
                        </span>
                    </div>

                    <div class="card-body">
                        <form action="#">
                            <div class="row">
                                <div class="col-md-offset-3 col-md-9 ms-auto  mb-3">
                                    <button type="submit" class="btn btn-sm btn-primary">Submit</button>
                                    &nbsp;
                                    <button type="button" class="btn btn-sm btn-danger">Cancel</button>
                                </div>
                            </div>
                            <div class="form-body">
<div class="pt-40px mb-3">
                                    <div class="row">
                                        <label for="inputUsername5" class="col-md-3 form-label">
                                            Username
                                        </label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="im im-icon-Add-User"></i></span>
                                                <input type="text" class="form-control" placeholder="Username"
                                                    id="inputUsername5">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="inputEmail1" class="col-md-3 form-label">
                                        Email
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Envelope"></i>
                                            </span>
                                            <input type="text" placeholder="Email Address" class="form-control"
                                                id="inputEmail1" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-md-3 form-label" for="password5">
                                        Password
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Key"></i>
                                            </span>
                                            <input type="password" placeholder="Password" class="form-control"
                                                id="password5" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputnumber5" class="col-md-3 form-label">
                                        Phone Number
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Phone-Wifi"></i>
                                            </span>
                                            <input type="text" placeholder="Phone Number" class="form-control"
                                                id="inputnumber5" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputAddress1" class="col-md-3 form-label">
                                        Address
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Address-Book"></i>
                                            </span>
                                            <input type="text" class="form-control" id="inputAddress1"
                                                placeholder=" Address">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <label for="inputContent1" class="col-md-3 form-label">Message</label>
                                    <div class="col-md-9">
                                        <textarea id="inputContent1" rows="3" class="form-control resize_vertical "></textarea>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-12">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title d-inline">
                            Form Action on Bottom
                        </h3>
                        <span class="float-end">
                            <i class="fa fa-chevron-up clickable"></i>
                            <i class="fa fa-times removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="card-body">
                        <form action="#">
                            <div class="form-body">
<div class="pt-40px mb-3">
                                    <div class="row">
                                        <label for="inputUsername1" class="col-md-3 form-label">
                                            Username
                                        </label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="im im-icon-Add-User"></i></span>
                                                <input type="text" class="form-control" placeholder="Username"
                                                    id="inputUsername1">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputEmail2" class="col-md-3 form-label">
                                        Email
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Envelope"></i>
                                            </span>
                                            <input type="text" placeholder="Email Address" class="form-control"
                                                id="inputEmail2" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-md-3 form-label" for="password1">
                                        Password
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Key"></i>
                                            </span>
                                            <input type="password" placeholder="Password" class="form-control"
                                                id="password1" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputnumber1" class="col-md-3 form-label">
                                        Phone Number
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Phone-Wifi"></i>
                                            </span>
                                            <input type="text" placeholder="Phone Number" class="form-control"
                                                id="inputnumber1" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputAddress2" class="col-md-3 form-label">
                                        Address
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Address-Book"></i>
                                            </span>
                                            <input type="text" class="form-control" id="inputAddress2"
                                                placeholder=" Address">
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputContent2" class="col-md-3 form-label">Message</label>
                                    <div class="col-md-9">
                                        <textarea id="inputContent2" rows="3" class="form-control resize_vertical "></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-offset-3 col-md-9 ms-auto  mb-3">
                                    <button type="submit" class="btn btn-sm btn-primary">Submit</button>
                                    &nbsp;
                                    <button type="button" class="btn btn-sm btn-danger">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-12 col-md-12">
                <div class="card">
                    <div class="card-header bg-primary text-white ">
                        <h3 class="card-title d-inline">
                            Form Action on Top & Bottom
                        </h3>
                        <span class="float-end">
                            <i class="fa fa-chevron-up clickable"></i>
                            <i class="fa fa-times removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="card-body">
                        <form action="#">
                            <div class="row">
                                <div class="col-md-offset-3 col-md-9 ms-auto mb-3">
                                    <button type="submit" class="btn btn-sm btn-primary">Submit</button>
                                    &nbsp;
                                    <button type="button" class="btn btn-sm btn-danger">Cancel</button>
                                </div>
                            </div>
                            <div class="form-body">
<div class="pt-40px">
                                    <div class="row mb-3">
                                        <label for="inputUsername2" class="col-md-3 form-label">
                                            Username
                                        </label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="im im-icon-Add-User"></i></span>
                                                <input type="text" class="form-control" placeholder="Username"
                                                    id="inputUsername2">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputEmail3" class="col-md-3 form-label">
                                        Email
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Envelope"></i>
                                            </span>
                                            <input type="text" placeholder="Email Address" class="form-control"
                                                id="inputEmail3" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-md-3 form-label" for="password2">
                                        Password
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Key"></i>
                                            </span>
                                            <input type="password" placeholder="Password" class="form-control"
                                                id="password2" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputnumber2" class="col-md-3 form-label">
                                        Phone Number
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Phone-Wifi"></i>
                                            </span>
                                            <input type="text" placeholder="Phone Number" class="form-control"
                                                id="inputnumber2" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputAddress3" class="col-md-3 form-label">
                                        Address
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Address-Book"></i>
                                            </span>
                                            <input type="text" class="form-control" id="inputAddress3"
                                                placeholder=" Address">
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputContent3" class="col-md-3 form-label">Message</label>
                                    <div class="col-md-9">
                                        <textarea id="inputContent3" rows="3" class="form-control resize_vertical "></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-offset-3 col-md-9 ms-auto mb-3">
                                    <button type="submit" class="btn btn-sm btn-primary">Submit</button>
                                    &nbsp;
                                    <button type="button" class="btn btn-sm btn-danger">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-lg-6 col-md-12 col-12">
                <div class="card">
                    <div class="card-header bg-primary text-white ">
                        <h3 class="card-title d-inline">
                            Left Aligned
                        </h3>
                        <span class="float-end">
                            <i class="fa fa-chevron-up clickable"></i>
                            <i class="fa fa-times removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="card-body">
                        <form action="#">
                            <div class=" mb-3">
                                <button type="submit" class="btn btn-sm btn-primary">Submit</button>
                                &nbsp;
                                <button type="button" class="btn btn-sm btn-danger">Cancel</button>
                            </div>
                            <div class="form-body">
<div class="pt-40px mb-3">
                                    <div class="row">
                                        <label for="inputUsername3" class="col-md-3 form-label">
                                            Username
                                        </label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="im im-icon-Add-User"></i></span>
                                                <input type="text" class="form-control" placeholder="Username"
                                                    id="inputUsername3">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputEmail4" class="col-md-3 form-label">
                                        Email
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Envelope"></i>
                                            </span>
                                            <input type="text" placeholder="Email Address" class="form-control"
                                                id="inputEmail4" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-md-3 form-label" for="password3">
                                        Password
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Key"></i>
                                            </span>
                                            <input type="password" placeholder="Password" class="form-control"
                                                id="password3" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputnumber3" class="col-md-3 form-label">
                                        Phone Number
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Phone-Wifi"></i>
                                            </span>
                                            <input type="text" placeholder="Phone Number" class="form-control"
                                                id="inputnumber3" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputAddress4" class="col-md-3 form-label">
                                        Address
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Address-Book"></i>
                                            </span>
                                            <input type="text" class="form-control" id="inputAddress4"
                                                placeholder=" Address">
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputContent4" class="col-md-3 form-label">Message</label>
                                    <div class="col-md-9">
                                        <textarea id="inputContent4" rows="3" class="form-control resize_vertical "></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="">
                                <button type="submit" class="btn btn-sm btn-primary">Submit</button>
                                &nbsp;
                                <button type="button" class="btn btn-sm btn-danger">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-12">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title d-inline">
                            Right Aligned
                        </h3>
                        <span class="float-end">
                            <i class="fa fa-chevron-up clickable"></i>
                            <i class="fa fa-times removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="card-body">
                        <form action="#">
                            <div class="text-end mb-3">
                                <button type="submit" class="btn btn-sm btn-primary">Submit</button>
                                &nbsp;
                                <button type="button" class="btn btn-sm btn-danger">Cancel</button>
                            </div>
                            <div class="form-body">
<div class="pt-40px">
                                    <div class="row mb-3">
                                        <label for="inputUsername4" class="col-md-3 form-label">
                                            Username
                                        </label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="im im-icon-Add-User"></i></span>
                                                <input type="text" class="form-control" placeholder="Username"
                                                    id="inputUsername4">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputEmail5" class="col-md-3 form-label">
                                        Email
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Envelope"></i>
                                            </span>
                                            <input type="text" placeholder="Email Address" class="form-control"
                                                id="inputEmail5" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-md-3 form-label" for="password4">
                                        Password
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Key"></i>
                                            </span>
                                            <input type="password" placeholder="Password" class="form-control"
                                                id="password4" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputnumber4" class="col-md-3 form-label">
                                        Phone Number
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Phone-Wifi"></i>
                                            </span>
                                            <input type="text" placeholder="Phone Number" class="form-control"
                                                id="inputnumber4" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputAddress5" class="col-md-3 form-label">
                                        Address
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="im im-icon-Address-Book"></i>
                                            </span>
                                            <input type="text" class="form-control" id="inputAddress5"
                                                placeholder=" Address">
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="inputContent5" class="col-md-3 form-label">Message</label>
                                    <div class="col-md-9">
                                        <textarea id="inputContent5" rows="3" class="form-control resize_vertical "></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class=" text-end">
                                <button type="submit" class="btn btn-sm btn-primary">Submit</button>
                                &nbsp;
                                <button type="button" class="btn btn-sm btn-danger">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>
    <!-- content end-->


@stop
@section('footer_scripts')
    <!--   page level js ----------->
    <!-- end of page level js -->
@stop