Twitter Bootstrap Question posted in

Twitter bootstrap – Horizontal Fields

Looking at this example: http://angular-formly.com/#/example/bootstrap-specific/advanced-layout

What makes the fields display horizontally? Is it the row class on the field group? Or at the col-xs-6 classes on the individual fields (when looking just at the First/Last name fields)?

I am asking because at my work we are unable to use the twitter bootstrap (arg!) and I am having trouble making fields get on the same lines like this example when not using the bootstrap.

Do you have to use the bootstrap classes in order to get fields on the same row?

Tags:

3

Answers


  1. 0

    CSS. They are wrapped in a div with the col-xs-6 class applied. That class is floated left and has a width of 50%.

    .col-xs-6 {
   width:50%;
   float:left;
}

    https://jsfiddle.net/6njkou1g/

    Login or Signup to reply.
  2. 0

    Use col-xs-6 for two columns.

      <form class="form">
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
            </div>
        </div>
    </form>

    http://jsfiddle.net/rwfje779/

    Login or Signup to reply.
  3. 0

    Depending on the browser support you need, you might consider this example which doesn’t require bootstrap at all and instead uses flexbox to do layout. Otherwise, what Brian said about implementing a subset of bootstrap’s grid system yourself wouldn’t be too tricky…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search