<div class="container-fluid py-4">
    <div class="row gx-4">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header pb-0">
                    <h6>Timeline with dotted line</h6>
                </div>
                <div class="card-body p-3">
                    <div class="timeline timeline-one-side" data-timeline-axis-style="dotted">
                        <div class="timeline-block mb-3">
                            <span class="timeline-step">
                                <i class="ni ni-bell-55 text-success text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-dark text-sm font-weight-bold mb-0">$2400, Design changes</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">22 DEC 7:20 PM</p>
                                <p class="text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-success">Design</span>
                            </div>
                        </div>
                        <div class="timeline-block mb-3">
                            <span class="timeline-step">
                                <i class="ni ni-html5 text-danger text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-dark text-sm font-weight-bold mb-0">New order #1832412</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">21 DEC 11 PM</p>
                                <p class="text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-danger">Order</span>
                                <span class="badge badge-sm bg-gradient-danger">#1832412</span>
                            </div>
                        </div>
                        <div class="timeline-block mb-3">
                            <span class="timeline-step">
                                <i class="ni ni-cart text-info text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-dark text-sm font-weight-bold mb-0">Server payments for April</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">21 DEC 9:34 PM</p>
                                <p class="text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-info">Server</span>
                                <span class="badge badge-sm bg-gradient-info">Payments</span>
                            </div>
                        </div>
                        <div class="timeline-block mb-3">
                            <span class="timeline-step">
                                <i class="ni ni-credit-card text-warning text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-dark text-sm font-weight-bold mb-0">New card added for order #4395133
                                </h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">20 DEC 2:20 AM</p>
                                <p class="text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-warning">Card</span>
                                <span class="badge badge-sm bg-gradient-warning">#4395133</span>
                                <span class="badge badge-sm bg-gradient-warning">Priority</span>
                            </div>
                        </div>
                        <div class="timeline-block mb-3">
                            <span class="timeline-step">
                                <i class="ni ni-key-25 text-primary text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-dark text-sm font-weight-bold mb-0">Unlock packages for development</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">18 DEC 4:54 AM</p>
                                <p class="text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-primary">Development</span>
                            </div>
                        </div>
                        <div class="timeline-block">
                            <span class="timeline-step">
                                <i class="ni ni-archive-2 text-success text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-dark text-sm font-weight-bold mb-0">New message unread</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">16 DEC</p>
                                <p class="text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-success">Message</span>
                            </div>
                        </div>
                        <div class="timeline-block">
                            <span class="timeline-step">
                                <i class="ni ni-check-bold text-info text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-dark text-sm font-weight-bold mb-0">Notifications unread</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">15 DEC</p>
                                <p class="text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                            </div>
                        </div>
                        <div class="timeline-block">
                            <span class="timeline-step">
                                <i class="ni ni-box-2 text-warning text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-dark text-sm font-weight-bold mb-0">New request</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">14 DEC</p>
                                <p class="text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-warning">Request</span>
                                <span class="badge badge-sm bg-gradient-warning">Priority</span>
                            </div>
                        </div>
                        <div class="timeline-block">
                            <span class="timeline-step">
                                <i class="ni ni-controller text-dark text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-dark text-sm font-weight-bold mb-0">Controller issues</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">13 DEC</p>
                                <p class="text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-dark">Controller</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card bg-gradient-dark">
                <div class="card-header bg-transparent pb-0">
                    <h6 class="text-white">Timeline dark with dashed line</h6>
                </div>
                <div class="card-body p-3">
                    <div class="timeline timeline-one-side" data-timeline-axis-style="dashed">
                        <div class="timeline-block mb-3">
                            <span class="timeline-step bg-dark">
                                <i class="ni ni-bell-55 text-success text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-white text-sm font-weight-bold mb-0">$2400, Design changes</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">22 DEC 7:20 PM</p>
                                <p class="text-secondary text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-success">Design</span>
                            </div>
                        </div>
                        <div class="timeline-block mb-3">
                            <span class="timeline-step bg-dark">
                                <i class="ni ni-html5 text-danger text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-white text-sm font-weight-bold mb-0">New order #1832412</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">21 DEC 11 PM</p>
                                <p class="text-secondary text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-danger">Order</span>
                                <span class="badge badge-sm bg-gradient-danger">#1832412</span>
                            </div>
                        </div>
                        <div class="timeline-block mb-3">
                            <span class="timeline-step bg-dark">
                                <i class="ni ni-cart text-info text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-white text-sm font-weight-bold mb-0">Server payments for April</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">21 DEC 9:34 PM</p>
                                <p class="text-secondary text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-info">Server</span>
                                <span class="badge badge-sm bg-gradient-info">Payments</span>
                            </div>
                        </div>
                        <div class="timeline-block mb-3">
                            <span class="timeline-step bg-dark">
                                <i class="ni ni-credit-card text-warning text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-white text-sm font-weight-bold mb-0">New card added for order #4395133
                                </h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">20 DEC 2:20 AM</p>
                                <p class="text-secondary text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-warning">Card</span>
                                <span class="badge badge-sm bg-gradient-warning">#4395133</span>
                                <span class="badge badge-sm bg-gradient-warning">Priority</span>
                            </div>
                        </div>
                        <div class="timeline-block mb-3">
                            <span class="timeline-step bg-dark">
                                <i class="ni ni-key-25 text-primary text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-white text-sm font-weight-bold mb-0">Unlock packages for development
                                </h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">18 DEC 4:54 AM</p>
                                <p class="text-secondary text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-primary">Development</span>
                            </div>
                        </div>
                        <div class="timeline-block">
                            <span class="timeline-step bg-dark">
                                <i class="ni ni-archive-2 text-success text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-white text-sm font-weight-bold mb-0">New message unread</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">16 DEC</p>
                                <p class="text-secondary text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-success">Message</span>
                            </div>
                        </div>
                        <div class="timeline-block">
                            <span class="timeline-step bg-dark">
                                <i class="ni ni-check-bold text-info text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-white text-sm font-weight-bold mb-0">Notifications unread</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">15 DEC</p>
                                <p class="text-secondary text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                            </div>
                        </div>
                        <div class="timeline-block">
                            <span class="timeline-step bg-dark">
                                <i class="ni ni-box-2 text-warning text-gradient"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-white text-sm font-weight-bold mb-0">New request</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">14 DEC</p>
                                <p class="text-secondary text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-warning">Request</span>
                                <span class="badge badge-sm bg-gradient-warning">Priority</span>
                            </div>
                        </div>
                        <div class="timeline-block">
                            <span class="timeline-step bg-dark">
                                <i class="ni ni-controller text-white"></i>
                            </span>
                            <div class="timeline-content">
                                <h6 class="text-white text-sm font-weight-bold mb-0">Controller issues</h6>
                                <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">13 DEC</p>
                                <p class="text-secondary text-sm mt-3 mb-2">
                                    People care about how you see the world, how you think, what motivates you, what
                                    you’re struggling with or afraid of.
                                </p>
                                <span class="badge badge-sm bg-gradient-dark">Controller</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
