CODEWITHSUNDEEP
htmlcssbootstrap-4
jignatius
jignatius

Reputation: 6484

How to add text in front of input field

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:

enter image description here

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:

enter image description here

How would I do that?

Upvotes: 2

Views: 3861

Answers (4)

FluffyKitten
FluffyKitten

Reputation: 14312

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>

Upvotes: 1

Umesh
Umesh

Reputation: 529

Add grids inside row for label & input

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <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">
      <div class="col-md-12">   <label>Sensor URI:</label></div>
          <div class="col-sm-2 col-xs-2">     http://  </div> <div class="col-sm-10 col-xs-10"><input value="" type="text" id="sensor_uri" min="15" max="1440" class="form-control" required/> </div>
    </div>
</div>

Upvotes: 1

oreopot
oreopot

Reputation: 3450

Try the following code: I will give you a good idea and it's something you are trying to achieve.


<div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">http://</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>

Upvotes: 0

Mark B
Mark B

Reputation: 423

How about flexbox?

<div class='container'>
<div>
    <label>Sensor URI:</label>
</div>
<div>
    <span>http://</span>
    <input value="" type="text" id="sensor_uri" min="15" max="1440" class="form-control" required />
</div>

the css:

.container {
display: flex;
flex-direction: row;
}

Upvotes: 0

Related Questions