Thay đổi màu sắc với Bootstrap 5.3.2

Trong phiên bản Bootstrap 5.3.2, tất cả màu sắc được khai báo trong root

:root {

--bs-blue: #0d6efd;

--bs-indigo: #6610f2;

--bs-purple: #6f42c1;

--bs-pink: #d63384;

--bs-red: #dc3545;

--bs-orange: #fd7e14;

--bs-yellow: #ffc107;

--bs-green: #198754;

--bs-teal: #20c997;

--bs-cyan: #0dcaf0;

--bs-black: #000;

--bs-white: #fff;

--bs-gray: #6c757d;

--bs-gray-dark: #343a40;

--bs-gray-100: #f8f9fa;

--bs-gray-200: #e9ecef;

--bs-gray-300: #dee2e6;

--bs-gray-400: #ced4da;

--bs-gray-500: #adb5bd;

--bs-gray-600: #6c757d;

--bs-gray-700: #495057;

--bs-gray-800: #343a40;

--bs-gray-900: #212529;

--bs-primary: #0d6efd;

--bs-secondary: #6c757d;

--bs-success: #198754;

--bs-info: #0dcaf0;

--bs-warning: #ffc107;

--bs-danger: #dc3545;

--bs-light: #f8f9fa;

--bs-dark: #212529;

--bs-font-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

}

Bạn có thể ghi đè các biến CSS trong Bootstrap 5.3.2 để thay đổi màu, trong ví dụ là success và info như sau:

:root {

--bs-success: #3399FF; /* Màu success đổi thành #39F */

--bs-success-rgb: 51, 153, 255;

--bs-info: #009900; /* Màu info đổi thành #090 */

--bs-info-rgb: 0, 153, 0;

--bs-success-bg-subtle: #cce5ff; /* Màu nền liên quan success */

--bs-success-border-subtle: #99ccff;

--bs-success-text-emphasis: #0066cc;

--bs-info-bg-subtle: #ccffcc; /* Màu nền liên quan info */

--bs-info-border-subtle: #99cc99;

--bs-info-text-emphasis: #006600;

}

Vậy làm sao để sử dụng

- Chỉ cần khai báo nội dung css trên phía dưới link khai báo của Bootstrap là được.

Cụ thể, trong code html của bạn tìm đến dòng

Và khai báo nội dung css ngay bên dưới hoặc phía sau dòng trên là sử dụng được, nguyên tắc hệ thống sẽ tự ghi đè