S'inscrire

Bootstrap 4 : créer des dégradés à partir des couleurs existantes

Il peut être bien utile de disposer d’une palette élargie par rapport à ce que Bootstrap 4 peut proposer. Grâce à quelques lignes de SCSS, vous pouvez utiliser rapidement de nouvelles classes pour vos designs Web.

Si vous souhaitez plutôt utiliser du CSS à la place du SCSS, rendez-vous à la fin de cet article !

Ajoutez ce code à votre fichier SCSS :

/** Dégradés de couleurs **/
/** Changez le pourcentage pour modifier les dégradés **/
/** Jean-Marc Trappler https://www.trappler.fr/42 **/

@each $color, $value in $theme-colors {
        /** Dégradés clairs couleurs de fond **/
        @include bg-variant('.bg-light-1-#{$color}', lighten( $value, 11% ));
        @include bg-variant('.bg-light-2-#{$color}', lighten( $value, 22% ));
        @include bg-variant('.bg-light-3-#{$color}', lighten( $value, 33% ));
        @include bg-variant('.bg-light-4-#{$color}', lighten( $value, 44% ));
        /** Dégradés sombres couleurs de fond **/
        @include bg-variant('.bg-dark-1-#{$color}', darken( $value, 6% ));
        @include bg-variant('.bg-dark-2-#{$color}', darken( $value, 11% ));
        @include bg-variant('.bg-dark-3-#{$color}', darken( $value, 17% ));
        @include bg-variant('.bg-dark-4-#{$color}', darken( $value, 22% ));
        @include bg-variant('.bg-dark-5-#{$color}', darken( $value, 28% ));
        /** Dégradés clairs textes **/
        @include text-emphasis-variant('.text-light-1-#{$color}', lighten( $value, 30% ));
        @include text-emphasis-variant('.text-light-2-#{$color}', lighten( $value, 40% ));
        /** Dégradés sombres textes **/
        @include text-emphasis-variant('.text-dark-1-#{$color}', darken( $value, 28% ));
        @include text-emphasis-variant('.text-dark-2-#{$color}', darken( $value, 35% ));
}

Faites varier les pourcentages pour obtenir différents dégradés !

N’oubliez pas d’importer les fichiers Boostrap 4 pour que le code soit bien reconnu ! Ci-dessous avec Node.JS :

@import "node_modules/bootstrap/scss/bootstrap";

 Textes

.text-light-1-primary
.text-light-2-primary
.text-dark-1-primary
.text-dark-2-primary
.text-light-1-info
.text-light-2-info
.text-dark-1-info
.text-dark-2-info
.text-light-1-danger
.text-light-2-danger
.text-dark-1-danger
.text-dark-2-danger
.text-light-1-success
.text-light-2-success
.text-dark-1-success
.text-dark-2-success
.text-light-1-warning
.text-light-2-warning
.text-dark-1-warning
.text-dark-2-warning
.text-light-1-secondary
.text-light-2-secondary
.text-dark-1-secondary
.text-dark-2-secondary
.text-light-1-dark
.text-light-2-dark
.text-dark-1-dark
.text-dark-2-dark

 Couleurs de fond

