Bootstrap Grid system not working in quarto.

[jmhimara]

Description

I'm using bootstrap classes to implement a rather specific layout for a page within a quarto book, but the grid system doesn't seem to be working.

This code for example:

```{=html}

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

```

does not render properly in quarto. Other bootstrap features work fine as far as I can tell.
I can get it to work if I load the bootstrap CDNs manually, but that breaks other quarto functionalities like the table of contents.

Thanks.

[dragonstyle]

Quart uses bootstrap CSS grid based system, which is slightly different than the flex box version from previous versions. More here:

https://getbootstrap.com/docs/5.1/layout/css-grid/

lmk if this gets you going!

[jmhimara]

Thanks! Is the default grid system disabled in quarto? Converting from one to another is far from seamless. I can probably make the CSS grid work, but I'll have to rewrite a bunch of code.

[dragonstyle]

It is- in bootstrap you need to choose between the systems. We opted for the newer css grid variant which enabled some of the more advanced layout options.

You should be able to accomplish anything you could in the old flex box system using css grid to the best of my knowledge...

[mcanouil]

FYI, duplicate of #2841