Simple Bootstrap template - not showing as it should

HTML-CSS
1

Hello all

I am using bootstrap 4.3.1. I am on Mac, and Flask.
I am on localhost.

I have background in Python, but I am not too super familiar with webpages. So of course I am hitting a wall now, because I have coded a couple of things that I would like to show on a simple web page instead of only on my github.

After I followed a tutorial on Udemy, I looked at bootstrap templates.

There is a simple one which I really like here:
https://getbootstrap.com/docs/4.3/examples/cover/
It looks like this:

bootstrap_template1
bootstrap_template12304×1230 226 KB

But even after copy/pasting the links where I should, etc, my home page looks like this:

bootstrap_template2
bootstrap_template22306×1230 241 KB

So it seems that the stylesheet is only working partially??

I do not have any error message of indication of files missing.

The code in my home.html is under. It’s actually the source code, and I copy/pasted the link to bootstrap.min.css as recommended.

Anybody has idea why I do not get the nice dark background and proper layout on my home page?

Thanks in advance for any help,
Cheers
Anne

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Cover Template · Bootstrap</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/cover/">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>
</head>

<body class="text-center">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <header class="masthead mb-auto">
            <div class="inner">
                <h3 class="masthead-brand">Cover</h3>
                <nav class="nav nav-masthead justify-content-center">
                    <a class="nav-link active" href="#">Home</a>
                    <a class="nav-link" href="#">Features</a>
                    <a class="nav-link" href="#">Contact</a>
                </nav>
            </div>
        </header>

        <main role="main" class="inner cover">
            <h1 class="cover-heading">Cover your page.</h1>
            <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit
                the text, and add your own fullscreen background photo to make it your own.</p>
            <p class="lead">
                <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
            </p>
        </main>

        <footer class="mastfoot mt-auto">
            <div class="inner">
                <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a
                        href="https://twitter.com/mdo">@mdo</a>.</p>
            </div>
        </footer>
    </div>

</body>

</html>
2

So, there is another source file from the template called cover.css. I believe this is a file you are missing.

If you look at the template html file:

...
</style>
    <!-- Custom styles for this template -->
    <link href="cover.css" rel="stylesheet">
  </head>
  <body class="text-center">
...

This is not in your html file, and links to the needed cover.css file:

image
image759×176 13.8 KB

3

OK, from what I understood this local CSS file ‘cover.css’ should not be in there, since actually I am not using it. I am only using the CSS which is in the link in the header here:

<!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Am I understanding this wrong, and I ALSO need a local CSS file?

I tried to locate this cover.css file by googling, and searching the bootstrap github, but didn’t find it…

4

Ahhh, I got it, THANKS!! :smiley:

YES I needed this additional cover.css file. I went again to the source code for the bootstrap template, and I clicked on the link cover.css, and there was all the CSS code I needed!

So I copy pasted it in my new cover.css file and now my code looks like this:

<!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/cover.css') }}">
</head>

My homepage looks like it should now, fantastic :star_struck: