According to information from the Vuetify documentation:
The Vuetify grid draws inspiration from the Bootstrap grid. It involves the use of containers, rows, and columns to organize and align content.
If I utilize Bootstrap grid classes in a Vuetify project, will it function similarly to using Vuetify components like v-container, v-row, and v-col? Essentially, can I copy/paste grid markup from a bootstrap-based project into a Vuetify project's template section and have it work seamlessly?
Based on an experiment showcased in this codepen example, it appears that this might indeed be possible. However, I seek further confirmation through inquiry.
For instance, when comparing the following code snippets for grid layout:
<!-- grid layout via Vuetify components -->
<v-container>
<v-row justify-content-between>
<v-col cols="2" class="my-col">One of three columns</v-col>
<v-col cols="5" class="my-col">One of three columns</v-col>
<v-col cols class="my-col">One of three columns</v-col>
</v-row>
</v-container>
<!-- grid layout via bootstrap classes -->
<div class="container">
<div class="row">
<div class="col-2 my-col">One of three columns</div>
<div class="col-5 my-col">One of three columns</div>
<div class="col my-col">One of three columns</div>
</div>
</div>
It is evident that both layouts appear identical within their respective containers.
Although this observation holds true in isolated scenarios, I am interested in knowing whether this generalizes across various instances.
Note: This query pertains to Vuetify version 2 and Bootstrap version 4.