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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
        <style>
            body{ background:whitesmoke;}
        </style>
    </head>
    <body>
        <div class="container mt-2">
            <div class="row">
                <div class="col-12 col-xl-3 card py-3 align-self-start mb-3">
                    <div class="nav flex-row flex-xl-column align-self-center align-self-md-start ">
                        <li class="nav-item">
                            <a href="" class="nav-link">
                                <i class="bi-bar-chart"></i>
                                Overview
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">
                                <i class="bi-grid-3x3-gap"></i>
                                CRUD
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">
                                <i class="bi-gear"></i>
                                Settings
                            </a>
                        </li>
                    </div>
                </div>
                <div class="card col-12 col-lg-9 col-xl-6 mx-xl-3 py-3 mb-3">
                    <div class="row">
                        <div class="col-12 col-md-auto text-center text-md-start">
                            <img src="http://placehold.it/140x140" alt="">
                        </div>
                        <div class="col-12 col-md text-center text-md-start">
                            <h4>John Smith</h4>
                            <div>
                                @johnny.s
                            </div>
                            <div class="text-muted small">
                                Last seen 2 hours ago
                            </div>
                            <a href="" class="btn btn-primary"> Change photo </a>
                        </div>
                        <div class="col-12 col-md text-center text-md-end">
                            <div class="badge bg-secondary">administrator </div>
                            <div class="text-muted small">Joined 09 Dec 2017</div>
                        </div>
                    </div>

                    <div class="row mt-4 p-1">
                        <div class="col">
                            <ul class="nav nav-tabs">
                                <li class="nav-item">
                                    <a href="#" class="nav-link active">Settings</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active px-2">
                                    <form action="" class="mt-3">
                                        <div class="row ">
                                            <div class="col">
                                                <label >Full Name</label>
                                                <input type="text" class="form-control" value="John Smith">
                                            </div>
                                            <div class="col">
                                                <label for="">Username</label>
                                                <input type="text" class="form-control" value="johnny.s">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <label for="">Email</label>
                                                <input type="text" class="form-control" value="user@example.com">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <label for="">About</label>
                                                <textarea name="" id="" cols="30" rows="5" class="form-control">My Bio</textarea>
                                            </div>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col">
                                                <div class="fw-bold">Change Password</div>
                                                <label for="">Current Password</label>
                                                <input type="password" class="form-control" value="******">
                                                <label for="">New Password</label>
                                                <input type="password" class="form-control" value="******">
                                                <label for="">Confirm Password</label>
                                                <input type="password" class="form-control" value="******">
                                            </div>
                                            <div class="col">
                                                <div class="fw-bold">Keeping in Touch</div>
                                                <label for="">Email Notifications</label>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input">
                                                    <label for="" class="form-check-label">Blog posts</label>
                                                </div>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input">
                                                    <label for="" class="form-check-label">Newsletter</label>
                                                </div>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input">
                                                    <label for="" class="form-check-label">Personal offers</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-4">
                                            <div class="col text-start text-lg-end">
                                                <a href="#" class="btn btn-primary bi-check-circle-fill">
                                                    <i class=" "></i>
                                                    Save Changes
                                                </a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- right column -->
                <div class="col-12 col-lg p-0">
                    <div class="card mb-3">
                        <div class="card-body d-grid">
                            <button class="btn btn-secondary">
                                <i class="bi-arrow-right-square-fill"></i>
                                Logout
                            </button>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <div class="fw-bold">
                                Support
                            </div>
                            <p>Get fast, free help from our friendly assistants.</p>
                            <a href="#" class="btn btn-primary">Contact Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>