.bg-dark-1-primary
.bg-dark-2-primary
.bg-dark-3-primary
.bg-dark-4-primary
.bg-dark-5-primary
.bg-light-1-primary
.bg-light-2-primary
.bg-light-3-primary
.bg-light-4-primary
.bg-dark-1-info
.bg-dark-2-info
.bg-dark-3-info
.bg-dark-4-info
.bg-dark-5-info
.bg-light-1-info
.bg-light-2-info
.bg-light-3-info
.bg-light-4-info
.bg-dark-1-danger
.bg-dark-2-danger
.bg-dark-3-danger
.bg-dark-4-danger
.bg-dark-5-danger
.bg-light-1-danger
.bg-light-2-danger
.bg-light-3-danger
.bg-light-4-danger
.bg-dark-1-success
.bg-dark-2-success
.bg-dark-3-success
.bg-dark-4-success
.bg-dark-5-success
.bg-light-1-success
.bg-light-2-success
.bg-light-3-success
.bg-light-4-success
.bg-dark-1-warning
.bg-dark-2-warning
.bg-dark-3-warning
.bg-dark-4-warning
.bg-dark-5-warning
.bg-light-1-warning
.bg-light-2-warning
.bg-light-3-warning
.bg-light-4-warning
.bg-dark-1-secondary
.bg-dark-2-secondary
.bg-dark-3-secondary
.bg-dark-4-secondary
.bg-dark-5-secondary
.bg-light-1-secondary
.bg-light-2-secondary
.bg-light-3-secondary
.bg-light-4-secondary
.bg-dark-1-dark
.bg-dark-2-dark
.bg-dark-3-dark
.bg-dark-4-dark
.bg-dark-5-dark
.bg-light-1-dark
.bg-light-2-dark
.bg-light-3-dark
.bg-light-4-dark
.bg-dark-1-light
.bg-dark-2-light
.bg-dark-3-light
.bg-dark-4-light

 Code CSS

Si vous souhaitez plutôt utiliser du code CSS, la même chose en plus long :

/** Dégradés de couleurs **/
/** Jean-Marc Trappler https://www.trappler.fr/42 **/

