-5
\$\begingroup\$

I am new to bootstrap and trying to design login page. Please check my below link and let me know if i did it in wrong way. I have on doubt I think i am doing in wrong way because when i inspect my html page(right click inspect element) on form then i notice form width is less than input field. <form class="form-vertical" role="form"></form> this is my form and i notice my input field's width is larger than formPlease see my inspected element on <form class="form-vertical" role="form"> https://jsfiddle.net/vaaibhavk32/yej8d8r3/

    <!DOCTYPE html>
    <html>
    <head>
        <title>Login</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8" >

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

        <style type="text/css">
        h1,div{
            margin: 0px;
            padding: 0px;
        }
        body {

      padding-top: 70px;
    }
        .login-containt  {          
                margin: 0 auto;         
                box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);
                width: 40%;
            }
            .outer-form{
                padding: 0px 5px;
            }
             .login-containt h1 {
                text-align: center;
                font-weight: bold;
                font-size: 26px;
                padding-bottom: 10px;

            }

    @media screen and (max-width: 600px){
        .login-containt{
        width: 100%
    }
    }
        </style>

    </head>
    <body>
        <!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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 id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="../navbar/">Default</a></li>
                <li><a href="../navbar-static-top/">Static top</a></li>
                <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>
        <div class="container">
            <div class="jumbotron login-containt">
                <div class="outer-form">

                        <h1>Login</h1>

                    <form class="form-vertical" role="form">
                        <div class="row">
                            <div class="form-group input-group">
                                <span class="input-group-addon" id="basic-addon1">@</span>
                                <input type="email" name="email" id="email" placeholder="Email" class="form-control">                           
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                    <input type="password" name="password" id="password" placeholder="Password" class="form-control">                       
                            </div>  
                        </div>
                        <div class="row">
                            <div class="form-group">      
                                <input type="checkbox" aria-label="..."> Remember Me            
                                <a href="forgot_password" class="pull-right">I forgot my password</a><br>
                            </div><!-- /input-group -->
                        </div>

                        <div class="row text-center">
                            <div class="form-group ">
                                <input type="button" class="btn btn-success" style="width: 100%" value="Login"  name="">                            
                            </div>
                        </div>  
                        <div class="row text-center">
                            OR
                        </div>
                        <div class="row">
                            <div class="form-group">                            
                                <a href="/register/" class="text-center">Register a new membership</a>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </body>
    </html>
\$\endgroup\$

closed as off-topic by πάντα ῥεῖ, Mast, Vogel612 May 4 '18 at 19:49

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – πάντα ῥεῖ, Mast, Vogel612
If this question can be reworded to fit the rules in the help center, please edit the question.

  • \$\begingroup\$ Your answer indicates the code was not working as intended. That means this question is off-topic for Code Review. Please take a look at the help center. \$\endgroup\$ – Mast May 4 '18 at 19:47
  • 3
    \$\begingroup\$ I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information. \$\endgroup\$ – Vogel612 May 4 '18 at 19:49
1
\$\begingroup\$

Within a form, you don't use the .row class. The documentation examples always use .form-group instead. Keep the .form-group div but remove the parent element (.row).

I have updated your Fiddle with the correct code.

\$\endgroup\$
-2
\$\begingroup\$

my problem is solved by removing row class for form-group

old code

<div class="row">
<div class="form-group input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
            <input type="password" name="password" id="password" placeholder="Password" class="form-control">                              
    </div>
</div>

Working Code

iv class="form-group input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
        <input type="password" name="password" id="password" placeholder="Password" class="form-control">                              
</div>
\$\endgroup\$

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