Click here to Skip to main content
15,900,725 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi, how can i set the position of these 2 button to be align? the position for button admin login is slightly lower than the button login.

The modal for these two button are two different modal.

What I have tried:

<div class="col-md-2 col-md-offset-3">
          <a href="#" class="btn btn-primary logb" data-toggle="modal" data-target="#myModal"> <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> <span class="title1">Login </span></a></div>


          <div class="modal fade" id="myModal">
            <div class="modal-dialog">
              <div class="modal-content title1">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"</span></button>
                  <h4 class="modal-title title1"><span style="color:darkblue;font-size:12px;font-weight: bold">Login to your Account</span></h4>
                </div>
                <div class="modal-body">
                  <form class="form-horizontal" action="login.php?q=index.php" method="POST">
                    <fieldset>
                      <div class="form-group">
                        <label class="col-md-3 control-label" for="username"></label>  
                        <div class="col-md-6">
                          <input id="username" name="username" placeholder="Username" class="form-control input-md" type="username">
                        </div>
                      </div>

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

                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button type="submit" class="btn btn-primary">Log in</button>
                    </fieldset>
                  </form>
                </div>

              </div>
            </div>
          </div>
        </div>

        <div class="col-md-offset-10">
          <a class="btn btn-primary" data-toggle="modal" data-target="#login"> <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> <span class="title1"> Admin Login  </span></a></div>

          <div class="modal fade" id="login">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"</span><span class="sr-only">Close</span></button>
                  <h4 class="modal-title"><span style="color:darkblue;font-size:12px;font-weight: bold">Login to Server</span></h4>
                </div>
                <div class="modal-body title1">
                  <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-6">
                      <form role="form" method="post" action="admin.php?q=index.php">
                        <div class="form-group">
                          <input type="text" name="uname" maxlength="20"  placeholder="Username" class="form-control"/> 
                        </div>
                        <div class="form-group">
                          <input type="password" name="password" maxlength="30" placeholder="Password" class="form-control"/>
                        </div>
                        <div class="form-group" align="center">
                          <input type="submit" name="login" value="Login" class="btn btn-primary" />
                        </div>
                      </form>

                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
Posted
Updated 29-Jan-19 6:21am
Comments
Bryian Tan 28-Jan-19 21:47pm    
align horizontally? next to each other?
Member 12794883 28-Jan-19 23:57pm    
yes horizontally, next to each other

1 solution

Here is an example: CP_button_align - JSFiddle[^] . I also noticed there some tag mismatch issues (like missing opening/closing div tags)
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900