CODEWITHSUNDEEP
htmlcssbootstrap-4
narypigeon
narypigeon

Reputation: 113

How do I scale a Bootstrap 4 form to fit the width in mobile view?

I have a form made using Bootstrap 4, which I wish to scale to fit the viewport of a mobile user.

Currently, what mobile users see is this:

enter image description here

As you can see, the form inputs aren't fitting the width of the screen. I wish for them to occupy the width of the screen.

I have the viewport set in the head like so:

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

I've also tried doing: 

@media screen and (max-width: 360px) {
  form-row col-xs-6 {
    width: 100% !important; 
  }
}

but to no avail.

All help is appreciated!

Upvotes: 0

Views: 1990

Answers (1)

kealaxshan
kealaxshan

Reputation: 352

use the inputs with in container

<div class="container">
    <div class="row">
    <div class="form-group col-md-6">
      <label for="usr">Name:</label>
      <input type="text" class="form-control" id="usr">
    </div>
    <div class="form-group col-md-6">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd">
    </div>
    </div>
    </div>

Upvotes: 1

Related Questions