Where did I go wrong? Cover template doesn't work #33037

fsuaterdogan · 2021-02-10T12:21:05Z

fsuaterdogan
Feb 10, 2021

I am using Next.js.

First, I installed Bootstrap in _document:

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
          <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
            crossorigin="anonymous"
          ></script>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Then, I got the codes for the cover theme (Cover theme link, Source code):

export default function Landing() {
  return (
    <div>
      <body class="d-flex h-100 text-center text-white bg-dark">
        <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
          <header class="mb-auto">
      <div>
        <h3 class="float-md-start mb-0">CryptoBet</h3>
        <nav class="nav nav-masthead justify-content-center float-md-end">
          <a class="nav-link active" aria-current="page" href="#">
            Home
          </a>
          <a class="nav-link" href="#">
            Features
          </a>
          <a class="nav-link" href="#">
            Contact
          </a>
        </nav>
      </div>
    </header>
          <main class="px-3">
            <h1>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 fw-bold border-white bg-white"
              >
                Learn more
              </a>
            </p>
          </main>
          <footer class="mt-auto text-white-50">
      <p>
        Cover template for{" "}
        <a href="https://getbootstrap.com/" class="text-white">
          Bootstrap
        </a>
        , by{" "}
        <a href="https://twitter.com/mdo" class="text-white">
          @mdo
        </a>
        .
      </p>
    </footer>
        </div>
      </body>
    </div>
  );
}

Unfortunately, the result was not achieved:

Where did I go wrong? Or has Bootstrap changed?

XhmikosR · 2021-02-10T17:08:48Z

XhmikosR
Feb 10, 2021
Maintainer

You are missing the Cover example CSS https://getbootstrap.com/docs/5.0/examples/cover/cover.css

1 reply

fsuaterdogan Feb 10, 2021
Author

No actually, I installed this too.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Where did I go wrong? Cover template doesn't work #33037

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Bootstrap

Where did I go wrong? Cover template doesn't work #33037

Uh oh!

Uh oh!

fsuaterdogan Feb 10, 2021

Replies: 1 comment · 1 reply

Uh oh!

XhmikosR Feb 10, 2021 Maintainer

Uh oh!

fsuaterdogan Feb 10, 2021 Author

fsuaterdogan
Feb 10, 2021

Replies: 1 comment 1 reply

XhmikosR
Feb 10, 2021
Maintainer

fsuaterdogan Feb 10, 2021
Author