1. ホーム
  2. ブログ
  3. 記事
更新日:

Bootstrap5.0のGridを使いページのテンプレートを作る

成果物

ソースコード

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <title>Bootstrap5.0のGridを使いページのテンプレートを作る </title>

    <style>
      header {
        background: palevioletred;
      }

      article {
        background: red;
      }

      aside {
        background: blue;
      }

      footer {
        background: green;
      }
    </style>
  </head>
  <body style="background: #fff">
    <div class="container d-flex flex-column min-vh-100">
      <nav class="navbar navbar-light">
        <div class="navbar-brand"></div>
        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarList">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarList" style="z-index: 2;">
          <ul class="nav navbar-nav mx-auto">
            <li class="list-group-item">
              <a href="/">ホーム</a>
            </li>
          </ul>
        </div>
      </nav>
      <header>header</header>


      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="/">ホーム</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">現在のページ</li>
      </ol>

      <main>
        <div class="row">
          <div class="col-12 col-xl-9">
            <article>
              <section>左</section>
            </article>
          </div>

          <div class="d-none d-xl-block col-xl-3">
            <aside>右</aside>
          </div>
        </div>
      </main>

      <footer class="footer mt-auto">footer</footer>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>