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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>


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