如何把背景颜色白色在引导5?

Question

我需要一些帮助来把我的背景颜色设置为白色。我试着通过全局css来做到这一点，但在页面的两侧我有一个黑色的背景，我不能改变它。

return (
<>
<Navbar />
<main className="main">
{title && (
<h1 className="bg-light">
{title}
</h1>
)}
{children}
</main>
{/* - {new Date().getFullYear()} */}
{
footer && (
<footer className="bg-dark text-light text-center">
<div className="container p-1">
<h6>&copy; Juan M. Grehuello Portfolio</h6>
<p>2022. All rights reserved</p>
</div>
</footer>
)
}
</>
);

我的css是这样的:

.main {
background-color: white;
padding: 2px;
margin-left: 107px;
margin-right: 107px;

}

Answer 1

只要看一下文档就足够了。这是链接:

https://getbootstrap.com/docs/5.0/utilities/background/

显然，你可以设置背景颜色:

.bg-light

这意味着你必须把你的组件包装成:

<div className="bg-light">
...
</div>