CODEWITHSUNDEEP
htmlcss
Iram
Iram

Reputation: 29

Button Alignment with textbox

enter image description here

Hello I am unable to align the button with the above text box on right side. There is no effect to set the margin of the fieldset. Below is my code.

<!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.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <title>Document</title>

<style>
    *{
        box-sizing: border-box;
    }
    .container{
        max-width:520px;
        max-height:180px;
        background-color:antiquewhite;
        
        

    }
    fieldset{
        max-width:518px;
        max-height:178px;
       padding-right:15px;
       padding-left:15px;
      
    }
    /*.form-group{
        max-width:518px;
        
    }*/
</style>

</head>
<body>
<div class="container">
    <div class="row">
            
        <div class ="col-sm-6 col-sm-offset-3 form-box">

            <form role="form" action method="post" class="registration-form" 
                style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;"
            >
                          
                    <fieldset><!--Start 2nd form field set-->
                        <div class="form-bottom">
                            <div class="form-group" style="margin-left:5px;margin-right:5px;margin-top:20px;width:100%;padding-right:5px;padding-left:5px;" >
                               
                                <input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
                            </div><!--End of 2nd form groupdiv-->
                            
                            <button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;margin-left:10px;padding-right:15px;width:100%">Get Started</button>
                        </div><!--End of bottom div-->

                    </fieldset><!--End of second form fieldset-->
                </form>
                   
</body>
</html>

Please fix the problem and tell me when we set the margin of fieldset 10px from right side then it will br the boundary of fieldset of 110px for element? Is it ok or there is any other concept?

Upvotes: 0

Views: 40

Answers (1)

Phan Gia Phuoc
Phan Gia Phuoc

Reputation: 61

try this

<!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.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  <title>Document</title>

  <style>
    * {
      box-sizing: border-box;
    }
    
    .container {
      max-width: 520px;
      max-height: 180px;
      background-color: antiquewhite;
    }
    
    fieldset {
      max-width: 518px;
      max-height: 178px;
      padding-right: 15px;
      padding-left: 15px;
    }
    /*.form-group{
        max-width:518px;
        
    }*/
  </style>

</head>

<body>
  <div class="container">
    <div class="row">

      <div class="col-sm-6 col-sm-offset-3 form-box">

        <form role="form" action method="post" class="registration-form" style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;padding-left: 20px;padding-right: 20px;">

          <fieldset>
            <!--Start 2nd form field set-->
            <div class="form-bottom">
              <div class="form-group" style="margin-top:20px;width:100%;">

                <input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
              </div>
              <!--End of 2nd form groupdiv-->

              <button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;padding-right:15px;width:100%">Get Started</button>
            </div>
            <!--End of bottom div-->

          </fieldset>
          <!--End of second form fieldset-->
        </form>

</body>

</html>

Upvotes: 1

Related Questions