I want to align the items here to the left, for example to cover 30% of the total width. No matter how much I change the col and row values, it still does not align to the left. There is too much space between each item. How do I adjust this?
<b-container fluid>
<b-row class="mb-3 align-items-center">
<b-col>
<label>Category:</label>
</b-col>
<b-col>
<b-form-select :options=„categoryOptions "></b-form-select>
</b-col>
<b-col cols="12 " md="2 ">
<label>Visitors:</label>
</b-col>
<b-col cols="12 " md="2 ">
<b-form-input></b-form-input>
</b-col>
<b-col cols="12 " md="2 ">
<label>Days</label>
</b-col>
<b-col cols="12 " md="2 ">
<b-button @click="addTable ">Add</b-button>
</b-col>
</b-row>
It just looks very bad for "md" size and there is too much space between them, but for small and other sizes looks good.. When I use classes such as the bootstrap w-50 class, the problem disappears, but this time the problem occurs in other sizes, so it is not fully responsive. How can I fix that?
You need to sign in to view this answers