Bootstrap 5.2 grid is taking whole width

Question

I'm trying to implement this grid wrapping from Bootstrap 5.2 documentation.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

My expectations were that there would be three columns that are equally sized but as you see here, each .g-col-4 spans the whole width instead of a third of it. What am I doing wrong here?

Answer 1

Grid is opt-in. You need to enable the CSS Grid by setting $enable-cssgrid: true.