18

Good morning, I am trying to set up a inline form with inputs of different widths using Bootstrap 4. I have tried the different options available here: http://v4-alpha.getbootstrap.com/components/forms/.

This is as far as I went:

<div class="container">
    <div class="row">
        <div class="col-xs-1">
            <label for="exampleInputName2" class="col-form-label">Name</label>
        </div>
        <div class="col-xs-2">
            <input type="text" class="form-control" placeholder=".col-xs-2">
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder=".col-xs-3">
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" placeholder=".col-xs-4">
        </div>
    </div>
</div> 

But I am not using any form classes or tags.

---------------- EDIT ------------------------

To be more specific, how would you specify the widths of labels and inputs in this example coming from the Bootstrap 4 website?

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-primary">Send invitation</button>
</form>

Any good and simple example would be welcome.

Thanks

Sylvain

3
  • What is the question? Your example has "inline form with inputs of different widths"... codeply.com/go/yYFKb5XkVT
    – Zim
    Aug 19, 2016 at 11:07
  • @ZimSystem It could effectivelly work but it's not. For example, the 2 inputs col-xs-3 and col-xs-4 have exactly the same width, so I am missing something. So I am just looking for best practice advice using the form-inline tag.
    – Sylvain C.
    Aug 21, 2016 at 22:31
  • col-xs-3 and col-xs-4 appear different width for me.. the col-xs-4 being wider
    – Zim
    Aug 22, 2016 at 11:41

5 Answers 5

23

you could also use the Bootstrap 4 width utilities : (.w-25, .w-50, .w-75, .w-100, .mw-100)

<input type="some_type" class="form-control w-25">
8

See the example below, if you want to use bootstrap v4 grid widths along with the form-inline

<form class="form-inline">
  <div class="form-group row">
    <div class="col-md-5">
      <p class="form-control-static">email@example.com</p>
    </div>
    <div class="col-md-5">
      <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
    </div>
    <div class="col-md-2">
      <button type="submit" class="btn btn-primary">Confirm identity</button>
    </div>
  </div>
</form>

Check the fiddle for more details: https://jsfiddle.net/dx0dzaqj/1/

5

To make the input takes all the available remaining width, set the input as

display:flex;
flex-grow:1 
2

Delete xs from col-* class, for example change col-xs-2 into col-2. col-xs-* is for Bootstrap 3 and not BS 4.

0
1

Here's a simple example. Wrap it in a form element and you can add different inputs. Better to keep the col-xs- classes uniform so that they line up correctly

Make sure you have added the bootstrap css and js to your site.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<div class="container">
  <form>
    <div class="form-group row">
      <label for="name1" class="col-sm-2 col-form-label">Name</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="name1" placeholder=".col-sm-10">
      </div>
    </div>
    <div class="form-group row">
      <label for="name2" class="col-sm-2 col-form-label">Other Name</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="name2" placeholder=".col-sm-10">
      </div>
    </div>
    <div class="form-group row">
      <label for="name3" class="col-sm-2 col-form-label">Third Name</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="name3" placeholder=".col-sm-10">
      </div>
    </div>
    <div class="form-group row">
      <div class="offset-sm-2 col-sm-10">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
</div>

1
  • 2
    this form is not inline Mar 21, 2018 at 5:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.