Bootstrap horizontal form not working

user_4507397 0
Viewed 1254

I'm trying to build a simple horizontal form with bootstrap for my laravel application. This is the code I'm using. But it displays it like this:

form is displayed on the left halve of the page

The form is displayed on the left half of the page. Any ideas? Preferably the form should be centered on the page.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
  <form class="form-horizontal">
    <fieldset>

      <!-- Form Name -->
      <legend>Register</legend>

      <!-- Text input-->
      <div class="form-group">
        <label class="col-sm-6 control-label" for="name">Name</label>
        <div class="col-sm-6">
          <input id="name" name="name" placeholder="Name" class="form-control input-md" required="" type="text">
        </div>
      </div>

      <!-- Text input-->
      <div class="form-group">
        <label class="col-sm-6 control-label" for="email">Email</label>
        <div class="col-sm-6">
          <input id="email" name="email" placeholder="Email" class="form-control input-md" required="" type="email">
        </div>
      </div>

      <!-- Password input-->
      <div class="form-group">
        <label class="col-sm-6 control-label" for="password">Password</label>
        <div class="col-sm-6">
          <input id="password" name="password" placeholder="Password" class="form-control input-md" required="" type="password">
        </div>
      </div>

      <!-- Password input-->
      <div class="form-group">
        <label class="col-sm-6 control-label" for="password_confirmation">Confirm Password</label>
        <div class="col-sm-6">
          <input id="password_confirmation" name="password_confirmation" placeholder="Re-enter Password" class="form-control input-md" required="" type="password">
        </div>
      </div>

      <!-- Button -->
      <div class="form-group">
        <label class="col-sm-6 control-label" for="submit"></label>
        <div class="col-sm-6">
          <button id="submit" name="submit" class="btn btn-primary">Register</button>
        </div>
      </div>

    </fieldset>
  </form>
</div>

twitter-bootstrap css html
3 Answers

You can try the following bootstrap code:

<div class="col-md-4 col-md-offset-4">your div</div>

So, basic idea is that divide all columns by 3 meaning there are total 12 bootstrap columns and if you divide it by 4, it gives you 3 columns. Then put your div in middle column.Meaning col-md-4 makes one column of 4 bootstrap columns.

Try this: I have tried with IntelliJ Idea and it works fine in my browser. let me know what did not work? 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
    <form class="form-inline">
        <fieldset>
           <div class="col-md-4 col-md-offset-4">
            <!-- Form Name -->
            <legend>Register</legend>

            <!-- Text input-->
            <div class="form-group">
                <label class="col-sm-6 control-label" for="name">Name</label>
                <div class="col-sm-6">
                    <input id="name" name="name" placeholder="Name" class="form-control input-md" required="" type="text">
                </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
                <label class="col-sm-6 control-label" for="email">Email</label>
                <div class="col-sm-6">
                    <input id="email" name="email" placeholder="Email" class="form-control input-md" required="" type="email">
                </div>
            </div>

            <!-- Password input-->
            <div class="form-group">
                <label class="col-sm-6 control-label" for="password">Password</label>
                <div class="col-sm-6">
                    <input id="password" name="password" placeholder="Password" class="form-control input-md" required="" type="password">
                </div>
            </div>

            <!-- Password input-->
            <div class="form-group">
                <label class="col-sm-6 control-label" for="password_confirmation">Confirm Password</label>
                <div class="col-sm-6">
                    <input id="password_confirmation" name="password_confirmation" placeholder="Re-enter Password" class="form-control input-md" required="" type="password">
                </div>
            </div>

            <!-- Button -->
            <div class="form-group">
                <label class="col-sm-6 control-label" for="submit"></label>
                <div class="col-sm-6">
                    <button id="submit" name="submit" class="btn btn-primary">Register</button>
                </div>
            </div>
           </div>
        </fieldset>
    </form>
</div>
user_87878180 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <div class="container">
      <form class="form-horizontal">
        <fieldset>

          <!-- Form Name -->
          <legend>Register</legend>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-sm-3 control-label" for="name">Name</label>
            <div class="col-sm-6">
              <input id="name" name="name" placeholder="Name" class="form-control input-md" required="" type="text">
            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-sm-3 control-label" for="email">Email</label>
            <div class="col-sm-6">
              <input id="email" name="email" placeholder="Email" class="form-control input-md" required="" type="email">
            </div>
          </div>

          <!-- Password input-->
          <div class="form-group">
            <label class="col-sm-3 control-label" for="password">Password</label>
            <div class="col-sm-6">
              <input id="password" name="password" placeholder="Password" class="form-control input-md" required="" type="password">
            </div>
          </div>

          <!-- Password input-->
          <div class="form-group">
            <label class="col-sm-3 control-label" for="password_confirmation">Confirm Password</label>
            <div class="col-sm-6">
              <input id="password_confirmation" name="password_confirmation" placeholder="Re-enter Password" class="form-control input-md" required="" type="password">
            </div>
          </div>

          <!-- Button -->
          <div class="form-group">
            <label class="col-sm-3 control-label" for="submit"></label>
            <div class="col-sm-6">
              <button id="submit" name="submit" class="btn btn-primary">Register</button>
            </div>
          </div>

        </fieldset>
      </form>
    </div>

col-sm-6 control-label =>col-sm-3 control-label

user_84370990

You can try like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div class="row">
 <div class="col-lg-8 col-md-8">
  <form class="form-horizontal">
   <fieldset>
    <!-- Form Name -->
    <legend>Register</legend>

    <!-- Text input-->
    <div class="form-group">
     <label class="col-sm-6 control-label" for="name">Name</label>
     <div class="col-sm-6">
      <input id="name" name="name" placeholder="Name" class="form-control input-md" required="" type="text">
     </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
     <label class="col-sm-6 control-label" for="email">Email</label>
     <div class="col-sm-6">
      <input id="email" name="email" placeholder="Email" class="form-control input-md" required="" type="email">
     </div>
    </div>

    <!-- Password input-->
    <div class="form-group">
     <label class="col-sm-6 control-label" for="password">Password</label>
     <div class="col-sm-6">
      <input id="password" name="password" placeholder="Password" class="form-control input-md" required="" type="password">
     </div>
    </div>

    <!-- Password input-->
    <div class="form-group">
     <label class="col-sm-6 control-label" for="password_confirmation">Confirm Password</label>
     <div class="col-sm-6">
      <input id="password_confirmation" name="password_confirmation" placeholder="Re-enter Password" class="form-control input-md"
       required="" type="password">
     </div>
    </div>

    <!-- Button -->
    <div class="form-group">
     <label class="col-sm-6 control-label" for="submit"></label>
     <div class="col-sm-6">
      <button id="submit" name="submit" class="btn btn-primary">Register</button>
     </div>
    </div>

   </fieldset>
  </form>
 </div>
</div>

user_84650230
Related