Input Group in combination with span: style problems using bootstrap - html

Question

I am facing a style problem.
So this is my code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<form>
<div class="input-group mb-3">
<span class="input-group-addon">Site Name</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
<br>
<div class="input-group mb-3">
<span class="input-group-addon">URl</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
<br>
<div class="input-group mb-3">
<span class="input-group-addon">Number</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
<br>
<div class="input-group mb-3">
<span class="input-group-addon">Desc. or Comment</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
<br>
</form>
I have different long names in my span tag. The problem is that my input fields are not in a column. I want them to be among themselves. Can u tell me what how to get the style i want.

Answer 1

You need to separate everything per Bootstrap styles. You don't have your items layed out in rows/columns. The following example would be with Bootstrap 4.
Use the Full Page option when viewing the snippet.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<div class="row">
<span class="input-group-addon col-sm-12 col-md-3">Site Name</span>
<input type="text" id="msg" class="form-control col-sm-12 col-md-9" name="msg" placeholder="Additional Info">
</div>
<div class="row mt-5">
<span class="input-group-addon col-sm-12 col-md-3">URL</span>
<input type="text" id="msg" class="form-control col-sm-12 col-md-9" name="msg" placeholder="Additional Info">
</div>
<div class="row mt-5">
<span class="input-group-addon col-sm-12 col-md-3">Number</span>
<input type="text" id="msg" class="form-control col-sm-12 col-md-9" name="msg" placeholder="Additional Info">
</div>
<div class="row mt-5">
<span class="input-group-addon col-sm-12 col-md-3">Desc. or Comment</span>
<input type="text" id="msg" class="form-control col-sm-12 col-md-9" name="msg" placeholder="Additional Info">
</div>
</form>
</div>

Answer 2

I admit I am guessing a bit as to your intent here that you mean to make the input group start labels have a similar width so that is what I attempt here.
Your input group prefix text is already left so we can simply leverage the Bootstrap grid column classes for this. Here I used col-3 to force a 3/12 of a width for the input-group-text using in Bootstrap 5. You can try other values such as col-2 or col-4 etc.
Things I did:
Used Bootstrap 5
Changed your ID attributes to be unique so that the HTML is valid
Changed your name attributes to match the id I had changed it to
Removed the <br> markup as it seemed to not be needed - if you need more space you can increase mb-3 to mb-5 or give the next item mt-3 or some such.
Changed the placeholder attribute text to better illustrate which field we were using
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<form>
<div class="input-group mb-3">
<span class="input-group-text col-3">Site Name</span>
<input id="site-name" type="text" class="form-control" name="site-name" placeholder="Name here">
</div>
<div class="input-group mb-3">
<label class="input-group-text col-3">URI</label>
<input id="url" type="text" class="form-control" name="url" placeholder="URL here">
</div>
<div class="input-group mb-3">
<span class="input-group-text col-3">Number</span>
<input id="site-number" type="text" class="form-control" name="site-number" placeholder="Number Info">
</div>
<div class="input-group mb-3">
<span class="input-group-text col-3">Desc. or Comment</span>
<input id="site-desc" type="text" class="form-control" name="site-desc" placeholder="Comment Info">
</div>
</form>

Answer 3

So i solved my problem with some custom css.
Create style.css and dont forget to link it in your html code!
that css worked for me:
.input-group-addon {
min-width:80px;
text-align:left !important;
}