Bootstrap - How to increase the size of the input column?

Question

Follows the code:

On the index page:

<!-- Modal -->
<div class="modal" id="minhaModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div id="conteudoModal"></div>
      </div>
    </div>
  </div>
</div>

On _Partialview:

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title">Criar</h4>
</div>

<div class="modal-body">
  <div class="form-horizontal">
    <div class="form-group">
      <div class="col-xs-12">
        <div class="input-group">
          <input type="text" class="form-control col-xs-12" placeholder="Username">
          <span class="input-group-addon btn btn-default">?</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-footer">
  <input type="submit" class="btn btn-success" value="Criar" />
  <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
</div>

I can change the size from: col-Xs-1 to 4. I can’t change to col-Xs-12.

Follow the image:

In the image above, where there is a red line, the input should understand the whole red line.

I followed the example of this site: http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp

I’ve tried changing the column size by width and nothing works.

Some solution ?

Answer 1

If you started the project on Asp.Net MVC5, the visual studio creates a file called Site css.. It gets in ~/Content/Site.css

In this file, it has the following line:

input,
select,
textarea {
    max-width: 280px;
}

This css is saying that the elements input, select and textarea will have a maximum size of 200px.

Change this size, comment/remove this part or change the css manually. Any of these options will solve your problem.