Html - How do I fix the placholders positioning in bootstrap5

JonathanDvir
August 30, 2024
170 views
0 votes
2 Answers

Im trying to build a registration form and right now the spacing/positioning is kinda whack.
How should I fix them to be in the same line/row?
symmetrical.
I added the code, and a photo of how it looks like.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form>     
     <!--First Name-->
     <div class="mb-3 mt-3">
         <label for="fname" class="form-label">First name:</label>
         <input type="fname" class="form-control-xs" id="fname" placeholder="Enter name" />
     </div>
     <!--Last name-->
     <div class="mb-3 mt-3">
         <label for="lname" class="form-label">Lastname:</label>
         <input type="lname" class="form-control-xs" id="lname" placeholder="Last name" />
     </div>
     <!--Email-->
     <div class="mb-3 mt-3">
         <label for="email" class="form-label">E-mail:</label>
         <input type="email" class="form-control-xs" id="email" placeholder="Enter email" />
     </div>
     <!--Country-->
     <div class="mb-3 mt-3">
         <label for="city" class="form-label">City of residence:</label>
         <input type="city" class="form-control-xs" id="city" placeholder="City" />
     </div>
     <!--Button-->
     <input type="submit" value="Register" />
     <!--mandatory check box-->
     <input class='acb' type='checkbox' name='acheckbox[]' value='1' onclick='deRequire("acb")' required>By checking this box you agree to the
     <!--TERMS OF USE-->
     <a href="useragreement.html">user agreement</a>
     <!--PARAGRAPH-->
     <p>If you click the "Register" button, the form-data will be sent to the owner of the website.</p>
     <p>Already have an account?</p>
     <a href="../sign in/login.html"><button type="button">Sign In</button></a>
     

 </form>

enter image description here

I want it to be in the same line/row symmetrical sorry for grammar mistakes.

Answers

You can check bootstrap documentation. It contains many examples. It also has an example for you problem. Anyway here is the answer.

Link for the documentation:

Bootstrap documentation

* {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    color: #272727;
}

.register-form {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

form {
    width: 30%;
}

.form-group {
    margin-top: 5px !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <div class="register-form">
        <form>
            <!--First Name-->
            <div class="form-group row">
                <label for="fname" class="col-sm-4 col-form-label">First name:</label>
                <div class="col-sm-8">
                    <input type="fname" class="form-control" id="fname" placeholder="Enter name" />
                </div>
            </div>
            <!--Last name-->
            <div class="form-group row">
                <label for="lname" class="col-sm-4 col-form-label">Last Name:</label>
                <div class="col-sm-8">
                    <input type="lname" class="form-control" id="lname" placeholder="Last name" />
                </div>
            </div>
            <!--Email-->
            <div class="form-group row">
                <label for="email" class="col-sm-4 col-form-label">E-mail:</label>
                <div class="col-sm-8">
                    <input type="email" class="form-control" id="email" placeholder="Enter email" />
                </div>
            </div>
            <!--Country-->
            <div class="form-group row">
                <label for="city" class="col-sm-4 col-form-label">City of residence:</label>
                <div class="col-sm-8">
                    <input type="city" class="form-control" id="city" placeholder="City" />
                </div>
            </div>
        </form>
    </div>
    
</body>
</html>

Use display: grid and grid-template-columns: subgrid:

.form-inputs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  label {
    margin: 0;
  }
  &>div{
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form>     
    <div class="form-inputs">
       <!--First Name-->
       <div class="mb-3 mt-3">
           <label for="fname" class="form-label">First name:</label>
           <input type="fname" class="form-control-xs" id="fname" placeholder="Enter name" />
       </div>
       <!--Last name-->
       <div class="mb-3 mt-3">
           <label for="lname" class="form-label">Lastname:</label>
           <input type="lname" class="form-control-xs" id="lname" placeholder="Last name" />
       </div>
       <!--Email-->
       <div class="mb-3 mt-3">
           <label for="email" class="form-label">E-mail:</label>
           <input type="email" class="form-control-xs" id="email" placeholder="Enter email" />
       </div>
       <!--Country-->
       <div class="mb-3 mt-3">
           <label for="city" class="form-label">City of residence:</label>
           <input type="city" class="form-control-xs" id="city" placeholder="City" />
       </div>
     </div>
     <!--Button-->
     <input type="submit" value="Register" />
     <!--mandatory check box-->
     <input class='acb' type='checkbox' name='acheckbox[]' value='1' onclick='deRequire("acb")' required>By checking this box you agree to the
     <!--TERMS OF USE-->
     <a href="useragreement.html">user agreement</a>
     <!--PARAGRAPH-->
     <p>If you click the "Register" button, the form-data will be sent to the owner of the website.</p>
     <p>Already have an account?</p>
     <a href="../sign in/login.html"><button type="button">Sign In</button></a>
     

 </form>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do I fix the placholders positioning in bootstrap5

Answers