<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Items - Admin Dashboard</title>

  <!-- Bootstrap 5.3 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />

  <style>
    body {
      padding-top: 56px; /* leave space for fixed navbar */
      min-height: 100vh;
      background-color: #f8f9fa;
    }
    main {
      padding: 20px;
      max-width: 1140px;
      margin: auto;
    }
  </style>
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Admin Panel</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" 
              aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="index.html">Items</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Users</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Settings</a>
          </li>
        </ul>

        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarUserDropdown" role="button" 
               data-bs-toggle="dropdown" aria-expanded="false">
              Admin
            </a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarUserDropdown">
              <li><a class="dropdown-item" href="#">Profile</a></li>
              <li><a class="dropdown-item" href="#">Settings</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Sign out</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Main content -->
  <main>
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h1 class="h3">Items</h1>
      <a href="create.html" class="btn btn-primary">Create New Item</a>
    </div>

    <div class="table-responsive">
      <table class="table table-striped table-bordered align-middle">
        <thead class="table-primary">
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Description</th>
            <th>Created At</th>
            <th style="width: 130px;">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Item One</td>
            <td>Short description of item one.</td>
            <td>2024-06-01</td>
            <td>
              <a href="view.html" class="btn btn-sm btn-outline-primary">View</a>
              <a href="update.html" class="btn btn-sm btn-outline-warning">Update</a>
              <a href="delete.html" class="btn btn-sm btn-outline-danger">Delete</a>
            </td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Item Two</td>
            <td>Details about item two.</td>
            <td>2024-06-02</td>
            <td>
              <a href="view.html" class="btn btn-sm btn-outline-primary">View</a>
              <a href="update.html" class="btn btn-sm btn-outline-warning">Update</a>
              <a href="delete.html" class="btn btn-sm btn-outline-danger">Delete</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

I want to use this for my backend template, for a yii2 restful api backend. yii2 comes with css already:

main > .container {
    padding: 70px 15px 20px;
}

.footer {
    background-color: #f5f5f5;
    font-size: .9em;
    height: 60px;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.form-group {
    margin-bottom: 1rem;
}

and a layout.php:

<?php
//views/main.php
use yii\helpers\Html;
use yii\bootstrap5\BootstrapAsset;

BootstrapAsset::register($this);
?>

<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= Html::encode($this->title) ?></title>
<?= Html::csrfMetaTags() ?>
<?php $this->head() ?>
<style>
.wrap
{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.container
{
	text-align: center;
}
ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
li
{
	margin: 5px 0;
}
</style>
</head>
<body>
<?php $this->beginBody() ?>

<div class="wrap">
<div class="container">
<h1><?= Html::encode($this->title) ?></h1>
<?= $content ?>
</div>
</div>

<footer class="footer">
<div class="container">
<p class="pull-left">&copy; <?= Html::encode(\Yii::$app->name) ?> <?= date('Y') ?></p>
</div>
</footer>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>


can you make the templete work for yii2? and what css i need.