Very large input fields

Question

Very large input fields

Navigation

#1 by (4 votes)

0

When copying and pasting a simple code from a sample form into the bootstrap site, the following occurs:

Whyarethesefieldslikethis?Beingthataccordingtotheexampletheyshouldbemuchsmaller.

<linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <label for="exampleInputFile">File input</label>
      <input type="file" id="exampleInputFile">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Check me out
      </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

twitter-bootstrap

asked by anonymous 05.07.2017 / 02:13

1 answer

Creating component dynamically How to make one element continue with effect when moving the mouse in another?

score 4 · Accepted Answer

The difference is that in the example the code is inside a Container (container class).

The container class does not appear in the example because it is usually unique per page. But if you look at the source code of the example page, you'll see that it's there with their respective values.

See the image below for a better understanding:

Toillustratewhatisdone,seetheexamplebelow:

.container {
  width: 400px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <label for="exampleInputFile">File input</label>
      <input type="file" id="exampleInputFile">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Check me out
      </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

Notice that at the beginning of your code I added div with class container . For example, I decrease the width from her to 400px , but bootstrap does it for you.

Note that it is not only the inputs that follows the size, but all elements within container .

If you think the size is bigger or smaller than what you want, you can customize it any way you like.