Bootstrap 4 responsive input with search button unaligned with small media

Question

I have created an input text beside a button like so:

It looks good on the regular computer screen, this is exactly how it supposed to look like. but in a phone device view, it's unaligned:

This is the working code I got:

<!-- Add Filer Form -->
<div class="row py-4 bg-darkblue">
    <div class="col-md-12">
        <form>
            <div class="form-group row offset-md-1">
                <label for="filerAddress" class="col-sm-2 col-form-label text-white font-weight-bold">Filer ID</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="filerAddress" placeholder="">
                </div>

                <button type="button" class="btn px-5 btn-light">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <div class="form-group row offset-md-1">
                <label for="filerName" class="col-sm-2 col-form-label text-white font-weight-bold">Filer Name</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="contact" placeholder="">
                </div>

                <button type="button" class="btn px-5 btn-light">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <div class="form-group row offset-md-1">
                <label for="filerType" class="col-sm-2 col-form-label text-white font-weight-bold">Filer Type</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="contact" placeholder="">
                </div>      

                <button type="button" class="btn px-5 btn-light">
                    <i class="fas fa-search"></i>
                </button>                           
            </div>
        </form>
    </div>
</div>
<!-- #END# Add Filer Form -->

How can I fix this? And what things should I know in order to prevent this when I create more in the future?

Answer 1

I hope this will resolve your issue

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


<!-- Add Filer Form -->
<div class="container">
  <div class="row py-4 bg-darkblue">
    <div class="col-md-12">
      <form>
        <div class="form-group offset-md-1">
          <div class="row">
            <label for="filerAddress" class="col-12 col-sm-2 col-form-label font-weight-bold">Filer ID</label>
            <div class="col-8">
              <input type="text" class="form-control" id="filerAddress" placeholder="">
            </div>
            <div class="col-4 col-sm-2">
              <button type="button" class="btn btn-primary">
								<i class="fas fa-search"></i> Search
							</button>
            </div>
          </div>
        </div>
        <div class="form-group offset-md-1">
          <div class="row">
            <label for="filerAddress" class="col-12 col-sm-2 col-form-label font-weight-bold">Filer ID</label>
            <div class="col-8">
              <input type="text" class="form-control" id="filerAddress" placeholder="">
            </div>
            <div class="col-4 col-sm-2">
              <button type="button" class="btn btn-primary">
								<i class="fas fa-search"></i> Search
							</button>
            </div>
          </div>
        </div>
        <div class="form-group offset-md-1">
          <div class="row">
            <label for="filerAddress" class="col-12 col-sm-2 col-form-label font-weight-bold">Filer ID</label>
            <div class="col-8">
              <input type="text" class="form-control" id="filerAddress" placeholder="">
            </div>
            <div class="col-4 col-sm-2">
              <button type="button" class="btn btn-primary">
								<i class="fas fa-search"></i> Search
							</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>

Answer 2

Use col-6 instead of col-sm-6 Use offset-1 instead of offset-md-1 Use col-3 instead of col-sm-2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<!-- Add Filer Form -->
<div class="container-fluid">
<div class="row py-4 bg-secondary">
<div class="col-md-12">
    <form>
        <div class="form-group row offset-1">
            <label for="filerAddress" class="col-3 col-form-label text-white font-weight-bold">Filer ID</label>
            <div class="col-6">
                <input type="text" class="form-control" id="filerAddress" placeholder="">
            </div>

            <button type="button" class="btn px-5 btn-light">
                <i class="fas fa-search"></i>
            </button>
        </div>
        <div class="form-group row offset-1">
            <label for="filerName" class="col-3 col-form-label text-white font-weight-bold">Filer Name</label>
            <div class="col-6">
                <input type="text" class="form-control" id="contact" placeholder="">
            </div>

            <button type="button" class="btn px-5 btn-light">
                <i class="fas fa-search"></i>
            </button>
        </div>
        <div class="form-group row offset-1">
            <label for="filerType" class="col-3 col-form-label text-white font-weight-bold">Filer Type</label>
            <div class="col-6">
                <input type="text" class="form-control" id="contact" placeholder="">
            </div>      

            <button type="button" class="btn px-5 btn-light">
                <i class="fas fa-search"></i>
            </button>                           
        </div>
    </form>
</div>
</div>
</div>
</body>
</html>