David
David

Reputation: 14414

Bootstrap text input not rendering properly

One of my text field inputs is not rendering properly. I'm using bootstrap. Here's what it looks like.

enter image description here

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?

Upvotes: 0

Views: 962

Answers (2)

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11940

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>

Upvotes: 1

What have you tried
What have you tried

Reputation: 11148

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.

Upvotes: 1

Related Questions