Bootstrap CSS for SEO

1. Configuration

1.1. Download Bootstrap

Truy cập vào link https://getbootstrap.com/docs/5.3/getting-started/download/ sau để tải Bootstrap 5.3 mới nhất.

1.2 Using Bootstrap

Sau khi download thành công giải nén file zip bootstrap-5.3.8-dist.zip, và copy file css làbootstrap.min.css và file js là bootstrap.bundle.min.js, và tạo thư mục wwwroot trong thư mục WebApp, trong đó file css bootstrap.min.css bỏ vào thư mục css và file bootstrap.bundle.min.js bỏ vào thư mục js

1.3 Using Layout

Tạo thư mục Shared trong thư mục Views của WebApp, trong thư mục này tạo file _Layout.cshtml và tạo nội dung như sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewData["Title"]</title>
    <meta name="description" content="@ViewData["Description"]">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">@RenderBody()</div>
    <script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html>

1.4 Select Layout

Tạo file _ViewStart.cshtml trong thư mục Views và nội dung như sau:

@{ Layout = "_Layout"; }

2. Navbar

Thêm Navbar vào _Layout.cshtml, ngay dưới phần body như sau:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
        <a href="/" class="navbar-brand"><img width="64" src="/trek.png" alt="Trek Bikes"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#" class="dropdown-item">Action</a></li>
                        <li><a href="#" class="dropdown-item">Another action</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
            </ul>
            <form class="d-flex" action="/home/search.html">
                <input type="search" class="form-control me-2" placeholder="Search">
                <button class="btn btn-outline-success">Search</button>
            </form>
        </div>
    </div>
</nav>

3. Breadcrumb

Thêm vào Breadcrumb vào từng view tương ứng như sau:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>