October 23, 2024
Chicago 12, Melborne City, USA
CSS

How can I align items to the left with b-col?


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

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video