How to make the elements responsive aligned on the left side

Question

I tried to make the element 'branch' responsive aligned perfectly below 'status' when I tried to minimize the browser's window, how can I do that? This is what I've got so far result, I've also tried to use @media only screen CSS but still shows no sign of responsiveness, here's my lines of code

`

<template>
  <base-header class="pb-4 pb-5 pt-6 pt-md-6 bg-gradient-success">
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1"
    />

    <template>
      <div>
        <b-form inline>
          <label for="status">Status⠀⠀⠀⠀ :</label>
          <div class="col-sm-2">
            <b-form-input v-model="text"></b-form-input>
          </div>
          <!-- branchstyle -->
          <div class="branch">
            <div class="col-lg-10 text-right">
              <b-form inline label-align-sm="right" style="margin-left: 70px">
                <div class="col-sm-2" label for="branch">Branch⠀:</div>
                <div class="col-sm-8">
                  <b-form-input
                    v-model="text"
                    style="margin-left: 33px"
                  ></b-form-input>
                </div>
                <br />
                <!-- <div class="input-group col-sm-2">
                  <b-button variant="outline-dark"></b-button>
                </div> -->
                <!-- <div>
                </div> -->
              </b-form>
            </div>
          </div>
        </b-form>
      </div>
      <div>
        <b-form inline>
          <label for="storecode">Store Code⠀:</label>
          <div class="col-sm-2">
            <b-form-input v-model="text"></b-form-input>
          </div>
          <div class="branch">
            <div class="col-lg-12 text-right">
              <b-form inline label-align-sm="right">
                <div class="input-group col-sm-10">
                  <b-button
                    variant="dark"
                    style="margin-left: 205px; margin-top: 5px"
                    >Search</b-button
                  >
                </div>
                <!-- <div>
                </div> -->
              </b-form>
            </div>
          </div>
        </b-form>
      </div>
      <br />
      <br />
      <b-card body>
        <b-card-header class="border-0">
          <h3 class="mb-0">Stock List</h3>
        </b-card-header>
        <div class="text-center">
          <b-table dark striped hover :items="items" :fields="fields"></b-table
          ><br />
        </div>
      </b-card>
    </template>
  </base-header>
</template>

<style></style>`

Thanks in advance and hope u have a nice day☺

Answer 1

I try to simulate your issue and implement this code snippet. Because I couldn't see your result in the code snippet, I assume that you want a responsive form that, when the screen minimizes, your inputs are placed into the right section.

I've done some cleaning and improvements for better readability, and I used flex for your responsive issue.

new Vue({
  el: "#app",
  data: function() {
    return {
      text: "a",
      fields: ['first_name', 'last_name', 'age'],
      items: [{
          isActive: true,
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          isActive: false,
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          isActive: false,
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        },
        {
          isActive: true,
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        }
      ]
    }
  },
});

.customForm>div {
  display: flex;
  flex: 1 0 250px;
  margin: 1rem;

}

.customForm {
  display: flex;
  flex-wrap: wrap;
}

.customForm > div > label {
flex: 1 0 auto;
align-items: flex-end;
display: flex;
margin-right: .5rem;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-form class="customForm">
    <div>
      <label>Status:</label>
      <b-form-input v-model="text" />
    </div>
    <div>
      <label>Branch:</label>
      <b-form-input v-model="text" />
    </div>
    <div>
      <label>Store Code:</label>
      <b-form-input v-model="text" />
    </div>

    <div>
    <b-button variant="dark">Search</b-button>
    </div>
  </b-form>
  <b-card body>
    <b-card-header class="border-0">
      <h3 class="mb-0">Stock List</h3>
    </b-card-header>
    <div class="text-center">
      <b-table dark striped hover :items="items" :fields="fields" />
    </div>
  </b-card>
</div>