Bootstrap text input not rendering properly - html

Question

One of my text field inputs is not rendering properly. I'm using bootstrap. Here's what it looks like.
This is the code I'm using.
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label for="input1">First Name</label>
<input type="text" class="form-control" id="input1" placeholder="First Name">
</div>
<div class="form-group">
<label for="input2">Last Name</label>
<input type="text2" class="form-control" id="input2" placeholder="Last Name">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
I noticed that when then input type is exactly text the input field is not rendered properly, but when the type is anything else, the input field is ok. What exactly am I doing wrong?

Answer 1

It seems like, and this is just a guess without being able to see all of your code, you have some style that is matching input[type="text"], and that is what's giving you the odd result.
This is not something wrong with bootstrap, rather, it's probably something on your end.

Answer 2

Works fine, this means you may have old Bootstrap, or some style is overriding default input[text] and notice, bootstrap doesn't care about type="text2" as by default is type of text
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label for="input1">First Name</label>
<input type="text" class="form-control" id="input1" placeholder="First Name">
</div>
<div class="form-group">
<label for="input2">Last Name</label>
<input type="text2" class="form-control" id="input2" placeholder="Last Name">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>