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/[email protected]/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="[email protected]">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="">About</label>
                                                <textarea class="form-control" cols="30" rows="10">My Bio
                                                </textarea>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card col-12 col-md col-xl-2">
                    test
                </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/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    </body>
</html>