Untitled

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
        <style>
            body{ background:whitesmoke;}
        </style>
    </head>
    <body>

        <div class="container">
            <div class="row mt-3">
                <div class="card col-12 col-xl-2 mb-3 mb-xl-0 align-self-start">
                    <ul class="nav flex-row flex-xl-column py-3 ">
                        <li class="nav-item">
                            <a href="" class="nav-link">
                                <i class="fa fa-bar-chart"></i>
                                Overview
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">
                                <i class="fa fa-th"></i>
                                CRUD
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">
                                <i class="fa fa-cog"></i>
                                Settings
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card mx-xl-3 col-12 col-md-9 col-xl mr-md-3 mb-3 mb-xl-0">
                    <div class="row py-3">
                        <div class="col-12 text-center col-md-auto">
                            <img src="https://placehold.it/140x140" alt="">
                        </div>
                        <div class="col-12 text-center col-md text-md-left">
                            <h4 class="m-0">John Smith</h4>
                            <div class="mb-1">
                                @johnny.s
                            </div>
                            <div class="text-muted mb-2 small">
                                Last seen 2 hours ago
                            </div>
                            <span class="btn btn-primary">
                                <i class="fa fa-camera"></i>
                                 Change photo
                            </span>
                        </div>
                        <div class="col-12 text-center col-md text-md-right">
                            <div class="badge bg-secondary text-white">
                                administrator
                            </div>
                            <div class="small text-muted">
                                Joined 09 Dec 2017
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3 px-3">
                        <ul class="nav nav-tabs w-100">
                            <li class="nav-item">
                                <a href="#" class="nav-link active">
                                    Settings
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content w-100">
                            <div class="tab-pane active">
                                <form action="">
                                    <div class="row pt-3">
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="">Full Name</label>
                                                <input type="text" class="form-control" value="John Smith">
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="">Username</label>
                                                <input type="text" class="form-control" value="johnny.s">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="">Email</label>
                                                <input type="text" class="form-control" value="user@example.com">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="">About</label>
                                                <textarea class="form-control" cols="30" rows="5">My Bio
                                                </textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <strong class="my-2 d-block">Change Password</strong>
                                            <!-- <div class="font-weight-bold">Change Password</div> -->
                                            <div class="form-group">
                                                <label for="">Current Password</label>
                                                <input type="password" class="form-control" value="asdfge">
                                            </div>
                                            <div class="form-group">
                                                <label for="">New Password</label>
                                                <input type="password" class="form-control" value="asdfge">
                                            </div>
                                            <div class="form-group">
                                                <label for="pass">Confirm Password</label>
                                                <input id="pass" type="password" class="form-control" value="asdfge">
                                            </div>
                                        </div>
                                        <div class="col ml-5">
                                            <strong class="my-2 d-block">Keeping in Touch</strong>
                                            <label for="" class="d-block">Email Notifications</label>
                                            <!-- <div class="custom-controls-stacked"> -->
                                            <div class="form-group pl-2">
                                                <div class="custom-control custom-checkbox">
                                                    <input id="blog" type="checkbox" class="custom-control-input" checked>
                                                    <label for="blog" class="custom-control-label">Blog posts</label>
                                                </div>
                                                <div class="custom-control custom-checkbox">
                                                    <input id="news" type="checkbox" class="custom-control-input" checked>
                                                    <label for="news" class="custom-control-label">Newsletter</label>
                                                </div>
                                                <div class="custom-control custom-checkbox">
                                                    <input id="offers" type="checkbox" class="custom-control-input" checked>
                                                    <label for="offers" class="custom-control-label">Personal offers</label>
                                                </div>
                                            </div>
                                            <!-- </div> -->
                                        </div>
                                    </div>
                                    <div class="row justify-content-end my-4">
                                        <div class="col col-md-auto">
                                            <input type="submit" value="Save Changes" class="btn btn-primary btn-block">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md col-xl-2 px-0">
                    <div class="card mb-3">
                        <div class="card-body">
                            <button class="btn btn-secondary btn-block">
                                <i class="fa fa-sign-out"></i>
                                Logout
                            </button>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <strong>Support</strong>
                            <p> Get fast, free help from our friendly assistants.</p>
                            <a href="#" class="btn btn-primary"> Contact Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scripts -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    </body>
</html>