@extends('layouts.master')
@section('before-css')


@endsection

@section('main-content')
            <div class="breadcrumb">
                <h1>چیدمان</h1>
                <ul>
                    <li><a href="">فرم ها</a></li>
                    <li>طرح بندی فرم</li>
                </ul>
            </div>

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

            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <h4>چیدمان افقی</h4>
                    <p>طرح کنترل فرم با استفاده از ردیف برای ایجاد تراز افقی..</p>
                    <div class="card mb-5">
                        <div class="card-body">
                            <div class="row row-xs">
                                <div class="col-md-5">
                                    <input type="text" class="form-control" placeholder="Enter your username">
                                </div>
                                <div class="col-md-5 mt-3 mt-md-0">
                                    <input type="password" class="form-control" placeholder="Enter your password">
                                </div>
                                <div class="col-md-2 mt-3 mt-md-0">
                                    <button class="btn btn-primary btn-block">ورود</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="border-top mb-5"></div>
            <div class="row">
                <div class="col-md-6">
                    <h4>چیدمان عمودی</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">ورود</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="border-top mb-5"></div>

            <div class="row">
                <div class="col-md-6">
                    <h4>برچسب تراز سمت چپ</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">ایمیل</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">رمز عبور</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">
                                        <div class="col-form-label col-sm-2 pt-0">رادیکال ها</div>
                                        <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">
                                                    اولین 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">
                                                    دومین 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">
                                                    سومین disabled radio
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                <div class="form-group row">
                                    <div class="col-sm-2">کادر انتخاب</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">
                                                مثال کادر انتخاب
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-sm-10">
                                        <button type="submit" class="btn btn-primary">ورود</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="border-top mb-5"></div>


            <div class="row">
                <div class="col-md-6">
                    <h4>فرم داخلی بازشونده</h4>
                    <p>طرح بندی گروه فرم در داخل بازشونده</p>
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Download File
                        </button>
                        <div class="dropdown-menu bg-transparent shadow-none p-0 m-0" style="width: 320px">
                            <div class="card">
                                <div class="card-body">
                                    <div class="card-title mb-1">لطفا ابتدا وارد سیستم شوید</div>
                                    <p>Lorem ipsum dolor sit amet.</p>
                                    <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">ورود</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

@endsection

@section('page-js')




@endsection

@section('bottom-js')




@endsection
