Title: why does input element render differently in bootstrap col-auto column than span element?
Tags: css;twitter-bootstrap
Question: why does the input element render differently in a bootstrap col-auto column than a span element?  An input element with class form-control renders wider in the col-auto column than a span element with the same styling.
I want to render, using bootstrap, a span element the same as a readonly input element.
span.input-readonly-like {
background-color: #e9ecef;
padding:6px 12px;
display:block;
border-radius:.25rem;
border:1px solid #ced4da;
width:100%;
line-height: 1.5;
<div class="container mt-3"&gt;
<div class="row"&gt;
<div class="form-group col-auto"&gt;
<label&gt;LOC - SPAN</label&gt;
<span class="form-control input-readonly-like"&gt;MM68A0</span&gt;
</div&gt;
<div class="form-group col-auto"&gt;
<label&gt;LOC - INPUT</label&gt;
<input type="text" class="form-control" readonly value="MM68A0"&gt;
</div&gt;
</div&gt;
</div&gt;

Here is the accepted answer: What you see is the expected behavior. From the docs:
Use col-{breakpoint}-auto classes to size columns based on the natural
width of their content.
So any particular demand for .col-auto? Use .col and you will achieve what you want: Two equally sized .form-group's. They will fit the parent .row containers entire width:
<div class="form-group col"&gt;
<label&gt;LOC - SPAN</label&gt;
<span class="form-control input-readonly-like"&gt;MM68A0</span&gt;
</div&gt;
<div class="form-group col"&gt;
<label&gt;LOC - INPUT</label&gt;
<input type="text" class="form-control" readonly value="MM68A0"&gt;
</div&gt;


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:04/23/20', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css><twitter-bootstrap>', 'Title': 'why does input element render differently in bootstrap col-auto column than span element?', 'ViewCount': 126, 'id': 61395110, 'user_AboutMe': '', 'user_AccountId': 413004.0, 'user_DisplayName': 'RockBoro', 'user_Reputation': 1978.0, 'user_Views': 149.0, 'user_id': 5484737.0}}