<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Przyciski z Ikonami</title>
        <!-- Bootstrap CSS (zaktualizowany CDN) -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.min.css" rel="stylesheet">
    </head>
<body>

<div class="container mt-5">
    <h2>Przyciski z Ikonami</h2>

    <!-- Przyciski z ikonami -->
    <button type="button" class="btn btn-primary">
        <i class="bi bi-house"></i> Home
    </button>

    <button type="button" class="btn btn-success">
        <i class="bi bi-check-circle"></i> Zatwierdź
    </button>

    <button type="button" class="btn btn-danger">
        <i class="bi bi-trash"></i> Usuń
    </button>

    <button type="button" class="btn btn-warning">
        <i class="bi bi-exclamation-triangle"></i> Ostrzeżenie
    </button>

    <button type="button" class="btn btn-info">
        <i class="bi bi-info-circle"></i> Informacja
    </button>

    <!-- Przyciski z ikonami po prawej -->
    <button type="button" class="btn btn-secondary">
        Anuluj <i class="bi bi-x-circle"></i>
    </button>

    <!-- Przyciski z większymi ikonami -->
    <button type="button" class="btn btn-primary btn-lg">
        <i class="bi bi-plus-lg"></i> Dodaj Nowy
    </button>

</div>

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

</body>
</html>
