Bootstrap: Mobile UI is not following Desktop one

Question

this is in desktop and I like it:

This is in mobile and I don't like it:

I want mobile to be like this similar to desktop:

This is the code:

<div class="row">
    <div class="col">
        <div class="form-group">
            <div class="row">
                <div class="col-xs-12 col-md-4">
                    <label style="float: left;" class="text-white" for="zipFrom">From:</label>
                    <input type="text" class="form-control" id="zipFrom" placeholder="ZIP" required>
                </div>
                <div class="col-xs-2 col-md-8">
                    <label style="float: left;" class="text-white" for="floorFrom">From which floor?</label>
                    <select class="form-control" id="floorFrom" required>
                        <option value="" selected disabled hidden>Select one:</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="form-group mb-4">
            <div class="row">
                <div class="col-xs-4 col-md-4">
                    <label style="float: left;" class="text-white" for="zipTo">To:</label>
                    <input type="text" class="form-control" id="zipTo" placeholder="ZIP" required>
                </div>
                <div class="col-xs-6 col-md-8">
                    <label style="float: left;" class="text-white" for="floorTo">To which Floor?</label>
                    <select class="form-control" id="floorTo" required>
                        <option value="" selected disabled hidden>Select one:</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>

I will appreciate any help. Thanks!

95faf8e76605e973 · Accepted Answer · 2020-09-15T20:57:27.357

You just need to make some tweaks to your cols such that for your first set of col, they will take up the entire space (col-12) on small devices, and adjust the children as necessary.

One important thing to note though is that col-xs-* has been removed starting on Bootstrap 4 so anytime you use classes such as col-12, you are probably going to want to at least define a corresponding col-md-* or col-lg-* class as well to accommodate the medium devices and above.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="row">
  <div class="col col-12 col-md-6">
    <div class="form-group">
      <div class="row">
        <div class="col-xs-12 col-md-4 col-4">
          <label style="float: left;" class="text-white" for="zipFrom">From:</label>
          <input type="text" class="form-control" id="zipFrom" placeholder="ZIP" required="">
        </div>
        <div class="col-xs-2 col-md-8 col-8">
          <label style="float: left;" class="text-white" for="floorFrom">From which floor?</label>
          <select class="form-control" id="floorFrom" required="">
            <option value="" selected="" disabled="" hidden="">Select one:</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="col col-12 col-md-6">
    <div class="form-group mb-4">
      <div class="row">
        <div class="col-xs-4 col-md-4 col-4">
          <label style="float: left;" class="text-white" for="zipTo">To:</label>
          <input type="text" class="form-control" id="zipTo" placeholder="ZIP" required="">
        </div>
        <div class="col-xs-6 col-md-8 col-8">
          <label style="float: left;" class="text-white" for="floorTo">To which Floor?</label>
          <select class="form-control" id="floorTo" required="">
            <option value="" selected="" disabled="" hidden="">Select one:</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap: Mobile UI is not following Desktop one

1 Answers1