Bad Computer Bad Computer - 3 years ago 224
HTML Question

Bootstrap 3 inline input elements with label

I am trying to achieve an inline form in a very small column something like this:

Inline form in 6 col size

I have written some code which hopefully works in chrome in col-lg-x , but any other size than that , then my form collapses and goes to a new row of column.

Here is my code:



<div class="container">
<div class="row">
<div class="col-md-6 col-lg-6">
<div class="form-group">
<div class="form-inline">
<label style="
font-size: 12px;
max-wdith: 20% !important;
width: 15%;
padding-left: 5px;
/* padding-right: 5px; */
">From</label>
<input class="form-control" placeholder="Email" type="text" style="
padding: 0;
border-radius: 2px !important;
font-size: 13px;
height: 25px;
color: grey;
/* margin-top: 3px; */
width: 35%;
"> &nbsp;
<label style="
font-size: 12px;
max-wdith: 20% !important;
width: 10%;
/* padding-left: 5px; */
/* float: left; */
text-align: right;
">to</label>
<input class="form-control" placeholder="Password" type="password" style="
padding: 0;
border-radius: 2px !important;
font-size: 13px;
height: 25px;
color: grey;
/* margin-top: 3px; */
width: 31%;
">
</div>
</div>
</div>
</div>
</div>





why is this happening? is there any way to fix this?

Note: Here by resizing i mean , to resize the browser to check for different screen sizes.

Answer Source

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-6">
            <div class="form-group">
                <div class="form-inline">
    <style>
      
      .myfield{
          border: 1px solid #ccc!important;
          border-radius: 4px!important;
          font-size: 13px;
          height: 25px;
          color: grey;
          max-width: 100px !Important;
          width: 31%;
          padding: 2px 10px;
          box-shadow: inset 0px 0px 11px -5px #000;
      }
      input:focus{
          outline: initial;
          box-shadow: inset 0px 0px 11px -5px red;
      }
      label{
          font-size: 12px;
          max-width: 20px !important;
          width: 15%;
          padding-left: 5px;
      }

      @media screen and (min-width: 400px) {
         #Add here your code for different type of screen resolution
         .myfield{
             #My custom code here
             max-width: 80px !Important;
             width: 10%;
         }
      }
    </style>
                    <label>From</label>
                    <input class="form-control myfield" placeholder="Email" type="text" > &nbsp;
                    <label>to</label>
                    <input class="form-control myfield" placeholder="Password" type="password"  >
                </div>
            </div>
        </div>
    </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download