How to add text in front of input field

Issue

I'm having trouble trying to add text to the left of an input field and below a label.

I'm using Bootstrap 4.3.1. My html looks like this:

<div class="col-lg-6 col-md-6 col-sm-6">
<!-- some markup in here -->
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
    <div class="row">
        <label>Sensor URI:</label>
            http://<input value="" type="text" id="sensor_uri" min="15" max="1440" class="form-control" required/>
    </div>
</div>

It looks something like this:

I've tried various things like enclosing "http://" in different element (<p>, div>, etc) without any success. Ideally I want "http://" in front of the input field like this so that the user can't edit it:

How would I do that?

Solution

You need to do 2 things -

1. use the form-control-inline class on the input so it will appear in line with the "http://" text
2. wrap the input and text in a block element such as a <div> to make it appear on its own line underneath the label.

• Note - you have an extra row div without any cols - this is not valid so I removed it below.

See a working snippet here:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-lg-6 col-md-6 col-sm-6">
  <!-- some markup in here -->
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
  <label>Sensor URI:</label>
  <div class="inputwrapper">http:// <input value=" " type="text " id="sensor_uri " min="15 " max="1440 " class="form-control-inline" required/>
    </div>
</div>

Answered By - FluffyKitten