search

Adela-H / Workout_4

Working with bootstrap
0 stars 2 forks source link

Styles.css is overwrited by boostrap4 CDN #1

Open hellyworld opened 2 years ago

hellyworld commented 2 years ago

@Adela-H your CSS load is better to be made after boostrap4 CDN load

Here is the code https://github.com/Adela-H/Workout_4/blob/c70b3861b1afb3c5570cec71332136694f8a45f3/index.html#L8

Adela-H commented 2 years ago

Ok, adica asa:


    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Workout nr 3</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./styles.css">
</head>```
hellyworld commented 2 years ago

No, line 8 need to be after line 9.

Example: if you need to change the <h3> css from bootstrap, to make it smaller or red, you can do it only if your style.css is after bs4 CDN load

hellyworld commented 2 years ago

this is code

    <div class="row justify-content-center">
        <div class="col col-sm-10 first">first</div>
        <div class="col col-sm-1 second">second</div>
        <div class="col col-sm-1 third">third</div>
    </div>
hellyworld commented 2 years ago

one more

<header>
    <nav class="main-navbar">
        <ul>
            <li><a href="#">Acasa</a></li>
            <li><a href="#">Despre noi</a></li>
            <li><a href="#">Contact</a></li>
            <li class="main-navbar-phone"><a href="#">&#128222;</a></li>

        </ul>
    </nav>
</header>
hellyworld commented 2 years ago

this model is inline code <li><a href="#">Acasa</a></li> this is code block

<header>
    <nav class="main-navbar">
        <ul>
            <li><a href="#">Acasa</a></li>
            <li><a href="#">Despre noi</a></li>
            <li><a href="#">Contact</a></li>
            <li class="main-navbar-phone"><a href="#">&#128222;</a></li>

        </ul>
    </nav>
</header>