Pas de couleur dans les bar progress [Résolu]

Signaler
Messages postés
40
Date d'inscription
vendredi 28 décembre 2018
Statut
Membre
Dernière intervention
6 septembre 2020
-
Messages postés
40
Date d'inscription
vendredi 28 décembre 2018
Statut
Membre
Dernière intervention
6 septembre 2020
-
Bonjour, toujours dans un tuto sur Bootstrap, je n'arrive pas à avoir les couleurs dans les progress-bar. Auriez-vous une idée de pourquoi? Merci
code:
Code :
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=devise-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" ></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container" style="margin-top: 50px;">
            
            <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" style="width: 30%">30%</div>
            </div>
            
            <div class="progress">
                <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" style="width: 40%">40%</div>
            </div>
            
            <div class="progress">
                <div class="progress-bar progerss-bar-warning" role="progressbar" style="width: 60%">60%</div>
            </div>
            
            <div class="progress">
                <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" style="width: 80%">80%</div>
            </div>
            
        </div>
    </body>
</html>

j'ai ça :


et non :


Merci

Configuration: Macintosh / Chrome 81.0.4044.129

4 réponses

Messages postés
29578
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 septembre 2020
2 788
Je ne sais pas où tu trouves tes tutos...
mais ce n'est pas les bonnes classes utilisées
https://www.w3schools.com/bootstrap4/bootstrap_progressbars.asp

pour "info" par exemple, il faut utiliser :bg-info
<div class="progress">
      <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 40%">40%</div>
            </div>

Salut,
sans voir le CSS impossible de dire quoi que ce soit...
C'est quoi l'intérêt de passer par un cours payant avec des
"
Cours donnés par des formateurs confirmés
Trouvez le formateur qui vous correspond
"
Si vous devez passer par un forum d'entraide pour avoir des réponses à vos exercices?

Vous aurez les mêmes services dans des cours gratuit. Comme pour tout les cours payant ou gratuit c'est surtout le travail personnel qui compte.

Je voit que votre leçon parle de bootstrap.
Pensez à développer vos connaissances (et pratiquer) si ce n'est pas assez fait :
_CSS car boostrap utilise le CSS
_JavaScript car Bootstrap s'appuie sur une bibliothèque de fonctions JavaScript(JQuery)
_HTML bien évidemment car HTML si vous avez des lacunes sur les balises à utiliser, les rôles de chaque élément, la syntaxe et les attributs à utiliser et dans quels cas. CSS s'appliquant au HTML et JavaScript permet de manipuler HTML c'est essentiel.

Bon travail, prendre du recul pour voir par une autre leçon sur le même sujet ou un autre thème est une bonne méthode pour avancer quand on est bloqué.

Par exemple le plus ismple quand on a un doute c'est d regarder le manuel:

https://getbootstrap.com/docs/4.0/components/progress/

Ah ben tiens donc!
la leçon qu'on vous a proposé est exactement de réaliser l'exemple du manuel à appliquer...

Autant commencer par le manuel la prochaine fois ;)
Messages postés
40
Date d'inscription
vendredi 28 décembre 2018
Statut
Membre
Dernière intervention
6 septembre 2020

En effet le tuto ne part pas sur les bonnes classes. C'était peut-être pour une ancienne version de Bootstrap. J'arrive au bon résultat mais je n'arrive pas encore à faire sauter une ligne entre chaque bar. Je vais chercher mais si tu as un indice, il est le bien venu. Merci
Messages postés
29578
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 septembre 2020
2 788
En html pour faire des retours à la ligne (ou ajouter des sauts de lignes) c'est avec le tag
 <br>

Mais le mieux serait plutôt de jouer avec du margin ou du padding en css.
Messages postés
40
Date d'inscription
vendredi 28 décembre 2018
Statut
Membre
Dernière intervention
6 septembre 2020

merci