Bootstrap 3 Form field not showing large on mobile - twitter-bootstrap-3

Question

I am having a problem here with the mobile display. I want the form input to show the input bar very large. It shows it fine on desktop any size window I make it. But the second I look at it on a mobile device if it is vertical the form input is no where near as large and you have to zoom to see it. But the second I turn the phone horizontal it shows it fine.
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-sm-8 col-lg-8 center-block">
<form action="{{url_for('check')}}" method="POST">
{{ form.url(placeholder=form.url.description, class="form-control input-lg") }}
</form>
</div>
</div>
</div>

Answer 1

After a while I was able to figure it out. This was missing in the header.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 2

You can make the input field take up the whole available width by using class col-xs-12.
<!--- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<!--- personal styles should always be below Bootstrap Core CSS -->
<!--<link rel="stylesheet" href="css/theme.css">-->
<!--- Google fonts-->
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-8 center-block">
<form action="{{url_for('check')}}" method="POST">
<input type="text" name="username" value="" class="form-control input-lg" />
</form>
</div>
</div>
</div>
</div>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- Bootstrap Core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>