CODEWITHSUNDEEP
htmlcssbootstrap-4
Matthew McKinley
Matthew McKinley

Reputation: 31

Bootstrap horizontal form

I trying to create a horizontal form in bootstrap and have used the code they've given in the documentation. In the example they have given the input boxes fill the entire column space. For some reason this does not happen for me even if I copy the code. How to I get mine to be the same format?

Here is how it looks on the bootstap website enter image description here

Here is an image of how this looks in my code enter image description here

Here is my code:

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h2>Account Details</h2>
      <form action="/account" method="post" class="form-horizontal">
        <div class="form-group row">
          <label for="height" class="col-sm-2 col-form-label">Height</label>
          <div class="col-sm-10">
            <input class="form-control" type="number" value="{{ account_details[0].height }}" id="height" name="height" min=0 max=300 step=1>
          </div>
        </div>
        <div class="form-group row">
          <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
          </div>
        </div>
        <div class="form-group row">
          <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Upvotes: 1

Views: 142

Answers (2)

negin motalebi
negin motalebi

Reputation: 393

It happened because of max='300'; when you set max condition for an input, size of that input change to max width that it needs to fill input for max value and because of that width change to a smaller input:

<!DOCTYPE html>
<html lang="en">

<head>

  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h2>Account Details</h2>
        <form action="/account" method="post" class="form-horizontal">
          <div class="form-group row">
            <label for="height" class="col-sm-2 col-form-label">Height</label>
            <div class="col-sm-10">
              <input class="form-control" type="number" id="heightname="height" min=0 step=1>
            </div>
          </div>
          <div class="form-group row">
            <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
          </div>
          <div class="form-group row">
            <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

</body>

</html>

The result with this should be like : this

Upvotes: 1

Matthew McKinley
Matthew McKinley

Reputation: 31

Thanks for the help, found bootstrap was interacting with something in my css page

Upvotes: 0

Related Questions