<div class="breadcrumb">
    <h1>Form Layouts</h1>
    <ul>
        <li><a href="">Forms</a></li>
        <li>Form Layouts</li>
    </ul>
</div>

<div class="separator-breadcrumb border-top"></div>

<div class="row">
    <div class="col-lg-6 col-md-12">
        <h4>Horizontal Layout</h4>
        <p>A form control layout using row to create horizontal alignment.</p>
        <div class="card mb-5">
            <div class="card-body">
                <div class="row row-xs">
                    <div class="col-md-4">
                        <input type="text" class="form-control" placeholder="Enter your username">
                    </div>
                    <div class="col-md-4 mt-3 mt-md-0">
                        <input type="password" class="form-control" placeholder="Enter your password">
                    </div>
                    <div class="col-md-4 mt-3 mt-md-0">
                        <button class="btn btn-primary btn-block">Sign In</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="border-top mb-5"></div>
<div class="row">
    <div class="col-md-6">
        <h4>Verticle Layout</h4>
        <p>A form control layout using flex to create verticle alignment.</p>
        <div class="card mb-5">
            <div class="card-body">
                <div class="d-flex flex-column">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Enter your username">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" placeholder="Enter your password">
                    </div>
                    <button class="btn btn-primary pd-x-20">Sign In</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="border-top mb-5"></div>

<div class="row">
    <div class="col-md-6">
        <h4>Left Label Alignment</h4>
        <p>A form control layout using row with left label alignment.</p>
        <div class="card mb-5">
            <div class="card-body">
                <form>
                    <div class="form-group row">
                        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                    </div>
                    <fieldset class="form-group">
                        <div class="row">
                            <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
                            <div class="col-sm-10">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1"
                                        value="option1" checked>
                                    <label class="form-check-label" for="gridRadios1">
                                        First radio
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2"
                                        value="option2">
                                    <label class="form-check-label" for="gridRadios2">
                                        Second radio
                                    </label>
                                </div>
                                <div class="form-check disabled">
                                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3"
                                        value="option3" disabled>
                                    <label class="form-check-label" for="gridRadios3">
                                        Third disabled radio
                                    </label>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <div class="form-group row">
                        <div class="col-sm-2">Checkbox</div>
                        <div class="col-sm-10">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="gridCheck1">
                                <label class="form-check-label" for="gridCheck1">
                                    Example checkbox
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-10">
                            <button type="submit" class="btn btn-primary">Sign in</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="border-top mb-5"></div>


<div class="row">
    <div class="col-md-6">
        <h4>Form Inside Dropdown</h4>
        <p>A form group layout inside dropdown</p>
        <div ngbDropdown>
            <button ngbDropdownToggle class="btn btn-primary">Download File</button>
            <div ngbDropdownMenu class="p-3" style="width: 320px">
                <div class="d-flex flex-column">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Enter your username">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" placeholder="Enter your password">
                    </div>
                    <button class="btn btn-primary pd-x-20">Sign In</button>
                </div>
            </div>

        </div>
    </div>