CODEWITHSUNDEEP
htmltwitter-bootstrap
Votemike
Votemike

Reputation: 882

Bootstrap Responsive Inline Form

I have a Bootstrap inline-form that is 6 inputs then a button. It looks fine if it all fits on the screen, but as you make the screen smaller, the inputs fold underneath one at a time. I have tried wrapping each input in a col-md-2, but that makes the form look weird. I'm not sure if I'm doing something wrong.
Is there some way I can group the inputs together so that they collapse something like 6x1, 3x2, 2x3, 1x6? 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form class="form-inline">
    <div class="form-group">
      <input name="input1" placeholder="input1" class="form-control" required>
    </div>

    <div class="form-group">
      <input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
    </div>
    <div class="form-group">
      <label for="input3">Input 3
        <input name="input3" type="checkbox" id="input3">
      </label>
    </div>
    <div class="form-group">
      <input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
    </div>
    <div class="form-group" *ngIf="!property.input3">
      <input name="input5" type="number" placeholder="input5" class="form-control" required>
    </div>

    <div class="form-group">
      <input name="input6" type="number" placeholder="input6" class="form-control" step="any">
    </div>

    <button class="btn btn-default">Add</button>
  </form>
</div>

If running the code, you will have to resize the window.
I have also set up a fiddle for the inline-form

Thanks

Upvotes: 4

Views: 12824

Answers (2)

Eric G
Eric G

Reputation: 2617

Bootstraps grid system is great but it isn't perfect for everything under the sun. If things aren't looking exactly the way you want them to you can always write overwriting css. That being said, using their grid system I was able to come up with an example that fulfills your request above. Let me know if this is more what you were thinking:

<div class="container">
  <form class="form-inline">
    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <input name="input1" placeholder="input1" class="form-control" required>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
    </div>
    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-1 input3">
      <label for="input3">Input 3
      </label>
      <input name="input3" type="checkbox" id="input3">
    </div>
    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
    </div>
    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2" *ngIf="!property.input3">
      <input name="input5" type="number" placeholder="input5" class="form-control" required>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
      <input name="input6" type="number" placeholder="input6" class="form-control" step="any">
    </div>
    <div class="col-xs-12 col-lg-1">
      <button class="btn btn-default">Add</button>
    </div>
  </form>
</div>

And here is a codepen link to the code: http://codepen.io/egerrard/pen/KaNxvW

Upvotes: 5

mfar17
mfar17

Reputation: 1

You can wrap those inputs with div and display:inline-block style to make them stay together.

Upvotes: 0

Related Questions