Bootstrap 5
Toggle Switch
Switch Bootstrap
Form Controls
Snippets Html
Exemples de toggles et switchs personnalisés en Bootstrap 5.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippets Toggle Bootstrap 5 01 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem 0;
}
/* Main Container */
.main-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 30px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
margin: 2rem auto;
}
/* Header */
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 3rem;
text-align: center;
}
.header h1 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1rem;
}
.header p {
font-size: 1.1rem;
opacity: 0.95;
}
/* Content */
.content {
padding: 3rem;
}
/* Section Styles */
.section {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 2px solid #eef2f6;
}
.section-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 2rem;
color: #333;
position: relative;
padding-bottom: 0.5rem;
}
.section-title:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
/* Card Styles */
.toggle-card {
background: white;
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: all 0.3s ease;
height: 100%;
border: 1px solid #eef2f6;
}
.toggle-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.toggle-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
color: #333;
}
.toggle-card p {
color: #666;
font-size: 0.85rem;
margin-top: 0.5rem;
}
/* Custom Toggle Styles */
.form-switch .form-check-input {
width: 3em;
height: 1.5em;
cursor: pointer;
transition: all 0.3s;
}
/* Toggle avec icônes */
.toggle-with-icon .form-check-input {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
/* Toggle Rainbow */
.toggle-rainbow .form-check-input:checked {
background-color: #ff6b6b;
border-color: #ff6b6b;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
/* Toggle Gradient */
.toggle-gradient .form-check-input {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
}
.toggle-gradient .form-check-input:checked {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
/* Toggle XL */
.toggle-xl .form-check-input {
width: 4em;
height: 2em;
}
/* Toggle Small */
.toggle-sm .form-check-input {
width: 2em;
height: 1em;
}
/* Toggle avec label personnalisé */
.toggle-custom-label .form-check-input:checked + .form-check-label {
color: #28a745;
font-weight: 600;
}
/* Toggle Border Animation */
.toggle-border-animation .form-check-input {
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.toggle-border-animation .form-check-input:checked {
transform: scale(1.1);
}
/* Toggle Shadow */
.toggle-shadow .form-check-input {
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.toggle-shadow .form-check-input:checked {
box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}
/* Toggle Neon */
.toggle-neon .form-check-input:checked {
background-color: #00ff00;
border-color: #00ff00;
box-shadow: 0 0 15px #00ff00;
}
/* Toggle avec texte */
.toggle-with-text {
position: relative;
}
.toggle-with-text .form-check-input:checked:before {
content: "ON";
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 10px;
font-weight: bold;
}
.toggle-with-text .form-check-input:not(:checked):before {
content: "OFF";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 10px;
font-weight: bold;
}
/* Toggle Spinner */
.toggle-spinner .form-check-input:checked {
background-image: none;
position: relative;
}
.toggle-spinner .form-check-input:checked:after {
content: "✓";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
}
/* Toggle Ripple */
.toggle-ripple {
position: relative;
overflow: hidden;
}
.toggle-ripple .form-check-input:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255,255,255,0.5);
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s;
}
.toggle-ripple .form-check-input:active:after {
width: 200%;
height: 200%;
}
/* Toggle avec animation de rotation */
.toggle-rotate .form-check-input:checked {
transform: rotate(360deg);
transition: transform 0.5s;
}
/* Badge */
.badge-custom {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
}
/* Responsive */
@media (max-width: 768px) {
.header {
padding: 2rem;
}
.header h1 {
font-size: 1.8rem;
}
.content {
padding: 1.5rem;
}
.section-title {
font-size: 1.4rem;
}
}
/* Animation d'entrée */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.toggle-card {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
}
.toggle-card:nth-child(1) { animation-delay: 0s; }
.toggle-card:nth-child(2) { animation-delay: 0.05s; }
.toggle-card:nth-child(3) { animation-delay: 0.1s; }
.toggle-card:nth-child(4) { animation-delay: 0.15s; }
.toggle-card:nth-child(5) { animation-delay: 0.2s; }
.toggle-card:nth-child(6) { animation-delay: 0.25s; }
</style>
</head>
<body>
<div class="container">
<div class="main-container">
<!-- Header -->
<div class="header">
<h1>
<i class="bi bi-toggle2-on"></i>
Bootstrap 5 Toggles Collection
</h1>
<p>Plus de 15 exemples de switches et toggles personnalisés</p>
<span class="badge-custom">15+ Styles Uniques</span>
</div>
<!-- Content -->
<div class="content">
<!-- Section 1: Toggles Standards -->
<div class="section">
<h2 class="section-title">📌 Toggles Standards Bootstrap</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="toggle-card">
<h3><i class="bi bi-toggle-on"></i> Toggle Standard</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="standardToggle">
<label class="form-check-label" for="standardToggle">Activer/Désactiver</label>
</div>
<p>Le toggle par défaut de Bootstrap 5</p>
</div>
</div>
<div class="col-md-4">
<div class="toggle-card">
<h3><i class="bi bi-check-circle"></i> Toggle Pré-coché</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="checkedToggle" checked>
<label class="form-check-label" for="checkedToggle">Option activée</label>
</div>
<p>Toggle activé par défaut</p>
</div>
</div>
<div class="col-md-4">
<div class="toggle-card">
<h3><i class="bi bi-ban"></i> Toggle Désactivé</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="disabledToggle" disabled>
<label class="form-check-label" for="disabledToggle">Non disponible</label>
</div>
<p>Toggle en état désactivé</p>
</div>
</div>
</div>
</div>
<!-- Section 2: Toggles Colorés -->
<div class="section">
<h2 class="section-title">🎨 Toggles Colorés & Thématiques</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="toggle-card toggle-rainbow">
<h3><i class="bi bi-palette"></i> Rainbow Toggle</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="rainbowToggle">
<label class="form-check-label" for="rainbowToggle">Mode Arc-en-ciel</label>
</div>
<p>Couleur personnalisée rouge</p>
</div>
</div>
<div class="col-md-4">
<div class="toggle-card toggle-gradient">
<h3><i class="bi bi-gem"></i> Gradient Toggle</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="gradientToggle">
<label class="form-check-label" for="gradientToggle">Dégradé personnalisé</label>
</div>
<p>Dégradé violet vers rose</p>
</div>
</div>
<div class="col-md-4">
<div class="toggle-card toggle-neon">
<h3><i class="bi bi-lightning-charge"></i> Neon Toggle</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="neonToggle">
<label class="form-check-label" for="neonToggle">Effet Néon</label>
</div>
<p>Avec effet lumineux vert</p>
</div>
</div>
</div>
</div>
<!-- Section 3: Toggles avec Tailles -->
<div class="section">
<h2 class="section-title">📏 Toggles avec Différentes Tailles</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="toggle-card toggle-sm">
<h3><i class="bi bi-zoom-out"></i> Small Toggle</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="smallToggle">
<label class="form-check-label" for="smallToggle">Petit format</label>
</div>
<p>Toggle compact (taille réduite)</p>
</div>
</div>
<div class="col-md-4">
<div class="toggle-card">
<h3><i class="bi bi-arrows-expand"></i> Medium Toggle</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="mediumToggle">
<label class="form-check-label" for="mediumToggle">Taille standard</label>
</div>
<p>Taille par défaut de Bootstrap</p>
</div>
</div>
<div class="col-md-4">
<div class="toggle-card toggle-xl">
<h3><i class="bi bi-zoom-in"></i> XL Toggle</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="xlToggle">
<label class="form-check-label" for="xlToggle">Grand format</label>
</div>
<p>Toggle extra large (XL)</p>
</div>
</div>
</div>
</div>
<!-- Section 4: Toggles Animés -->
<div class="section">
<h2 class="section-title">✨ Toggles Animés</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="toggle-card toggle-border-animation">
<h3><i class="bi bi-arrow-repeat"></i> Bounce Toggle</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="bounceToggle">
<label class="form-check-label" for="bounceToggle">Effet rebond</label>
</div>
<p>Animation de scale au clic</p>
</div>
</div>
<div class="col-md-4">
<div class="toggle-card toggle-rotate">
<h3><i class="bi bi-arrow-clockwise"></i> Rotate Toggle</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="rotateToggle">
<label class="form-check-label" for="rotateToggle">Rotation 360°</label>
</div>
<p>Animation de rotation</p>
</div>
</div>
<div class="col-md-4">
<div class="toggle-card toggle-ripple">
<h3><i class="bi bi-water"></i> Ripple Toggle</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="rippleToggle">
<label class="form-check-label" for="rippleToggle">Effet ripple</label>
</div>
<p>Animation d'onde au clic</p>
</div>
</div>
</div>
</div>
<!-- Section 5: Toggles avec Icônes -->
<div class="section">
<h2 class="section-title">🔘 Toggles avec Icônes & Labels</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="toggle-card toggle-with-icon">
<h3><i class="bi bi-emoji-smile"></i> Toggle avec Icône</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="iconToggle">
<label class="form-check-label" for="iconToggle">
<i class="bi bi-bell"></i> Notifications
</label>
</div>
<p>Avec icône dans le label</p>
</div>
</div>
<div class="col-md-4">
<div class="toggle-card toggle-with-text">
<h3><i class="bi bi-text-paragraph"></i> Toggle avec Texte</h3>
<div class="form-check form-switch position-relative">
<input class="form-check-input" type="checkbox" id="textToggle">
<label class="form-check-label" for="textToggle">ON/OFF visible</label>
</div>
<p>Texte "ON" et "OFF" intégrés</p>
</div>
</div>
<div class="col-md-4">
<div class="toggle-card toggle-spinner">
<h3><i class="bi bi-check-lg"></i> Toggle Checkmark</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="checkmarkToggle">
<label class="form-check-label" for="checkmarkToggle">Avec validation ✓</label>
</div>
<p>Symbole check quand activé</p>
</div>
</div>
</div>
</div>
<!-- Section 6: Toggles Spéciaux -->
<div class="section">
<h2 class="section-title">⚡ Toggles Spéciaux & Avancés</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="toggle-card toggle-shadow">
<h3><i class="bi bi-shadow"></i> Shadow Toggle</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="shadowToggle">
<label class="form-check-label" for="shadowToggle">Avec ombre portée</label>
</div>
<p>Effet d'ombre 3D</p>
</div>
</div>
<div class="col-md-4">
<div class="toggle-card">
<h3><i class="bi bi-toggle2-off"></i> Toggle Groupé</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="groupToggle1" checked>
<label class="form-check-label" for="groupToggle1">Option 1</label>
</div>
<div class="form-check form-switch mt-2">
<input class="form-check-input" type="checkbox" id="groupToggle2">
<label class="form-check-label" for="groupToggle2">Option 2</label>
</div>
<div class="form-check form-switch mt-2">
<input class="form-check-input" type="checkbox" id="groupToggle3">
<label class="form-check-label" for="groupToggle3">Option 3</label>
</div>
<p>Groupe de toggles multiples</p>
</div>
</div>
<div class="col-md-4">
<div class="toggle-card">
<h3><i class="bi bi-star"></i> Custom Toggle</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="customToggle" style="background-color: #ff6b6b; border-color: #ff6b6b;">
<label class="form-check-label" for="customToggle">Style personnalisé</label>
</div>
<p>Couleur totalement personnalisable</p>
</div>
</div>
</div>
</div>
<!-- Section 7: Toggles avec États -->
<div class="section">
<h2 class="section-title">🔄 Toggles avec États & Validation</h2>
<div class="row g-4">
<div class="col-md-6">
<div class="toggle-card">
<h3><i class="bi bi-check-circle-fill text-success"></i> État Succès</h3>
<div class="form-check form-switch">
<input class="form-check-input is-valid" type="checkbox" id="successToggle" checked>
<label class="form-check-label" for="successToggle">Validation réussie</label>
</div>
<p>Avec classe is-valid</p>
</div>
</div>
<div class="col-md-6">
<div class="toggle-card">
<h3><i class="bi bi-x-circle-fill text-danger"></i> État Erreur</h3>
<div class="form-check form-switch">
<input class="form-check-input is-invalid" type="checkbox" id="errorToggle">
<label class="form-check-label" for="errorToggle">Erreur de validation</label>
</div>
<p>Avec classe is-invalid</p>
</div>
</div>
</div>
</div>
<!-- Footer d'information -->
<div class="alert alert-info mt-4" role="alert">
<i class="bi bi-info-circle-fill"></i>
<strong>Information :</strong> Tous ces toggles sont entièrement fonctionnels et responsive.
Cliquez sur n'importe quel toggle pour voir l'effet en action !
</div>
</div>
</div>
</div>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Script pour les interactions -->
<script>
// Ajouter des console.log pour montrer que les toggles fonctionnent
const toggles = document.querySelectorAll('.form-check-input');
toggles.forEach(toggle => {
toggle.addEventListener('change', function(e) {
const label = this.nextElementSibling;
const status = this.checked ? 'activé' : 'désactivé';
console.log(`Toggle ${label.innerText} : ${status}`);
// Animation supplémentaire pour certains toggles
if (this.id === 'rotateToggle' && this.checked) {
this.style.transform = 'rotate(360deg)';
setTimeout(() => {
this.style.transform = '';
}, 500);
}
});
});
// Animation au chargement
document.addEventListener('DOMContentLoaded', function() {
console.log('Page chargée - Tous les toggles sont prêts !');
// Ajouter une classe pour les animations
const cards = document.querySelectorAll('.toggle-card');
cards.forEach((card, index) => {
card.style.opacity = '1';
});
});
// Effet ripple personnalisé
const rippleToggles = document.querySelectorAll('.toggle-ripple .form-check-input');
rippleToggles.forEach(toggle => {
toggle.addEventListener('click', function(e) {
let ripple = document.createElement('span');
ripple.classList.add('ripple-effect');
this.parentElement.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 300);
});
});
</script>
<style>
/* Styles supplémentaires pour l'effet ripple */
.ripple-effect {
position: absolute;
border-radius: 50%;
background: rgba(102, 126, 234, 0.3);
transform: scale(0);
animation: ripple 0.6s linear;
pointer-events: none;
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
/* Position relative pour le ripple */
.toggle-ripple {
position: relative;
overflow: hidden;
}
/* Animation de hover */
.toggle-card:hover .form-check-input {
filter: brightness(1.05);
}
/* Transition douce pour tous les toggles */
.form-check-input {
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
cursor: pointer;
}
/* Style pour le toggle groupé */
.toggle-card .form-check + .form-check {
margin-top: 0.5rem;
}
</style>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur