What is the best way to ensure that a <label> remains vertically aligned with its <form>?

Question

What is the best way to ensure that a <label> remains vertically aligned with its <form>?

I'm struggling to incorporate their suggestions into my design. How can I align my label to the left of my input field on the same line? Also, I'm a beginner in coding so please excuse any mistakes in my code:

body {
  background-color: #f5f5f5;
}

.rng_box {
  background-color: white;
  width: 70%;
  max-width: 800px;
  left: 50%;
  top: 460px;
  border-radius: 20px;
  padding: 20px;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 6px 2px #E5E5E5;
  border: solid 3px #DEDEDE;
}

.title {
  text-align: center;
}

.form-control {
  width: 180px;
  height: 30px;
  margin-left: 45px;
}

.btn {
  margin: 1px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0f150e1508">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="rng_box">
  <h1 class="title">Random Number Generator</h1>
  <div>
    <form id="minAndMax">
      <label for="min">Minimum:</label><br>
      <input type="number" id="min" name="min" class="form-control" value="1">
      <label for="max">Maximum:</label><br>
      <input type="number" id="max" name="max" class="form-control" value="10">
      <br>
      <div class="buttons">
        <button type="button" class="btn btn-success" onclick="generateRN()">Generate &#x1F389;</button>
        <button type="button" class="btn btn-danger" onclick="ignoreFields()">Ignore Fields</button>
        <button type="reset" class="btn btn-primary">Clear</button>
      </div>
    </form>
  </div>
  <hr>
  <h1 id="rng_answer">0</h1>
</div>

html css bootstrap-4

Answer 1

Answer №1

If you want to make it simple, just put your label and input inside a div and utilize flexbox.

https://www.w3schools.com/css/css3_flexbox.asp

Take a look at the example code provided below:

.label-wrap{
  display:flex;
}

<div class='label-wrap'>
  <label for="min">Minimum:</label><br>
  <input type="number" id="min" name="min" class="form-control" value="1">
</div>

https://i.sstatic.net/vwU4H.png

Answer 2

If you want to make it simple, just put your label and input inside a div and utilize flexbox.

https://www.w3schools.com/css/css3_flexbox.asp

Take a look at the example code provided below:

.label-wrap{
  display:flex;
}

<div class='label-wrap'>
  <label for="min">Minimum:</label><br>
  <input type="number" id="min" name="min" class="form-control" value="1">
</div>

https://i.sstatic.net/vwU4H.png

Answer 3

Answer №2

The issue stems from the .form-control css class in the _forms.scss file, which includes a display: block property. This causes the component to move to a new line. To resolve this, you can use display: inline-block !important instead, allowing the input and label to be aligned on the same line. Furthermore, there are unnecessary <br> tags that should be removed to improve the layout.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdbc1dac1dc">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="RNG.css">
    <title>Random Number Generator</title>
    <link rel="icon" type="image/png" href="/Users/trippyrock/Desktop/ToolScape/favicon.png">
<style>
body {
    background-color: #f5f5f5;;
}
.rng_box {
    background-color: white;
    width: 70%;
    max-width: 800px;
    left: 50%;
    top: 460px;
    border-radius: 20px;
    padding: 20px;
    position: absolute;
    transform: translate(-50%,-50%);
    box-shadow: 0px 2px 6px 2px #E5E5E5;
    border: solid 3px #DEDEDE;
}
.title {
    text-align: center;
}

.form-control {
    width:180px;
    height:30px;
    margin-left: 45px;
    display: inline-block !important;
}
.btn {
    margin: 1px;
}
</style>
</head>
<body>
    <div class= "rng_box">
        <h1 class="title">Random Number Generator</h1>
        <div>
            <form id="minAndMax">
                    <label for="min">Minimum:</label>
                    <input type="number" id="min" name="min" class="form-control" value="1">
                    
                    <label for="max">Maximum:</label>
                    <input type="number" id="max" name="max" class="form-control" value="10">
                    
            <div class="buttons">
                    <button type="button" class="btn btn-success" onclick="generateRN()">Generate &#x1F389;</button>
                    <button type="button" class="btn btn-danger" onclick="ignoreFields()">Ignore Fields</button>
                    <button type="reset" class="btn btn-primary">Clear</button>
            </div>
            </form>
        </div>
        <hr> 
            <h1 id="rng_answer">0</h1>
    </div>

    <script src="RNG.js"></script>
</body>
</html>

Answer 4

The issue stems from the .form-control css class in the _forms.scss file, which includes a display: block property. This causes the component to move to a new line. To resolve this, you can use display: inline-block !important instead, allowing the input and label to be aligned on the same line. Furthermore, there are unnecessary <br> tags that should be removed to improve the layout.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdbc1dac1dc">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="RNG.css">
    <title>Random Number Generator</title>
    <link rel="icon" type="image/png" href="/Users/trippyrock/Desktop/ToolScape/favicon.png">
<style>
body {
    background-color: #f5f5f5;;
}
.rng_box {
    background-color: white;
    width: 70%;
    max-width: 800px;
    left: 50%;
    top: 460px;
    border-radius: 20px;
    padding: 20px;
    position: absolute;
    transform: translate(-50%,-50%);
    box-shadow: 0px 2px 6px 2px #E5E5E5;
    border: solid 3px #DEDEDE;
}
.title {
    text-align: center;
}

.form-control {
    width:180px;
    height:30px;
    margin-left: 45px;
    display: inline-block !important;
}
.btn {
    margin: 1px;
}
</style>
</head>
<body>
    <div class= "rng_box">
        <h1 class="title">Random Number Generator</h1>
        <div>
            <form id="minAndMax">
                    <label for="min">Minimum:</label>
                    <input type="number" id="min" name="min" class="form-control" value="1">
                    
                    <label for="max">Maximum:</label>
                    <input type="number" id="max" name="max" class="form-control" value="10">
                    
            <div class="buttons">
                    <button type="button" class="btn btn-success" onclick="generateRN()">Generate &#x1F389;</button>
                    <button type="button" class="btn btn-danger" onclick="ignoreFields()">Ignore Fields</button>
                    <button type="reset" class="btn btn-primary">Clear</button>
            </div>
            </form>
        </div>
        <hr> 
            <h1 id="rng_answer">0</h1>
    </div>

    <script src="RNG.js"></script>
</body>
</html>

Answer 5

Answer №3

Utilize the bootstrap forms in conjunction with other utility classes for enhanced functionality.

<div class="shadow-sm w-75 mx-auto mt-4 p-3 rounded-lg mw-75 text-center">
    <h1>Random Number generator</h1>
    <form class="form-horizontal" id="minAndMax">
        <div class="form-group row">
            <label class="col-4 col-form-label">Minimum:</label>
            <div class="col-8">
                <input type="number" id="min" name="min" class="form-control" value="1" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-4 col-form-label">Maximum:</label>
            <div class="col-8">
                <input type="number" id="max" name="max" class="form-control" value="10" />
            </div>
        </div>
        <div class="d-flex justify-content-center">
            <button type="button" class="btn btn-success mr-2" onclick="">Generate &#x1f389</button>
            <button type="button" class="btn btn-danger mr-2" onclick="">Ignore Fields</button>
            <button type="reset" class="btn btn-primary" onclick="">Clear</button>
      </div>
  </form>
</div>

Answer 6

Utilize the bootstrap forms in conjunction with other utility classes for enhanced functionality.

<div class="shadow-sm w-75 mx-auto mt-4 p-3 rounded-lg mw-75 text-center">
    <h1>Random Number generator</h1>
    <form class="form-horizontal" id="minAndMax">
        <div class="form-group row">
            <label class="col-4 col-form-label">Minimum:</label>
            <div class="col-8">
                <input type="number" id="min" name="min" class="form-control" value="1" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-4 col-form-label">Maximum:</label>
            <div class="col-8">
                <input type="number" id="max" name="max" class="form-control" value="10" />
            </div>
        </div>
        <div class="d-flex justify-content-center">
            <button type="button" class="btn btn-success mr-2" onclick="">Generate &#x1f389</button>
            <button type="button" class="btn btn-danger mr-2" onclick="">Ignore Fields</button>
            <button type="reset" class="btn btn-primary" onclick="">Clear</button>
      </div>
  </form>
</div>

What is the best way to ensure that a <label> remains vertically aligned with its <form>?

Answer №1

Answer №2

Answer №3

Similar questions

Stopping an HTML5 range input at a specific number: Tips and tricks

Achieve the hidden div scroll effect in React by initially hiding the div and then allowing

When setting the margin to auto, it perfectly centers elements on servers and IE, but on Chrome off the server, it appears to be aligned to the

Avoiding duplicate borders in grid layout

Leveraging CamanJS for canvas filtering

Adjust text alignment of SVG elements using CSS

How can I apply both Css and Bootstrap styles to an element in Next.js?

Avoiding text from overflowing a DIV when the parent DIV's width is specified as a percentage

Div containing a centered span with a background

Aligning the tooltip element vertically

Turn off the scrollbar without losing the ability to scroll

Trouble encountered with bootstrap toggling when multiple identical inputs are used

When the add button is clicked, I would like to implement a feature where a checkbox is added

Mapping memory for FirefoxOS is like equivalent strides

Verify if there are DOM elements located within a DIV container, execute the functions associated with those elements sequentially

Jquery draggable droppable does not support displaying multiple divs simultaneously

The functionality of changing the category in the second carousel slider on click using JavaScript appears to

Selenium alert: element click blocked: Another element is in the way of receiving the click

Content not being hidden by Twitter Bootstrap tabs

`Why won't the checkbox uncheck when the dropdown is changed in jQuery?`