col-Md-6 is not working on MVC

Question

I created a form using bootstrap.css on w3schools.com/bootstrap/tryit.Asp with the following code:

  <div class="container">
        <form role="form">
                    <fieldset>
                        <div class="row">
                                <div class="col-md-1 col-md-offset-1 no-padding-left">
                                <div class="form-group">
                                    <label>Código</label>
                                    <input type="text" name="email" id="email" value="" class="form-control" />
                                </div>
                            </div>
                            <div class="col-md-2 no-padding-left">
                                <div class="form-group">
                                    <label>CNPJ</label>
                                    <input type="text" name="email" id="email" value="" class="form-control" />
                                </div>
                            </div>
                            <div class="col-md-3 no-padding-left">
                                <div class="form-group">
                                    <label>Nome Comercial</label>
                                    <input type="text" name="phone" id="phone" value="" class="form-control" />
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-md-offset-1 no-padding-left">
                                <div class="form-group">
                                    <label>Razão Social</label>
                                    <input type="text" name="email" id="email" value="" class="form-control" />
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-5 col-md-offset-1 no-padding-left">
                                <div class="form-group">
                                    <label>Endereço</label>
                                    <input type="text" name="email" id="email" value="" class="form-control" />
                                </div>
                            </div>
                            <div class="col-md-1 no-padding-left">
                                <div class="form-group">
                                    <label>Numero</label>
                                    <input type="text" name="email" id="email" value="" class="form-control" />
                                </div>
                            </div>
                        </div>


                    </fieldset>
     </form>
 </div>

There it works correctly and the form stays as I imagined.

But then I copied this code exactly as it is(I still haven’t gotten to the part of merging with the codes @Html from RAZOR) and it does not render legal, but the SOCIAL REASON line, which should occupy the entire width of the FORM, does not happen independently if I put 6, 7, 8... or 12.

The form looks like this:

What’s keeping it from getting the right width?

Thank you

Answer 1

The classic ASP.NET MVC project sets up some improper things, like this one.

Open the file Content/Site.css and comment or remove the following:

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Or, delete the file. Just be sure to remove it from BundleConfig.cs.

Answer 2

Simple, the boostrap grid has classes for desktops and Mixed displays but the feature used to identify the media is width, its display is outside the standard sizes of a desktop so the grid selectors do not work.

Consulting the boostrap documentation on: https://getbootstrap.com/examples/grid/ you can read more about this kind of problem but to solve this bug just replace the col-md-#numero# for col-xs-#numero# see my example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-xs-offset-1 no-padding-left">
      <div class="form-group">
        <label>Razão Social</label>
        <input type="text" name="email" id="email" value="" class="form-control" />
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5 col-xs-offset-1 no-padding-left">
      <div class="form-group">
        <label>Endereço</label>
        <input type="text" name="email" id="email" value="" class="form-control" />
      </div>
    </div>
    <div class="col-xs-1 no-padding-left">
      <div class="form-group">
        <label>Numero</label>
        <input type="text" name="email" id="email" value="" class="form-control" />
      </div>
    </div>
  </div>
</div>