CODEWITHSUNDEEP
csstwitter-bootstrap
RockBoro
RockBoro

Reputation: 2473

why does input element render differently in bootstrap col-auto column than span element?

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">
  <div class="row">

    <div class="form-group col-auto">
      <label>LOC - SPAN</label>
      <span class="form-control input-readonly-like">MM68A0</span>
    </div>

  <div class="form-group col-auto">
    <label>LOC - INPUT</label>
    <input type="text" class="form-control" readonly value="MM68A0">
  </div>

  </div>
</div>

Upvotes: 1

Views: 218

Answers (1)

davidkonrad
davidkonrad

Reputation: 85518

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">
  <label>LOC - SPAN</label>
  <span class="form-control input-readonly-like">MM68A0</span>
</div>

<div class="form-group col">
  <label>LOC - INPUT</label>
  <input type="text" class="form-control" readonly value="MM68A0">
</div>

enter image description here

Upvotes: 1

Related Questions