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">
            <div class="row">
                <div class="col-12 col-xl-3 card py-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>
                                CRUD
                            </a>
                        </li>
                    </div>
                </div>
                <div class="card col-12 col-lg-9 col-xl-6 mx-xl-3 py-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>
    </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
        </div>
    </body>
</html>