Unable to fix button alignment wrt container in bootstrap 5-CodePudding

I have a piece of html code, where everything is fine except for the position of the button. It's very far away from the container. This is my code below:

<div  id="inp_field" style="background-color: rgb(127, 255, 202); padding: 5em 5em">
        <div  style="background-color: rgb(250, 214, 116); width:25em;">
            <div >
                <input  type="checkbox" id="mySwitch" name="emp">
                <label  for="mySwitch"><b id="tag">EmpName</b></label>
            </div>

            <div >
                <input type="text"  id="emp" data-bs-toggle="tooltip" title="You can toggle the above button to choose between empname and PF no :))"  placeholder="Enter empname" onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event.charCode==32" >
                <label for="emp">Enter your name</label>
            </div>
            <label for="sel1" ><b>Select period (YM - YM):</b></label>
                <div id="period">
                    <select  id="sel1" name="sel1" style="width: 7em;"></select>
                    <b>-</b>
                    <select  id="sel2" name="sel2" style="width: 7em;" disabled></select>
                </div>
                <br>
                <div >
                    <input type="checkbox" id="checksupp" name="Check if supplementary bill is required" value="Check if supplementary bill is required">
                    <label  for="checksupp">Check if supplementary bill is required</label>
                </div>
        </div>
        <button  type="button" id="submit">Submit</button>
    </div>

The button with the id submit is very far away from the container (the reference image is uploaded below). I am not able to fix this. Please help me.

CodePudding user response：

Remove .container from the yellow box and add padding, Also, add .flex-column to the parent class to make it a column, right now your flex container is row-wise, make the parent div of the select elements a flex box with justify-content-between to create gap between the elements And to make your select row wise

<!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">
        <title>NOTA MEDIA</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    <body>
        <!-- Add flex-column class-->  
        <div  id="inp_field" style="background-color: rgb(127, 255, 202); padding: 5em 5em">
       <!-- Remove container class from this div and add padding -->
        <div style="background-color: rgb(250, 214, 116); width:25em;">
            <div >
                <input  type="checkbox" id="mySwitch" name="emp">
                <label  for="mySwitch"><b id="tag">EmpName</b></label>
            </div>

            <div >
                <input type="text"  id="emp" data-bs-toggle="tooltip" title="You can toggle the above button to choose between empname and PF no :))"  placeholder="Enter empname" onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event.charCode==32" >
                <label for="emp">Enter your name</label>
            </div>
            <label for="sel1" ><b>Select period (YM - YM):</b></label>
                <!-- Make it a flex box container-->
                <div id="period" >
                    <select  id="sel1" name="sel1" style="width: 7em;"></select>
                    <b>-</b>
                    <select  id="sel2" name="sel2" style="width: 7em;" disabled></select>
                </div>
                <br>
                <div >
                    <input type="checkbox" id="checksupp" name="Check if supplementary bill is required" value="Check if supplementary bill is required">
                    <label  for="checksupp">Check if supplementary bill is required</label>
                </div>
        </div>
        <button  type="button" id="submit">Submit</button>
    </div> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    </body>
</html>

CodePudding user response：

The problem is you put button tag not in inside container

<!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" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div
      
      id="inp_field"
      style="background-color: rgb(127, 255, 202); padding: 5em 5em"
    >
      <div
        
        style="background-color: rgb(250, 214, 116); width: 25em"
      >
        <div >
          <input
            
            type="checkbox"
            id="mySwitch"
            name="emp"
          />
          <label  for="mySwitch"
            ><b id="tag">EmpName</b></label
          >
        </div>

        <div >
          <input
            type="text"
            
            id="emp"
            data-bs-toggle="tooltip"
            title="You can toggle the above button to choose between empname and PF no :))"
            placeholder="Enter empname"
            onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event.charCode==32"
          />
          <label for="emp">Enter your name</label>
        </div>
        <label for="sel1" 
          ><b>Select period (YM - YM):</b></label
        >
        <div id="period">
          <select
            
            id="sel1"
            name="sel1"
            style="width: 7em"
          ></select>
          <b>-</b>
          <select
            
            id="sel2"
            name="sel2"
            style="width: 7em"
            disabled
          ></select>
        </div>
        <br />
        <div >
          <input
            type="checkbox"
            id="checksupp"
            name="Check if supplementary bill is required"
            value="Check if supplementary bill is required"
          />
          <label  for="checksupp"
            >Check if supplementary bill is required</label
          >
        </div>
        <button
          
          type="button"
          id="submit"
        >
          Submit
        </button>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

CodePudding user response：

Maybe you need something like this, your button is outside of the main container.

<!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">
        <title>NOTA MEDIA</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    <body>
        <div  id="inp_field" style="background-color: rgb(127, 255, 202); padding: 5em 5em">
            <div  style="background-color: rgb(250, 214, 116); width:25em;">
                <div >
                    <input  type="checkbox" id="mySwitch" name="emp">
                    <label  for="mySwitch"><b id="tag">EmpName</b></label>
                </div>

                <div >
                    <input type="text"  id="emp" data-bs-toggle="tooltip" title="You can toggle the above button to choose between empname and PF no :))"  placeholder="Enter empname" onkeypress="return (event.charCode > 64 && 
                    event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event.charCode==32" >
                    <label for="emp">Enter your name</label>
                </div>
                <label for="sel1" ><b>Select period (YM - YM):</b></label>
                <div id="period">
                    <select  id="sel1" name="sel1" style="width: 7em;"></select>
                    <b>-</b>
                    <select  id="sel2" name="sel2" style="width: 7em;" disabled></select>
                </div>
                <br>
                <div >
                    <input type="checkbox" id="checksupp" name="Check if supplementary bill is required" value="Check if supplementary bill is required">
                    <label  for="checksupp">Check if supplementary bill is required</label>
                </div>
               
            </div>
            <div >
                <div >
                    <button  type="button" id="submit">Submit</button>                        
                </div>
            </div>
        </div> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    </body>
</html>

CodePudding user response：

I added a parent grid element, now you can arrange and style your elements as you wish.

<!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">
  <title>NOTA MEDIA</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

</head>

<body>

  <div  id="inp_field" style="background-color: rgb(127, 255, 202); padding: 5em 5em">
    <div style="display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 2em">
      <div  style="background-color: rgb(250, 214, 116); width:25em;">
        <div >
          <input  type="checkbox" id="mySwitch" name="emp">
          <label  for="mySwitch"><b id="tag">EmpName</b></label>
        </div>

        <div >
          <input type="text"  id="emp" data-bs-toggle="tooltip" title="You can toggle the above button to choose between empname and PF no :))" placeholder="Enter empname" onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event.charCode==32">
          <label for="emp">Enter your name</label>
        </div>
        <label for="sel1" ><b>Select period (YM - YM):</b></label>
        <div id="period">
          <select  id="sel1" name="sel1" style="width: 7em;"></select>
          <b>-</b>
          <select  id="sel2" name="sel2" style="width: 7em;" disabled></select>
        </div>
        <br>
        <div >
          <input type="checkbox" id="checksupp" name="Check if supplementary bill is required" value="Check if supplementary bill is required">
          <label  for="checksupp">Check if supplementary bill is required</label>
        </div>
      </div>
      <button  style="width: 80px; height: 40px; align-self: self-end" type="button" id="submit">Submit</button>

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

</html>