Twitter Bootstrap Question posted in

HTML&CSS + Twitter Bootstrap: any form element to left and button to right (row section)

We need position Phone, Name, and Firstname to left and button to right. I try with float-left and float-right, is it OK for the first row but after is it more complexe.
For the second row, I try use a row+col-1.. but Phone, Name, and Firstname not grouped with the input

  +--------------------------------------------------------------------------------+
  |  Title                                                              | button | |
  +------------+-------------------------------------------------------------------+
  |  Phone | input |    Name | input |    Firstname | input |           | button | |
  +------------+-------------------------------------------------------------------+
  |  Content table                                                                 |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  +--------------------------------------------------------------------------------+
Tags:

2

Answers


  1. 0

    Did you try flexbox?

    Example with Bootstrap auto margins:

    <nav class="navbar">
  <form class="form-inline w-100 d-flex">
    <div class="form-group mr-4">
      <label for="field-1"class="mr-2">Field #1</label>
      <input class="form-control" id="field-1">
    </div>

    <div class="form-group mr-4">
      <label for="field-1"class="mr-2">Field #2</label>
      <input class="form-control" id="field-2">
    </div>

    <button class="btn btn-success ml-auto">Button</button>
  </form>
</nav>

    live example on https://jsfiddle.net/cichy380/5svek2xn/

    Login or Signup to reply.
  2. 0

    Use the Bootstrap’s ‘from-inline’ with spacing utilities for Phone, Name and First name. For button use the ‘ml-auto’ for right align without using the ‘float-left’ or ‘float-right’.

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

Back To Top
Search