'How to put Address together for Mobile view - col-xs-12 col-sm-12

I new in bootstrap. I using bootstrap4 responsive UI : col-lg-x col-md-x col-xs-x col-sm-x.

When I view in Desktop screen, the address look nicely arrange.

When I view in mobile view ( shorten the browser width ), I notice that the address 1,2,3,4 separate by other fields which cause look not nice.

The correct arrangement for mobile view is

Address 1
Address 2
Address 3
Address 4
Postcode
Town
State

Here the code.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class='toggled_content'>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <p class="textfield-label">Address Line 1<span style="color:Red">*</span></p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address1" Class="form-control mandatory" maxlength="100" value="" />
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <div>
            <p class="textfield-label">Postcode<span style="color:Red">*</span></p>
          </div>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="PostCode" Class="form-control mandatory" value="" maxlength="5" />
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <p class="textfield-label">Address Line 2 </p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address2" Class="form-control" value="" maxlength="100" />
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <p class="textfield-label">Town<span style="color:Red">*</span></p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Town" Class="form-control mandatory" value="" maxlength="30" />
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield  add-colon">
          <p class="textfield-label">Address Line 3 </p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address3" Class="form-control" value="" maxlength="100" />
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield  add-colon">
          <div>
            <p class="textfield-label">State<span style="color:Red">*</span></p>
          </div>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <select name="State" id="State" class="form-control js-select mandatory" disabled>
            <option value="">Please select</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield  add-colon">
          <p class="textfield-label">Address Line 4 </p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address4" Class="form-control" value="" maxlength="100" />
        </div>
      </div>
    </div>
  </div>
</div>

Anyone can guide me to solve my implementation?

Thanks you

Solution 1:^[1]

I solved it for you. i implemented an upper row as the main parent and divided your inputs into 2 columns. then protected its row-col design inside. good luck

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class='toggled_content'>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <p class="textfield-label">Address Line 1<span style="color:Red">*</span></p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address1" Class="form-control mandatory" maxlength="100" value="" />
        </div>
      </div>
    </div>
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <p class="textfield-label">Address Line 2 </p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address2" Class="form-control" value="" maxlength="100" />
        </div>
      </div>
    </div>
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield  add-colon">
          <p class="textfield-label">Address Line 3 </p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address3" Class="form-control" value="" maxlength="100" />
        </div>
      </div>
    </div>
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield  add-colon">
          <p class="textfield-label">Address Line 4 </p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address4" Class="form-control" value="" maxlength="100" />
        </div>
      </div>
    </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <div>
            <p class="textfield-label">Postcode<span style="color:Red">*</span></p>
          </div>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="PostCode" Class="form-control mandatory" value="" maxlength="5" />
        </div>
      </div>
    </div>
      <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <p class="textfield-label">Town<span style="color:Red">*</span></p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Town" Class="form-control mandatory" value="" maxlength="30" />
        </div>
      </div>
    </div>
      <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield  add-colon">
          <div>
            <p class="textfield-label">State<span style="color:Red">*</span></p>
          </div>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <select name="State" id="State" class="form-control js-select mandatory" disabled>
            <option value="">Please select</option>
          </select>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Berkay G.

'How to put Address together for Mobile view - col-xs-12 col-sm-12

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]