CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
pee2pee
pee2pee

Reputation: 3792

Twitter Bootstrap 3 - Horizontal Forms

I have the following code. However the form doesn't work as intended. It has the labels/inputs below one another rather than next to one another

Email (Label)

Email (Input)

Password (Label)

Password (Input)

Rather than

Email (Label) Email (Input)

Password (Label) Password (Input)

As per this example http://getbootstrap.com/css/#forms-horizontal

<!DOCTYPE html>
<html>
<head>
<title>TEMPLATE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword1" class="col-lg-2 control-label">Password</label>
    <div class="col-lg-10">
      <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery-latest.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
</body>
</html>

Upvotes: 0

Views: 12061

Answers (1)

Mittchel
Mittchel

Reputation: 1926

The problem is in the paths to your CSS files. When using your code (copy pasted) in bootstrap fiddle it works as expected(http://bootply.com/81202). Since your CSS files aren't included as suspected it enables a default markup.

Upvotes: 2

Related Questions