如何在HTML中使用Bootstrap实现内容居中与颜色设置？

核心问题：未引入Bootstrap样式文件 #

你的代码里完全没添加Bootstrap的CSS链接，导致所有Bootstrap类（比如text-center、col-4）都无法生效，这是最关键的原因。

解决步骤 #

1. 引入Bootstrap核心样式
   在<head>里添加Bootstrap的CDN链接，要放在你自己的assign1.css前面，确保自定义样式能覆盖默认样式：

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

2. 修复内容居中效果

   • 引入Bootstrap后，你已经使用的text-center类会自动生效，标题和诗歌文本会直接居中。
   • 如果想让main里的左右两列整体在页面居中，给row加上justify-content-center类：

     <div class="row justify-content-center">
     

3. 设置元素颜色
   Bootstrap提供了现成的颜色工具类，直接加在元素的class里即可：

   • 文本颜色：text-primary（蓝色）、text-danger（红色）、text-success（绿色）等
   • 背景颜色：bg-light（浅灰）、bg-dark（深灰）、bg-info（浅蓝）等
     示例：

   <h2 class="text-center flow text-primary">Assignment 1 - HTML, CSS and Bootstrap</h2>
   <div class="box anime2 bg-light text-dark">
       <p>Name: Bhargav Patel <br>Student ID: 000882786</p>
   </div>
   

4. 优化导航栏的Bootstrap用法
   原来的nav-link加在<p>标签上不符合Bootstrap规范，应该直接给<a>标签添加：

   <nav class="nav">
       <a class="nav-link disabled" href="./index.html">Main Page</a>
       <a class="nav-link ms-3" href="./page2.html">Page 2</a>
   </nav>
   

   用ms-3代替自定义的space类来设置间距，更贴合Bootstrap的设计逻辑。

修正后的完整代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Bootstrap样式 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义样式放在Bootstrap后面 -->
    <link rel="stylesheet" href="assign1.css">
    <title>JavaScript Assignment 1</title>
</head>
<body>
    <div class="container">
        <header>
            <h2 class="text-center flow text-primary">Assignment 1 - HTML, CSS and Bootstrap</h2>
            <div class="box anime2 bg-light text-dark">
                <p>Name: Bhargav Patel <br>
                Student ID: 000882786</p>
            </div>
        </header>

        <nav class="nav">
            <a class="nav-link disabled" href="./index.html">Main Page</a>
            <a class="nav-link ms-3" href="./page2.html">Page 2</a>
        </nav>

        <main>
            <div class="row justify-content-center">
                <div class="col-4">
                    <a href="https://ozofe.com/rupi-kaur/you-are-too-late/"> 
                        <img src="never_too_late.jpg" alt="author" title="Never Too Late" class="img-fluid img-thumbnail">
                    </a>
                </div>
                
                <div class="col-6">
                    <div class="text-center">
                        <h4 class="text-danger">YOU ARE TOO LATE</h4>
                        <p class="fs-5">sometimes <br>
                        the apology <br>
                        never comes <br>
                        when it is wanted <br>
                        and when it comes <br>
                        it is neither wanted <br>
                        nor needed <br>
                        - rupi kaur</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Krish123