Issue
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?
Solution
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/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/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>
Answered By - Cervus camelopardalis Answer Checked By - Mildred Charles (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.