How to change bootstrap 4 grid system to fit mobile elegantly-CodePudding

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 >
<div >
<input asp-for="First_Name_AR"  />
</div>
<div >
<input asp-for="Second_Name_AR"  />
</div>
<div >
<input asp-for="Father_Name_AR"  />
</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 >
<div >
<input asp-for="First_Name_AR"  />
</div>
    </div>
<div >
<div >
<input asp-for="Second_Name_AR"  />
</div>
    </div>
<div >
<div >
<input asp-for="Father_Name_AR"  />
</div>
    </div>

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

CodePudding user response：

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 >
  <div >
    <input asp-for="First_Name_AR"  />
  </div>
  <div >
    <input asp-for="Second_Name_AR"  />
  </div>
  <div >
    <input asp-for="Father_Name_AR"  />
  </div>
</div>