CODEWITHSUNDEEP
bootstrap-4
RamahAdam
RamahAdam

Reputation: 1

How to make my form to be responsive in all devices

I am making a registration form using bootstrap 4 but when I reduce the size of screen is not responding specifically on tablet size

 <section class="row">
   <section class="col-md-6 col-sm-12 col-lg-6">
<form action="" class="form-inline" >
  <p>
  <div class="form-group">
    <!-- First name-->

    <label for="firstname"  class="mr-sm-2">First Name:</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="firstname"  name="firstname" placeholder="Enter Fist Name" required>
     <!-- middle name-->
    <label for="middle"  class="mr-sm-2">Middle:</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="middle"  name="middle" placeholder="Enter Middle Name" required>
    <!-- Last name-->
      <label for="last"  class="mr-sm-2">Last:</label>
     <input type="text" class="form-control mb-2 mr-sm-2" id="last"  name="last" placeholder="Enter Last Name" required>
  </div></p>

Suffix: Job Title: 

  </div></p>

I was expected to be responsive on all sizes

Upvotes: 0

Views: 134

Answers (1)

Huỳnh Tu&#226;n
Huỳnh Tu&#226;n

Reputation: 116

Change your code to:

   <section class="row">
    <section class="col-sm-12">
      <form action="" class="form-inline">
        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <!-- First name-->
              <label for="firstname" class="mr-sm-2">First Name:</label>
              <input
                type="text"
                class="form-control mb-2 mr-sm-2"
                id="firstname"
                name="firstname"
                placeholder="Enter Fist Name"
                required
              />
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <!-- middle name-->
              <label for="middle" class="mr-sm-2">Middle:</label>
              <input
                type="text"
                class="form-control mb-2 mr-sm-2"
                id="middle"
                name="middle"
                placeholder="Enter Middle Name"
                required
              />
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <!-- Last name-->
              <label for="last" class="mr-sm-2">Last:</label>
              <input
                type="text"
                class="form-control mb-2 mr-sm-2"
                id="last"
                name="last"
                placeholder="Enter Last Name"
                required
              />
            </div>
          </div>
        </div>
      </form>
    </section>
  </section>

You should learn layout responsive in bootstrap4 https://getbootstrap.com/docs/4.0/layout/grid/

Upvotes: 1

Related Questions