2

I am using Bootstrap 3 in a responsive layout. I am trying to arrange a sign-up form with First and Last name on the same horizontal line. They should be around 45% of their normal width, and email and pass should be below at normal size (like the default Facebook home-page sign-up.)

I imagine an ideal CSS solution would set the width to about 48% each (so there is some space in the middle.) However when I try to define width in % in an external CSS, all forms stack vertically no matter what (regardless of zoom.)

I am now writing the width in em's. However, with Bootstrap's responsive layout, when I zoom in or out beyond a certain limit, the the form fields stack vertically, instead of being side-by-side. This happens at 67% an 110% in Chrome, but works very well in between those zooms.

I tried this link in the Bootstrap documentation, it's just the CSS giving me a bit of trouble - http://getbootstrap.com/css/#forms-inline

My HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Static Top Navbar Example for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="navbar-static-top.css" rel="stylesheet">
    <link href="my-styles.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>

  <body>

    <!-- Static navbar -->
    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
        <!-- form starts here -->
        <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

    <div class="container">
      <div class="row jumbotron">
        <!-- Main component for a primary marketing message or call to action -->

          <div class="col-sm-7">
            <h1>Navbar example</h1>
            <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
            <p>To see the difference between static and fixed top navbars, just scroll.</p>
            <p>
              <a class="btn btn-lg btn-primary" href="bootstrap/components/#navbar" role="button">View navbar docs &raquo;</a>
            </p>
          </div>

          <div class="col-sm-1">
          </div>


            <form class="form-signin col-sm-4 well" role="form">
              <h2 class="form-signin-heading">Sign Up</h2><hr>



              <div class="form-inline" role="form">
                <div class="form-group">
                  <label class="sr-only" for="exampleInputEmail2">Email address
                  </label>
                  <input class="form-control-md" type="text" id="exampleInputEmail2" placeholder="First Name">
                </div>

                <div class="form-group">
                  <label class="sr-only" for="exampleInputPassword2">Password
                  </label>
                  <input class="form-control-md" type="text" id="exampleInputPassword2" placeholder="Last Name"> 
                </div>
              </div>



              <p></p><p><input type="email" class="form-control" placeholder="Email address" required autofocus></p>

              <p><input type="email" class="form-control" placeholder="Type email again" required autofocus></p>

              <input type="password" class="form-control" placeholder="Password" required>

              <label class="checkbox">
                <input type="checkbox" value="remember-me"> Remember me
              </label>

              <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
            </form>


        </div>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>

my-styles.css

/* Layout
===========================*/

body {
    /*padding-top: 10px; */
}

.container {
    max-width: 1100px
}

.form-control-md {
  display: block;
  width: 10em;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-control-md:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.form-control-md:-moz-placeholder {
  color: #999999;
}

.form-control-md::-moz-placeholder {
  color: #999999;
  opacity: 1;
}

.form-control-md:-ms-input-placeholder {
  color: #999999;
}

.form-control-md::-webkit-input-placeholder {
  color: #999999;
}

.form-control-md[disabled],
.form-control-md[readonly],
fieldset[disabled] .form-control-md {
  cursor: not-allowed;
  background-color: #eeeeee;
}

textarea.form-control-md {
  height: auto;
}
/* Jumbotron
===========================

.jumbotron {

}
*/
1
  • Please post the complete cost to JSFiddle. THen we can take a look at what's not working..
    – Joe Conlin
    Commented Jan 22, 2014 at 5:21

1 Answer 1

1
<form class="navbar-form navbar-right form-inline" role="form">
    <div class="form-group">
    ...

You need to have the class form-inline.

If you don't want to use that, you could try this (Option 2):

http://jsfiddle.net/snlacks/499yB/

Let me know if you need more clarification.

2
  • 1
    The link to the fiddle is broken. Commented Oct 31, 2016 at 16:33
  • This is from 2+ years ago, not sure where that fiddle went... Rereading the question, I think it was using rows/columns inside of a form. I wouldn't recommend that really. Commented Nov 1, 2016 at 20:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.