Adapter mes fichiers HTML et CSS avec Bootstrap

17 octobre 2021 à 17:35:37

Bonjour,

J'ai réussi à faire mon CV en ligne avec du HTML/CSS et je voudrais l'adapter avec Bootstrap.

Pouvez vous m'aider ?

Merci à vous.

Mon fichier index.html :

<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CV en Ligne</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://kit.fontawesome.com/f8c903a439.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="contenu">
        <div class="details">
            <img src="img.jpg" alt="Image de profil">
            <ul class="liste_détails">
                <li>Prénom nom</li>
                <li>Adresse complète </li>
                <li><strong>Nationalité:</strong> Belge</li>
                <li><strong>Tel:</strong> +32 4xx xx xx xx</li>
                <li><strong>Email:</strong> MonMail@gmail.com</li>
        </div>
        </ul>
        <h1>Enseignant<br>Secondaire</h1>
        <div class="cv_section">
            <hr>
            <h2>Formations</h2>
            <strong>1993-1996:</strong>
            <span>xxxxxxxxxxxxxxxxxxxxxxxx - xxxxxxxxxxxxxxxxxxxx</span>
            <br>

            <strong>1996-1997:</strong>
            <span>xxxxxxxxxxxxxxxxxxxxxxxx - xxxxxxxxxxxxxxxxxxxxxx</span>
            <br>

        </div>
        <div class="cv_section">
            <hr>
            <h2>Expériences Professionelles</h2>
            <strong>xxxxxxxxxx:</strong>
            <span>Actuellement</span>
            <p>xxxxxxxxxxxxxxxxxx</p>
            <ul>
                <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
                <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
                <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
            </ul>

            <br>
            <strong>xxxxxxxxxx:</strong>
            <span>2018-2019</span>
            <p>xxxxxxxxxx</p>
            <ul>
                <li>xxxxxxxxxxxxxxxxxxxxx</li>
                <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
                <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
            </ul>

        </div>
        <div class="cv_section">
            <hr>
            <h2>Compétences</h2>
            <ul>
                <li>xxxxxx</li>
                <li>xxxxx</li>
                <li>xxxxxxxx</li>
            </ul>
        </div>
        <div class="cv_section">
            <hr>
            <h2>Projet réalisé</h2>
            <ul>
                <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                <li><a href="MonLien.html">Liens</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

Mon fichier style.css:

h1, h2 {
    text-align: center;
}

.p {
    margin: 0%;
}

.hr {
    border-color: lightskyblue
}

.contenu {
    width: 500px;
    margin: 10px auto;
   /* background-color: lightblue;*/
}

.details {
    /*background-color: lightpink;*/
    height: 150px;
}

div.details img {
    height: 150px;
    float: left;
    border-radius: 50%;
}

.liste_détails {
    /*background-color: lightsalmon;*/
    float: left;
    list-style-type: none;
    margin-top: 25px;
}

.cv_section {
   /* background-color: lightsteelblue;*/
    background-color: light;
    padding-bottom: 20px;
}

-
Edité par ChristopheDevl37 17 octobre 2021 à 17:41:27

zvheer

17 octobre 2021 à 17:56:03

Bonjoir, bah la franchement apart si quelqu'un a la foi de transcrire ton code en bootstrap on peut pas vraiment t'aiddr, faut apprendre bootstrap ca se fais assez rapidement. c'est rien de bien compliqué juste un peu de js et des class que tu poses sur tes balises qui o't un css predefinis

yasakani no magatama

ChristopheDevl37

17 octobre 2021 à 20:13:48

zvheer a écrit:

Bonjoir, bah la franchement apart si quelqu'un a la foi de transcrire ton code en bootstrap on peut pas vraiment t'aiddr, faut apprendre bootstrap ca se fais assez rapidement. c'est rien de bien compliqué juste un peu de js et des class que tu poses sur tes balises qui o't un css predefinis

Bonsoir,

Merci pour votre réponse,

J'ai suivi un petit tuto déjà pour pouvoir réaliser mon CV, j'ai mis pas mal de temps à le réaliser surtout niveau CSS et ici j'aurais aimer avoir mon CV en Bootstrap car il est vrai que c'est beaucoup plus design.

Si quelqu'un peut m'aider sur mon code en m'indiquant les explications sa serait super

Encore merci de votre aide

zvheer

17 octobre 2021 à 21:17:39

Si c'est le fonctionnement de bootstrap que tu veux dit toi que en gros prenons ton css sur. cv_section avec bootstrap ce css serait deja ecris et toi aurais juste a ajouter sur ta div class=cv_section.

par exemple si tu prends une div et tu lui ajoutes la class mb-5 ca reviens a dans ton css mettre

. mb-5

{

margin-bottom:...px

}

les class que tu poses sont donc deja défini. Et ce n'est pas bootstrap qui va rendre ton cv plus beau bootstrap sert a faire la mise en page plus rapidement sinon tout ce que bootstrap te proposes tu peux le faire a la main en html css js

yasakani no magatama