Timelines

<ul class="timeline">
    <li class="timeline-item">
        <span class="timeline-icon bg-danger">
            <i class="material-icons" data-toggle="tooltip" data-original-title="An error occurred while running this action." role="status" aria-label="An error occurred while running this action."> priority_high </i>
        </span>
        <div class="timeline-content">
            <small>Project name</small>
            <h4 role="presentation"> An error occured. </h4>
            <p class="small"> 2023-10-10 11:17 (CEST) </p>
        </div>
    </li>
    <li class="timeline-item">
        <span class="timeline-icon bg-success">
            <i class="material-icons" role="status" aria-label="Success">done</i>
        </span>
        <div class="timeline-content">
            <small>Project name</small>
            <h4 role="presentation"> Action done successfully. </h4>
            <p class="small"> 2023-10-10 11:17 (CEST) </p>
        </div>
    </li>
    <li class="timeline-item">
        <span class="timeline-icon timeline-icon">
            <i class="spinner-border spinner-border-sm" data-toggle="tooltip" data-original-title="This action is running." role="status"></i>
        </span>
        <div class="timeline-content">
            <small>This could be a project name</small>
            <h4 role="presentation"> Something is running... </h4>
            <p class="small"> 2023-10-10 16:05 (CEST) </p>
        </div>
    </li>
</ul>

<div class="d-flex flex-row">
    <ul class="timeline timeline-sm">
        <li class="timeline-item">
            <span class="timeline-icon" role="status"></span>
            <div class="timeline-content">
                <small>Project name</small>
                <h4 role="presentation">This is a title. </h4>
                <p class="small"> 2023-10-10 11:17 (CEST) </p>
            </div>
        </li>
        <li class="timeline-item">
            <span class="timeline-icon" role="status"></span>
            <div class="timeline-content">
                <small>Project name</small>
                <h4 role="presentation">This is a title. </h4>
                <p class="small"> 2023-10-10 11:17 (CEST) </p>
            </div>
        </li>
    </ul>


    <ul class="timeline">
        <li class="timeline-item">
            <span class="timeline-icon" role="status"></span>
            <div class="timeline-content">
                <small>Project name</small>
                <h4 role="presentation">This is a title. </h4>
                <p class="small"> 2023-10-10 11:17 (CEST) </p>
            </div>
        </li>
        <li class="timeline-item">
            <span class="timeline-icon" role="status"></span>
            <div class="timeline-content">
                <small>Project name</small>
                <h4 role="presentation">This is a title. </h4>
                <p class="small"> 2023-10-10 11:17 (CEST) </p>
            </div>
        </li>
    </ul>

    <ul class="timeline timeline-lg">
        <li class="timeline-item">
            <span class="timeline-icon disabled" role="status"></span>
            <div class="timeline-content">
                <small>Project name</small>
                <h4 role="presentation">This is a title. </h4>
                <p class="small"> 2023-10-10 11:17 (CEST) </p>
            </div>
        </li>
        <li class="timeline-item">
            <span class="timeline-icon" role="status"></span>
            <div class="timeline-content">
                <small>Project name</small>
                <h4 role="presentation">This is a title. </h4>
                <p class="small"> 2023-10-10 11:17 (CEST) </p>
            </div>
        </li>
    </ul>
</div>

<div class="d-flex flex-row">
    <ul class="timeline">
        <li class="timeline-item active">
        <span class="timeline-icon">
            <i class="material-icons" role="status">done</i>
        </span>
            <h3 class="timeline-content" role="presentation">Create your project</h3>
        </li>
        <li class="timeline-item">
        <span class="timeline-icon border-primary text-primary">
            <i class="material-icons" role="status">more_horiz</i>
        </span>
            <h3 class="timeline-content" role="presentation">Configure your languages</h3>
        </li>
        <li class="timeline-item">
            <span class="timeline-icon" role="status"></span>
            <h3 class="timeline-content" role="presentation">Add your website details</h3>
        </li>
        <li class="timeline-item">
            <span class="timeline-icon" role="status"></span>
            <h3 class="timeline-content" role="presentation">Connect Weglot to you site</h3>
        </li>
    </ul>

    <ul class="timeline">
        <li class="timeline-item active">
            <span class="timeline-icon">
                <i class="material-icons" role="status">done</i>
            </span>
            <h3 class="timeline-content" role="presentation">Create your project</h3>
        </li>
        <li class="timeline-item active">
            <span class="timeline-icon">
                <i class="material-icons" role="status">done</i>
            </span>
            <h3 class="timeline-content" role="presentation">Configure your languages</h3>
        </li>
        <li class="timeline-item active">
            <span class="timeline-icon">
                <i class="material-icons" role="status">done</i>
            </span>
            <h3 class="timeline-content" role="presentation">Add your website details</h3>
        </li>
        <li class="timeline-item">
            <span class="timeline-icon border-primary text-primary">
                <i class="material-icons" role="status">more_horiz</i>
            </span>
            <h3 class="timeline-content" role="presentation">Connect Weglot to you site</h3>
        </li>
        <li class="timeline-item timeline-item-sm active">
            <span class="timeline-icon">
                <i class="material-icons" role="status">done</i>
            </span>
            <h3 class="timeline-content" role="presentation">Your DNS settings</h3>
        </li>
        <li class="timeline-item timeline-item-sm">
            <span class="timeline-icon border-primary text-primary">
                <i class="material-icons" role="status">more_horiz</i>
            </span>
            <h3 class="timeline-content" role="presentation">View your translated website</h3>
        </li>
        <li class="timeline-item">
            <span class="timeline-icon" role="status"></span>
            <h3 class="timeline-content" role="presentation">Add additional information</h3>
        </li>
    </ul>

</div>

<div class="row">
    <div class="col">
        <ul class="timeline timeline-sm">
            <li class="timeline-item pb-3">
                <span class="timeline-icon" role="status"></span>
                <div class="timeline-content">
                    <div class="alert alert-secondary mb-0 text-dark">
                        Hallo, mein Hübscher!
                    </div>
                    <h4 role="presentation">
                        <small class="text-dark">Mark as reviewed by Jean - de paris '</small>
                        <br>
                        <small>43 seconds ago</small>
                    </h4>
                </div>
            </li>
            <li class="timeline-item pb-3">
                <span class="timeline-icon" role="status"></span>
                <div class="timeline-content">
                    <div class="alert alert-secondary mb-0 text-dark">
                        Hallo, mein Hübscher!
                    </div>
                    <h4 role="presentation">
                        <a class="actions-item float-end">
                            <i class="material-icons" role="img" aria-hidden="true">restore</i>
                        </a>
                        <small class="text-dark">Automatic translation</small>
                        <br>
                        <small>18 days ago</small>
                    </h4>
                </div>
            </li>
            <li class="timeline-item pb-3">
                <span class="timeline-icon" role="status"></span>
                <div class="timeline-content">
                    <div class="alert alert-secondary mb-0 text-dark">
                        Hallo, mein Hübscher!
                    </div>
                    <h4 role="presentation">
                        <a class="actions-item float-end">
                            <i class="material-icons" role="img" aria-hidden="true">restore</i>
                        </a>
                        <small class="text-dark">Automatic translation</small>
                        <br>
                        <small>18 days ago</small>
                    </h4>
                </div>
            </li>
        </ul>
    </div>
</div>