Problem/Motivation
The theme has a problem with bootstrap 5 grid, having any grid appears as 1 row with 12 cols. Changing the theme to Olivero or Bootstrap 5 show the exact columns on the grid per row.
Also this may not be related to the theme but to drupal 10, the bootstrap icons do not appear, I believe that even the code is missing. Same for fontawesome icons.
Steps to reproduce
Fort the first issue any grid different than 12 cols will appear using 12 cols as it was a full row.
This 3 columns grid will apear as 1 column
Here is the source from Bootstrap theme when using Layout Builder:
<div class="bs-text-black bs-text-justify bs-p-5 _none bs-m-3 bs-border-radius-1" data-aos="fade-up"><div class="container">
<div class="layout row layout-builder__layout">
<div class="col-lg-2 col-md-2 col-2">
<div class="block block-layout-builder block-inline-blockbasic">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<div class="block block-layout-builder block-field-blockblock-contentbasicbody">
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p class="text-align-center">
<svg class="bi bi-database-fill-up" width="64" height="62" fill="currentColor" viewBox="0 0 16 16"><path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m.354-5.854 1.5 1.5a.5.5 0 0 1-.708.708L13 11.707V14.5a.5.5 0 0 1-1 0v-2.793l-.646.647a.5.5 0 0 1-.708-.708l1.5-1.5a.5.5 0 0 1 .708 0M8 1c-1.573 0-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4s.875 1.755 1.904 2.223C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777C13.125 5.755 14 5.007 14 4s-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1" /><path d="M2 7v-.839c.457.432 1.004.751 1.49.972C4.722 7.693 6.318 8 8 8s3.278-.307 4.51-.867c.486-.22 1.033-.54 1.49-.972V7c0 .424-.155.802-.411 1.133a4.51 4.51 0 0 0-4.815 1.843A12 12 0 0 1 8 10c-1.573 0-3.022-.289-4.096-.777C2.875 8.755 2 8.007 2 7m6.257 3.998L8 11c-1.682 0-3.278-.307-4.51-.867-.486-.22-1.033-.54-1.49-.972V10c0 1.007.875 1.755 1.904 2.223C4.978 12.711 6.427 13 8 13h.027a4.55 4.55 0 0 1 .23-2.002m-.002 3L8 14c-1.682 0-3.278-.307-4.51-.867-.486-.22-1.033-.54-1.49-.972V13c0 1.007.875 1.755 1.904 2.223C4.978 15.711 6.427 16 8 16c.536 0 1.058-.034 1.555-.097a4.5 4.5 0 0 1-1.3-1.905" /></svg></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-4">
<div class="block block-layout-builder block-inline-blockbasic">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<div class="block block-layout-builder block-field-blockblock-contentbasicbody">
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Database import.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the code from Tara just changing the default theme:
<div class="bs-text-black bs-text-justify bs-p-5 _none bs-m-3 bs-border-radius-1" data-aos="fade-up"><div class="container">
<div class="layout row layout-builder__layout">
<div class="col-lg-2 col-md-2 col-2">
<div class="block">
<div class="block-content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<div class="block">
<div class="block-content">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field-item"><p class="text-align-center">
<svg class="bi bi-database-fill-up" width="64" height="62" fill="currentColor" viewBox="0 0 16 16"><path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m.354-5.854 1.5 1.5a.5.5 0 0 1-.708.708L13 11.707V14.5a.5.5 0 0 1-1 0v-2.793l-.646.647a.5.5 0 0 1-.708-.708l1.5-1.5a.5.5 0 0 1 .708 0M8 1c-1.573 0-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4s.875 1.755 1.904 2.223C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777C13.125 5.755 14 5.007 14 4s-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1" /><path d="M2 7v-.839c.457.432 1.004.751 1.49.972C4.722 7.693 6.318 8 8 8s3.278-.307 4.51-.867c.486-.22 1.033-.54 1.49-.972V7c0 .424-.155.802-.411 1.133a4.51 4.51 0 0 0-4.815 1.843A12 12 0 0 1 8 10c-1.573 0-3.022-.289-4.096-.777C2.875 8.755 2 8.007 2 7m6.257 3.998L8 11c-1.682 0-3.278-.307-4.51-.867-.486-.22-1.033-.54-1.49-.972V10c0 1.007.875 1.755 1.904 2.223C4.978 12.711 6.427 13 8 13h.027a4.55 4.55 0 0 1 .23-2.002m-.002 3L8 14c-1.682 0-3.278-.307-4.51-.867-.486-.22-1.033-.54-1.49-.972V13c0 1.007.875 1.755 1.904 2.223C4.978 15.711 6.427 16 8 16c.536 0 1.058-.034 1.555-.097a4.5 4.5 0 0 1-1.3-1.905" /></svg></p>
</div>
</div>
</div> <!--/.block-content -->
</div>
</div>
</div>
</div> <!--/.block-content -->
</div>
<div class="col-lg-4 col-md-4 col-4">
<div class="block">
<div class="block-content">
<div class="layout layout--onecol">
<div class="layout__region layout__region--content">
<div class="block">
<div class="block-content">
<div class="field field--name-body field--type-text-with-summary field--label-hidden field-item"><p>Database Export</p>
</div>
</div>
</div> <!--/.block-content -->
</div>
</div>
</div>
</div> <!--/.block-content -->
Insert in Code on any page <i class="fa-solid fa-heart"></i> and the icon does not appear.
Also in the code adding <i class="bi bi-database-fill-up"></i> will show nothing. I will appear using bootstrap SVG
Proposed resolution
Remaining tasks
User interface changes
API changes
Data model changes