0

I'm trying to use a basic example of Bootstrap Twitter (sign-in example). In the link you can see the code of the example.

I copy-paste code in my IDE (NetBeans) replacing this line:

<link href="../../dist/css/bootstrap.css" rel="stylesheet">

for this one, which indicate where Bootstrap is in my pc:

<link href="MEDIA/bootstrap/css/bootstrap.css" rel="stylesheet">

But if I run that sample I see this web instead of the nice original of the example:

enter image description here

I think I should be seen the same result as in the example, don't I? Why am I getting this result?

Thanks for any tip!

EDIT 2: @mohsin.mr you're right (what a stupid mistake) thanks for that! I was having the signin.css on another directory, however now I have a similar result, but not the same as in the example. The button looks different and the textbox's length are shorter than the button's length.

enter image description here

EDIT: Here is the code I'm running:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Signin Template for Bootstrap</title>

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

    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">

      <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input type="text" class="form-control" placeholder="Email address" autofocus>
        <input type="password" class="form-control" placeholder="Password">
        <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> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>
5
  • It seems that you might be missing some parent div. But please show your complete code for better understanding
    – mohsin.mr
    Oct 20, 2013 at 1:26
  • 1
    Are you sure that signin.css placed in same folder where this HTML file exists?
    – mohsin.mr
    Oct 20, 2013 at 1:38
  • @mohsin.mr you were right. I fixed that problem. I realize that the signin.css isn't the same as in the example, because I must edit it in order to set the length of the pass and mail. Oct 20, 2013 at 15:04
  • Another thing I just realized is that it isn't responsive, if I play with the windows's size it remains unresponsive :( Oct 20, 2013 at 15:05
  • can you please vote up my answer and also choose it as correct one to help other viewers to know about the issue you were experiencing
    – mohsin.mr
    Oct 20, 2013 at 21:07

2 Answers 2

2

Your entire code is looking correct. Now the only reason due to which you experiencing this issue is to linking signin.css because it seems the bootstrap css file is also importing correctly and pattern of code is also correct.

0

I think you have to use the following custom CSS for center align the div

.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}

see the working fiddle

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.