How to make Bootstrap readonly input field look like normal text?

you can try this

CSS

input[readonly]{
  background-color:transparent;
  border: 0;
  font-size: 1em;
}

if you want to use with a class you can try this one

HTML

<input type="text" class="form-control classname" value="Demo" readonly />

CSS

input[readonly].classname{
  background-color:transparent;
  border: 0;
  font-size: 1em;
}

if you want to make the <input> look like inline text (resizing the input element) please check this fiddle https://jsfiddle.net/Tanbi/xyL6fphm/ and please dont forget calling jquery js library

I realise the question is about Bootstrap 3, but it might be good to know that Bootstrap 4 now has this out of the box: https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text

<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
  <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>