How to change bootstrap 4 grid system to fit mobile elegantly

Question

I have 3 steps form and in each row in it contains many inputs like thisclick here to see my form
and here a sample of the gird system i used

 <div class="row">
<div class="col">
<input asp-for="First_Name_AR" class="form-control" />
</div>
<div class="col">
<input asp-for="Second_Name_AR" class="form-control" />
</div>
<div class="col">
<input asp-for="Father_Name_AR" class="form-control" />
</div>
</div>

the problem when using mobile it will be like this : click here
So what I want is to make this form fit mobile beautifully like to set one input in each row like this

  <div class="row">
<div class="col">
<input asp-for="First_Name_AR" class="form-control" />
</div>
    </div>
<div class="row">
<div class="col">
<input asp-for="Second_Name_AR" class="form-control" />
</div>
    </div>
<div class="row">
<div class="col">
<input asp-for="Father_Name_AR" class="form-control" />
</div>
    </div>

is there any idea using @media query or javascript solutions?

Answer 1

You are using Bootstrap grid wrong. You put each col in a separate row. Instead, put all columns inside the same row. Then change the class from col to col-md-4.

The class col-md-4 means the following:

• If the viewport width >= 768px: there will be three columns beside each other.
• If the viewport width < 768px: columns will be stacked above each other.

See the snippet below.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-4">
    <input asp-for="First_Name_AR" class="form-control" />
  </div>
  <div class="col-md-4">
    <input asp-for="Second_Name_AR" class="form-control" />
  </div>
  <div class="col-md-4">
    <input asp-for="Father_Name_AR" class="form-control" />
  </div>
</div>