PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Saturday, November 19, 2022

[FIXED] How to change bootstrap 4 grid system to fit mobile elegantly

 November 19, 2022     bootstrap-4, javascript, jquery, media-queries, razor-pages     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing