CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcharacter
Marco Ronchi
Marco Ronchi

Reputation: 11

Insert character between div bootstrap

I've a simple row where there's a label and two input type number

<form class="form-horizontal">
  <br>
  <div class="container">
    <label class="col-sm-2 control-label">Numero documento:</label>
    <div class="col-sm-3">
      <input type="number" id="firstDocumentNumber" class="form-control">
    </div>
    <div class="col-sm-1">
      <input type="number" id="secondDocumentNumber" class="form-control">
    </div>
  </div>
</form>

I need to insert a slash ( / ) between the two input type like this

enter image description here

Can anyone help me, please? Here there's the code I use Bootply

Thanks in advance

Upvotes: 1

Views: 1187

Answers (2)

Pierre de LESPINAY
Pierre de LESPINAY

Reputation: 46158

Simplest way I found is with CSS (tried with Bootstrap 4):

<div class="col-sm-1" id="secondDocumentNumberCont">
  <input type="number" id="secondDocumentNumber" class="form-control">
</div>

#secondDocumentNumberCont:before {
    content: '/';
    position: absolute;
    margin-left: -8px;
    line-height: 2.3em;
}

margin-left & line-height might require some tuning.

Upvotes: 1

ScaisEdge
ScaisEdge

Reputation: 133360

You shuold use a span and format with size and align how you prefer..

<div class="site-index">
        <div class="body-content">
    <form class="form-horizontal">
      <br>
      <div class="container">
        <label class="col-sm-2 control-label">Numero documento:</label>
        <div class="col-sm-3">
          <input type="number" id="firstDocumentNumber" class="form-control">
        </div>
           <span class="col-sm-1 text-right" > / </span>
        <div class="col-sm-1">
          <input type="number" id="secondDocumentNumber" class="form-control">
        </div>
      </div>
    </form>

or use an add-on

<div class="input-group">
   <span class="input-group-addon" id="basic-addon1">/</span>
   <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

Upvotes: 0

Related Questions