<div class="container py-3">
    <div class="d-lg-none col-12 bg-primary text-xs-right">
        <div class="container">
            <a href="#inbox-menu" data-toggle="collapse" class="btn btn-default bg-primary text-white">
                <i class="fa fa-life-ring"></i>
                Show menu
            </a>
        </div>
    </div>
    <div class="navbar-expand-lg">
        <div class="row">
            <div class="col-lg-4 col-12 collapse navbar-collapse py-3 align-items-lg-start" id="inbox-menu">
                <div class="d-block w-100">
                    <h3>
                        Mail Service
                    </h3>
                    <div class="list-group">
                        <a href="#" class="list-group-item active">
                            <i class="fa fa-fw fa-envelope"></i>
                            Inbox
                            <span class="float-right">
                                <span class="badge badge-primary">6</span>
                            </span>
                        </a>
                        <a href="#" class="list-group-item">
                            <i class="fa fa-fw fa-paper-plane"></i>
                            Sent Mail
                        </a>
                        <a href="#" class="list-group-item">
                            <i class="fa fa-fw fa-sad-cry"></i>
                            Important
                        </a>
                        <a href="#" class="list-group-item">
                            <i class="fa fa-fw fa-star"></i>
                            Starred
                            <span class="float-right">
                                <span class="badge badge-primary">4</span>
                            </span>
                        </a>
                        <a href="#" class="list-group-item">
                            <i class="fa fa-fw fa-file"></i>
                            Drafts
                        </a>
                        <a href="#" class="list-group-item">
                            <i class="fa fa-fw fa-tag"></i>
                            Tags
                        </a>
                        <a href="#" class="list-group-item">
                            <i class="fa fa-fw fa-trash"></i>
                            Trash
                            <span class="float-right">
                                <span class="badge badge-primary">42</span>
                            </span>
                        </a>
                    </div>
                    <div class="mt-3">
                        <a href="#" class="btn btn-primary btn-block">Compose
                            new Email</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 col-12 py-3">
                <h3>
                    Inbox
                </h3>
                <div class="table-responsive">
                    <table class="table border bg-white">
                        <thead>
                        <tr>
                            <th></th>
                            <th>From</th>
                            <th>Subject</th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <a href="#"><i class="fa fa-star"></i></a>
                                </td>
                                <td>
                                    <a href="#">
                                        Charlotte Turner
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        white compress encryption
                                    </a>
                                </td>
                                <td>
                                    
                                </td>
                                <td>
                                    Tue, 25 Oct 2022 20:43:59 GMT
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="#"><i class="fa fa-star"></i></a>
                                </td>
                                <td>
                                    <a href="#">
                                        Elsa Olson
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        contextually-based
                                    </a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td>
                                    Tue, 25 Oct 2022 05:35:59 GMT
                                </td>
                            </tr>
                            <tr class="font-weight-bold">
                                <td>
                                    <a href="#"><i class="far fa-star"></i></a>
                                </td>
                                <td>
                                    <a href="#">
                                        Mr. Roman Schaden
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        recontextualize silver Russian
                                    </a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td>
                                    Mon, 24 Oct 2022 23:00:40 GMT
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="#"><i class="fa fa-star"></i></a>
                                </td>
                                <td>
                                    <a href="#">
                                        Derrick Sauer
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        integrate backing
                                    </a>
                                </td>
                                <td>
                                    
                                </td>
                                <td>
                                    Tue, 25 Oct 2022 16:08:23 GMT
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="#"><i class="fa fa-star"></i></a>
                                </td>
                                <td>
                                    <a href="#">
                                        Brittany Haag
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        mission-critical
                                    </a>
                                </td>
                                <td>
                                    
                                </td>
                                <td>
                                    Tue, 25 Oct 2022 17:50:42 GMT
                                </td>
                            </tr>
                            <tr class="font-weight-bold">
                                <td>
                                    <a href="#"><i class="far fa-star"></i></a>
                                </td>
                                <td>
                                    <a href="#">
                                        Gladys Nader
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        wireless
                                    </a>
                                </td>
                                <td>
                                    
                                </td>
                                <td>
                                    Tue, 25 Oct 2022 12:25:39 GMT
                                </td>
                            </tr>
                            <tr class="font-weight-bold">
                                <td>
                                    <a href="#"><i class="far fa-star"></i></a>
                                </td>
                                <td>
                                    <a href="#">
                                        Yvonne Connelly
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        New
                                    </a>
                                </td>
                                <td>
                                    <i class="fa fa-paperclip"></i>
                                </td>
                                <td>
                                    Tue, 25 Oct 2022 20:38:59 GMT
                                </td>
                            </tr>
                            <tr class="font-weight-bold">
                                <td>
                                    <a href="#"><i class="far fa-star"></i></a>
                                </td>
                                <td>
                                    <a href="#">
                                        Clarence Kreiger
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        Unbranded
                                    </a>
                                </td>
                                <td>
                                    
                                </td>
                                <td>
                                    Tue, 25 Oct 2022 08:47:21 GMT
                                </td>
                            </tr>
                            <tr class="font-weight-bold">
                                <td>
                                    <a href="#"><i class="fa fa-star"></i></a>
                                </td>
                                <td>
                                    <a href="#">
                                        Sophia Ziemann
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        moratorium override
                                    </a>
                                </td>
                                <td>
                                    
                                </td>
                                <td>
                                    Tue, 25 Oct 2022 06:52:34 GMT
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="#"><i class="fa fa-star"></i></a>
                                </td>
                                <td>
                                    <a href="#">
                                        Leo Barrows Jr.
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        cultivate Fresh Franc
                                    </a>
                                </td>
                                <td>
                                    
                                </td>
                                <td>
                                    Tue, 25 Oct 2022 16:52:23 GMT
                                </td>
                            </tr>
                            <tr class="font-weight-bold">
                                <td>
                                    <a href="#"><i class="far fa-star"></i></a>
                                </td>
                                <td>
                                    <a href="#">
                                        Wilfred Denesik
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        Paradigm
                                    </a>
                                </td>
                                <td>
                                    
                                </td>
                                <td>
                                    Tue, 25 Oct 2022 20:25:15 GMT
                                </td>
                            </tr></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>