.bg-light-1-primary {
 background-color:#3898ff !important
}
a.bg-light-1-primary:hover,
a.bg-light-1-primary:focus,
button.bg-light-1-primary:hover,
button.bg-light-1-primary:focus {
 background-color:#057eff !important
}
.bg-light-2-primary {
 background-color:#70b5ff !important
}
a.bg-light-2-primary:hover,
a.bg-light-2-primary:focus,
button.bg-light-2-primary:hover,
button.bg-light-2-primary:focus {
 background-color:#3d9bff !important
}
.bg-light-3-primary {
 background-color:#a8d2ff !important
}
a.bg-light-3-primary:hover,
a.bg-light-3-primary:focus,
button.bg-light-3-primary:hover,
button.bg-light-3-primary:focus {
 background-color:#75b8ff !important
}
.bg-light-4-primary {
 background-color:#e0efff !important
}
a.bg-light-4-primary:hover,
a.bg-light-4-primary:focus,
button.bg-light-4-primary:hover,
button.bg-light-4-primary:focus {
 background-color:#add5ff !important
}
.bg-dark-1-primary {
 background-color:#006ce0 !important
}
a.bg-dark-1-primary:hover,
a.bg-dark-1-primary:focus,
button.bg-dark-1-primary:hover,
button.bg-dark-1-primary:focus {
 background-color:#0054ad !important
}
.bg-dark-2-primary {
 background-color:#0060c7 !important
}
a.bg-dark-2-primary:hover,
a.bg-dark-2-primary:focus,
button.bg-dark-2-primary:hover,
button.bg-dark-2-primary:focus {
 background-color:#004794 !important
}
.bg-dark-3-primary {
 background-color:#0051a8 !important
}
a.bg-dark-3-primary:hover,
a.bg-dark-3-primary:focus,
button.bg-dark-3-primary:hover,
button.bg-dark-3-primary:focus {
 background-color:#003975 !important
}
.bg-dark-4-primary {
 background-color:#00458f !important
}
a.bg-dark-4-primary:hover,
a.bg-dark-4-primary:focus,
button.bg-dark-4-primary:hover,
button.bg-dark-4-primary:focus {
 background-color:#002c5c !important
}
.bg-dark-5-primary {
 background-color:#003670 !important
}
a.bg-dark-5-primary:hover,
a.bg-dark-5-primary:focus,
button.bg-dark-5-primary:hover,
button.bg-dark-5-primary:focus {
 background-color:#001e3d !important
}
.text-light-1-primary {
 color:#99caff !important
}
a.text-light-1-primary:hover,
a.text-light-1-primary:focus {
 color:#4da3ff !important
}
.text-light-2-primary {
 color:#cce5ff !important
}
a.text-light-2-primary:hover,
a.text-light-2-primary:focus {
 color:#80bdff !important
}
.text-dark-1-primary {
 color:#003670 !important
}
a.text-dark-1-primary:hover,
a.text-dark-1-primary:focus {
 color:#001124 !important
}
.text-dark-2-primary {
 color:#00254d !important
}
a.text-dark-2-primary:hover,
a.text-dark-2-primary:focus {
 color:#000 !important
}
.bg-light-1-secondary {
 background-color:#889199 !important
}
a.bg-light-1-secondary:hover,
a.bg-light-1-secondary:focus,
button.bg-light-1-secondary:hover,
button.bg-light-1-secondary:focus {
 background-color:#6e7880 !important
}
.bg-light-2-secondary {
 background-color:#a7adb3 !important
}
a.bg-light-2-secondary:hover,
a.bg-light-2-secondary:focus,
button.bg-light-2-secondary:hover,
button.bg-light-2-secondary:focus {
 background-color:#8b949b !important
}
.bg-light-3-secondary {
 background-color:#c5c9cd !important
}
a.bg-light-3-secondary:hover,
a.bg-light-3-secondary:focus,
button.bg-light-3-secondary:hover,
button.bg-light-3-secondary:focus {
 background-color:#a9afb5 !important
}
.bg-light-4-secondary {
 background-color:#e3e5e7 !important
}
a.bg-light-4-secondary:hover,
a.bg-light-4-secondary:focus,
button.bg-light-4-secondary:hover,
button.bg-light-4-secondary:focus {
 background-color:#c7cbcf !important
}
.bg-dark-1-secondary {
 background-color:#5e666d !important
}
a.bg-dark-1-secondary:hover,
a.bg-dark-1-secondary:focus,
button.bg-dark-1-secondary:hover,
button.bg-dark-1-secondary:focus {
 background-color:#464c51 !important
}
.bg-dark-2-secondary {
 background-color:#52595f !important
}
a.bg-dark-2-secondary:hover,
a.bg-dark-2-secondary:focus,
button.bg-dark-2-secondary:hover,
button.bg-dark-2-secondary:focus {
 background-color:#3a3f44 !important
}
.bg-dark-3-secondary {
 background-color:#44494e !important
}
a.bg-dark-3-secondary:hover,
a.bg-dark-3-secondary:focus,
button.bg-dark-3-secondary:hover,
button.bg-dark-3-secondary:focus {
 background-color:#2c3033 !important
}
.bg-dark-4-secondary {
 background-color:#383d41 !important
}
a.bg-dark-4-secondary:hover,
a.bg-dark-4-secondary:focus,
button.bg-dark-4-secondary:hover,
button.bg-dark-4-secondary:focus {
 background-color:#202325 !important
}
.bg-dark-5-secondary {
 background-color:#2a2d30 !important
}
a.bg-dark-5-secondary:hover,
a.bg-dark-5-secondary:focus,
button.bg-dark-5-secondary:hover,
button.bg-dark-5-secondary:focus {
 background-color:#121415 !important
}
.text-light-1-secondary {
 color:#bcc1c6 !important
}
a.text-light-1-secondary:hover,
a.text-light-1-secondary:focus {
 color:#939ba2 !important
}
.text-light-2-secondary {
 color:#d8dbdd !important
}
a.text-light-2-secondary:hover,
a.text-light-2-secondary:focus {
 color:#afb5ba !important
}
.text-dark-1-secondary {
 color:#2a2d30 !important
}
a.text-dark-1-secondary:hover,
a.text-dark-1-secondary:focus {
 color:#060707 !important
}
.text-dark-2-secondary {
 color:#191b1d !important
}
a.text-dark-2-secondary:hover,
a.text-dark-2-secondary:focus {
 color:#000 !important
}
.bg-light-1-success {
 background-color:#38cf5a !important
}
a.bg-light-1-success:hover,
a.bg-light-1-success:focus,
button.bg-light-1-success:hover,
button.bg-light-1-success:focus {
 background-color:#29ab47 !important
}
.bg-light-2-success {
 background-color:#65da80 !important
}
a.bg-light-2-success:hover,
a.bg-light-2-success:focus,
button.bg-light-2-success:hover,
button.bg-light-2-success:focus {
 background-color:#3cd05e !important
}
.bg-light-3-success {
 background-color:#92e5a5 !important
}
a.bg-light-3-success:hover,
a.bg-light-3-success:focus,
button.bg-light-3-success:hover,
button.bg-light-3-success:focus {
 background-color:#69db83 !important
}
.bg-light-4-success {
 background-color:#c0f0cb !important
}
a.bg-light-4-success:hover,
a.bg-light-4-success:focus,
button.bg-light-4-success:hover,
button.bg-light-4-success:focus {
 background-color:#96e6a9 !important
}
.bg-dark-1-success {
 background-color:#228e3b !important
}
a.bg-dark-1-success:hover,
a.bg-dark-1-success:focus,
button.bg-dark-1-success:hover,
button.bg-dark-1-success:focus {
 background-color:#18652a !important
}
.bg-dark-2-success {
 background-color:#1d7a32 !important
}
a.bg-dark-2-success:hover,
a.bg-dark-2-success:focus,
button.bg-dark-2-success:hover,
button.bg-dark-2-success:focus {
 background-color:#135121 !important
}
.bg-dark-3-success {
 background-color:#176128 !important
}
a.bg-dark-3-success:hover,
a.bg-dark-3-success:focus,
button.bg-dark-3-success:hover,
button.bg-dark-3-success:focus {
 background-color:#0d3817 !important
}
.bg-dark-4-success {
 background-color:#124c20 !important
}
a.bg-dark-4-success:hover,
a.bg-dark-4-success:focus,
button.bg-dark-4-success:hover,
button.bg-dark-4-success:focus {
 background-color:#08230f !important
}
.bg-dark-5-success {
 background-color:#0c3415 !important
}
a.bg-dark-5-success:hover,
a.bg-dark-5-success:focus,
button.bg-dark-5-success:hover,
button.bg-dark-5-success:focus {
 background-color:#030b04 !important
}
.text-light-1-success {
 color:#86e29b !important
}
a.text-light-1-success:hover,
a.text-light-1-success:focus {
 color:#48d368 !important
}
.text-light-2-success {
 color:#afecbd !important
}
a.text-light-2-success:hover,
a.text-light-2-success:focus {
 color:#71dd8a !important
}
.text-dark-1-success {
 color:#0c3415 !important
}
a.text-dark-1-success:hover,
a.text-dark-1-success:focus {
 color:#000 !important
}
.text-dark-2-success {
 color:#06170a !important
}
a.text-dark-2-success:hover,
a.text-dark-2-success:focus {
 color:#000 !important
}
.bg-light-1-info {
 background-color:#24c9e4 !important
}
a.bg-light-1-info:hover,
a.bg-light-1-info:focus,
button.bg-light-1-info:hover,
button.bg-light-1-info:focus {
 background-color:#18a6bd !important
}
.bg-light-2-info {
 background-color:#55d6ea !important
}
a.bg-light-2-info:hover,
a.bg-light-2-info:focus,
button.bg-light-2-info:hover,
button.bg-light-2-info:focus {
 background-color:#28cae4 !important
}
.bg-light-3-info {
 background-color:#87e2f0 !important
}
a.bg-light-3-info:hover,
a.bg-light-3-info:focus,
button.bg-light-3-info:hover,
button.bg-light-3-info:focus {
 background-color:#5ad7ea !important
}
.bg-light-4-info {
 background-color:#b9eef6 !important
}
a.bg-light-4-info:hover,
a.bg-light-4-info:focus,
button.bg-light-4-info:hover,
button.bg-light-4-info:focus {
 background-color:#8ce3f1 !important
}
.bg-dark-1-info {
 background-color:#148a9d !important
}
a.bg-dark-1-info:hover,
a.bg-dark-1-info:focus,
button.bg-dark-1-info:hover,
button.bg-dark-1-info:focus {
 background-color:#0e626f !important
}
.bg-dark-2-info {
 background-color:#117686 !important
}
a.bg-dark-2-info:hover,
a.bg-dark-2-info:focus,
button.bg-dark-2-info:hover,
button.bg-dark-2-info:focus {
 background-color:#0b4e59 !important
}
.bg-dark-3-info {
 background-color:#0d5e6b !important
}
a.bg-dark-3-info:hover,
a.bg-dark-3-info:focus,
button.bg-dark-3-info:hover,
button.bg-dark-3-info:focus {
 background-color:#08363e !important
}
.bg-dark-4-info {
 background-color:#0b4a54 !important
}
a.bg-dark-4-info:hover,
a.bg-dark-4-info:focus,
button.bg-dark-4-info:hover,
button.bg-dark-4-info:focus {
 background-color:#052227 !important
}
.bg-dark-5-info {
 background-color:#073239 !important
}
a.bg-dark-5-info:hover,
a.bg-dark-5-info:focus,
button.bg-dark-5-info:hover,
button.bg-dark-5-info:focus {
 background-color:#010a0c !important
}
.text-light-1-info {
 color:#7adeee !important
}
a.text-light-1-info:hover,
a.text-light-1-info:focus {
 color:#36cee6 !important
}
.text-light-2-info {
 color:#a7e9f4 !important
}
a.text-light-2-info:hover,
a.text-light-2-info:focus {
 color:#63d9ec !important
}
.text-dark-1-info {
 color:#073239 !important
}
a.text-dark-1-info:hover,
a.text-dark-1-info:focus {
 color:#000 !important
}
.text-dark-2-info {
 color:#031619 !important
}
a.text-dark-2-info:hover,
a.text-dark-2-info:focus {
 color:#000 !important
}
.bg-light-1-warning {
 background-color:#ffcf3f !important
}
a.bg-light-1-warning:hover,
a.bg-light-1-warning:focus,
button.bg-light-1-warning:hover,
button.bg-light-1-warning:focus {
 background-color:#ffc20c !important
}
.bg-light-2-warning {
 background-color:#fd7 !important
}
a.bg-light-2-warning:hover,
a.bg-light-2-warning:focus,
button.bg-light-2-warning:hover,
button.bg-light-2-warning:focus {
 background-color:#ffd044 !important
}
.bg-light-3-warning {
 background-color:#ffebaf !important
}
a.bg-light-3-warning:hover,
a.bg-light-3-warning:focus,
button.bg-light-3-warning:hover,
button.bg-light-3-warning:focus {
 background-color:#ffde7c !important
}
.bg-light-4-warning {
 background-color:#fff9e7 !important
}
a.bg-light-4-warning:hover,
a.bg-light-4-warning:focus,
button.bg-light-4-warning:hover,
button.bg-light-4-warning:focus {
 background-color:#ffecb4 !important
}
.bg-dark-1-warning {
 background-color:#e7ae00 !important
}
a.bg-dark-1-warning:hover,
a.bg-dark-1-warning:focus,
button.bg-dark-1-warning:hover,
button.bg-dark-1-warning:focus {
 background-color:#b48700 !important
}
.bg-dark-2-warning {
 background-color:#ce9a00 !important
}
a.bg-dark-2-warning:hover,
a.bg-dark-2-warning:focus,
button.bg-dark-2-warning:hover,
button.bg-dark-2-warning:focus {
 background-color:#9b7400 !important
}
.bg-dark-3-warning {
 background-color:#af8300 !important
}
a.bg-dark-3-warning:hover,
a.bg-dark-3-warning:focus,
button.bg-dark-3-warning:hover,
button.bg-dark-3-warning:focus {
 background-color:#7c5d00 !important
}
.bg-dark-4-warning {
 background-color:#967000 !important
}
a.bg-dark-4-warning:hover,
a.bg-dark-4-warning:focus,
button.bg-dark-4-warning:hover,
button.bg-dark-4-warning:focus {
 background-color:#634a00 !important
}
.bg-dark-5-warning {
 background-color:#775900 !important
}
a.bg-dark-5-warning:hover,
a.bg-dark-5-warning:focus,
button.bg-dark-5-warning:hover,
button.bg-dark-5-warning:focus {
 background-color:#430 !important
}
.text-light-1-warning {
 color:#ffe7a0 !important
}
a.text-light-1-warning:hover,
a.text-light-1-warning:focus {
 color:#ffd454 !important
}
.text-light-2-warning {
 color:#fff4d3 !important
}
a.text-light-2-warning:hover,
a.text-light-2-warning:focus {
 color:#ffe187 !important
}
.text-dark-1-warning {
 color:#775900 !important
}
a.text-dark-1-warning:hover,
a.text-dark-1-warning:focus {
 color:#2b2000 !important
}
.text-dark-2-warning {
 color:#543f00 !important
}
a.text-dark-2-warning:hover,
a.text-dark-2-warning:focus {
 color:#070500 !important
}
.bg-light-1-danger {
 background-color:#e46571 !important
}
a.bg-light-1-danger:hover,
a.bg-light-1-danger:focus,
button.bg-light-1-danger:hover,
button.bg-light-1-danger:focus {
 background-color:#dd3949 !important
}
.bg-light-2-danger {
 background-color:#ed959d !important
}
a.bg-light-2-danger:hover,
a.bg-light-2-danger:focus,
button.bg-light-2-danger:hover,
button.bg-light-2-danger:focus {
 background-color:#e56975 !important
}
.bg-light-3-danger {
 background-color:#f5c4c9 !important
}
a.bg-light-3-danger:hover,
a.bg-light-3-danger:focus,
button.bg-light-3-danger:hover,
button.bg-light-3-danger:focus {
 background-color:#ed99a1 !important
}
.bg-light-4-danger {
 background-color:#fdf4f5 !important
}
a.bg-light-4-danger:hover,
a.bg-light-4-danger:focus,
button.bg-light-4-danger:hover,
button.bg-light-4-danger:focus {
 background-color:#f6c9cd !important
}
.bg-dark-1-danger {
 background-color:#cf2434 !important
}
a.bg-dark-1-danger:hover,
a.bg-dark-1-danger:focus,
button.bg-dark-1-danger:hover,
button.bg-dark-1-danger:focus {
 background-color:#a31c29 !important
}
.bg-dark-2-danger {
 background-color:#b9202f !important
}
a.bg-dark-2-danger:hover,
a.bg-dark-2-danger:focus,
button.bg-dark-2-danger:hover,
button.bg-dark-2-danger:focus {
 background-color:#8d1924 !important
}
.bg-dark-3-danger {
 background-color:#9f1c28 !important
}
a.bg-dark-3-danger:hover,
a.bg-dark-3-danger:focus,
button.bg-dark-3-danger:hover,
button.bg-dark-3-danger:focus {
 background-color:#73141d !important
}
.bg-dark-4-danger {
 background-color:#891823 !important
}
a.bg-dark-4-danger:hover,
a.bg-dark-4-danger:focus,
button.bg-dark-4-danger:hover,
button.bg-dark-4-danger:focus {
 background-color:#5e1018 !important
}
.bg-dark-5-danger {
 background-color:#6f131c !important
}
a.bg-dark-5-danger:hover,
a.bg-dark-5-danger:focus,
button.bg-dark-5-danger:hover,
button.bg-dark-5-danger:focus {
 background-color:#440c11 !important
}
.text-light-1-danger {
 color:#f3b7bd !important
}
a.text-light-1-danger:hover,
a.text-light-1-danger:focus {
 color:#e77681 !important
}
.text-light-2-danger {
 color:#fae3e5 !important
}
a.text-light-2-danger:hover,
a.text-light-2-danger:focus {
 color:#efa2a9 !important
}
.text-dark-1-danger {
 color:#6f131c !important
}
a.text-dark-1-danger:hover,
a.text-dark-1-danger:focus {
 color:#2e080c !important
}
.text-dark-2-danger {
 color:#510e14 !important
}
a.text-dark-2-danger:hover,
a.text-dark-2-danger:focus {
 color:#0f0304 !important
}
.bg-light-1-light {
 background-color:#fff !important
}
a.bg-light-1-light:hover,
a.bg-light-1-light:focus,
button.bg-light-1-light:hover,
button.bg-light-1-light:focus {
 background-color:#e6e6e6 !important
}
.bg-light-2-light {
 background-color:#fff !important
}
a.bg-light-2-light:hover,
a.bg-light-2-light:focus,
button.bg-light-2-light:hover,
button.bg-light-2-light:focus {
 background-color:#e6e6e6 !important
}
.bg-light-3-light {
 background-color:#fff !important
}
a.bg-light-3-light:hover,
a.bg-light-3-light:focus,
button.bg-light-3-light:hover,
button.bg-light-3-light:focus {
 background-color:#e6e6e6 !important
}
.bg-light-4-light {
 background-color:#fff !important
}
a.bg-light-4-light:hover,
a.bg-light-4-light:focus,
button.bg-light-4-light:hover,
button.bg-light-4-light:focus {
 background-color:#e6e6e6 !important
}
.bg-dark-1-light {
 background-color:#e6eaed !important
}
a.bg-dark-1-light:hover,
a.bg-dark-1-light:focus,
button.bg-dark-1-light:hover,
button.bg-dark-1-light:focus {
 background-color:#c8d0d8 !important
}
.bg-dark-2-light {
 background-color:#d7dde3 !important
}
a.bg-dark-2-light:hover,
a.bg-dark-2-light:focus,
button.bg-dark-2-light:hover,
button.bg-dark-2-light:focus {
 background-color:#bac3cd !important
}
.bg-dark-3-light {
 background-color:#c5ced6 !important
}
a.bg-dark-3-light:hover,
a.bg-dark-3-light:focus,
button.bg-dark-3-light:hover,
button.bg-dark-3-light:focus {
 background-color:#a8b4c1 !important
}
.bg-dark-4-light {
 background-color:#b7c1cb !important
}
a.bg-dark-4-light:hover,
a.bg-dark-4-light:focus,
button.bg-dark-4-light:hover,
button.bg-dark-4-light:focus {
 background-color:#99a7b6 !important
}
.bg-dark-5-light {
 background-color:#a5b2bf !important
}
a.bg-dark-5-light:hover,
a.bg-dark-5-light:focus,
button.bg-dark-5-light:hover,
button.bg-dark-5-light:focus {
 background-color:#8798a9 !important
}
.text-light-1-light {
 color:#fff !important
}
a.text-light-1-light:hover,
a.text-light-1-light:focus {
 color:#d9d9d9 !important
}
.text-light-2-light {
 color:#fff !important
}
a.text-light-2-light:hover,
a.text-light-2-light:focus {
 color:#d9d9d9 !important
}
.text-dark-1-light {
 color:#a5b2bf !important
}
a.text-dark-1-light:hover,
a.text-dark-1-light:focus {
 color:#788b9f !important
}
.text-dark-2-light {
 color:#90a0b0 !important
}
a.text-dark-2-light:hover,
a.text-dark-2-light:focus {
 color:#657a8e !important
}
.bg-light-1-dark {
 background-color:#4d565f !important
}
a.bg-light-1-dark:hover,
a.bg-light-1-dark:focus,
button.bg-light-1-dark:hover,
button.bg-light-1-dark:focus {
 background-color:#363d43 !important
}
.bg-light-2-dark {
 background-color:#66727e !important
}
a.bg-light-2-dark:hover,
a.bg-light-2-dark:focus,
button.bg-light-2-dark:hover,
button.bg-light-2-dark:focus {
 background-color:#4f5962 !important
}
.bg-light-3-dark {
 background-color:#828e9a !important
}
a.bg-light-3-dark:hover,
a.bg-light-3-dark:focus,
button.bg-light-3-dark:hover,
button.bg-light-3-dark:focus {
 background-color:#697581 !important
}
.bg-light-4-dark {
 background-color:#a1aab3 !important
}
a.bg-light-4-dark:hover,
a.bg-light-4-dark:focus,
button.bg-light-4-dark:hover,
button.bg-light-4-dark:focus {
 background-color:#85919c !important
}
.bg-dark-1-dark {
 background-color:#262b2f !important
}
a.bg-dark-1-dark:hover,
a.bg-dark-1-dark:focus,
button.bg-dark-1-dark:hover,
button.bg-dark-1-dark:focus {
 background-color:#0f1113 !important
}
.bg-dark-2-dark {
 background-color:#1b1e21 !important
}
a.bg-dark-2-dark:hover,
a.bg-dark-2-dark:focus,
button.bg-dark-2-dark:hover,
button.bg-dark-2-dark:focus {
 background-color:#040405 !important
}
.bg-dark-3-dark {
 background-color:#0d0f10 !important
}
a.bg-dark-3-dark:hover,
a.bg-dark-3-dark:focus,
button.bg-dark-3-dark:hover,
button.bg-dark-3-dark:focus {
 background-color:#000 !important
}
.bg-dark-4-dark {
 background-color:#020202 !important
}
a.bg-dark-4-dark:hover,
a.bg-dark-4-dark:focus,
button.bg-dark-4-dark:hover,
button.bg-dark-4-dark:focus {
 background-color:#000 !important
}
.bg-dark-5-dark {
 background-color:#000 !important
}
a.bg-dark-5-dark:hover,
a.bg-dark-5-dark:focus,
button.bg-dark-5-dark:hover,
button.bg-dark-5-dark:focus {
 background-color:#000 !important
}
.text-light-1-dark {
 color:#7a8793 !important
}
a.text-light-1-dark:hover,
a.text-light-1-dark:focus {
 color:#56606a !important
}
.text-light-2-dark {
 color:#96a0aa !important
}
a.text-light-2-dark:hover,
a.text-light-2-dark:focus {
 color:#6d7a86 !important
}
.text-dark-1-dark {
 color:#000 !important
}
a.text-dark-1-dark:hover,
a.text-dark-1-dark:focus {
 color:#000 !important
}
.text-dark-2-dark {
 color:#000 !important
}
a.text-dark-2-dark:hover,
a.text-dark-2-dark:focus {
 color:#000 !important
}
Lettre d’information

Recevez directement dans votre boîte de réception mes dernières publications

En indiquant votre adresse email ci-dessus, vous consentez à recevoir notre Newsletter par voie électronique et acceptez notre Politique de confidentialité. Vous pouvez vous désinscrire à tout moment. .

Si debugger, c’est supprimer des bugs, alors programmer ne peut être que les ajouter.
Edsger Dijkstra

Bootstrap 4 : créer des dégradés à partir des couleurs existantes