Twitter Bootstrap Question posted in

Aligning a button outside html form with the form-Twitter bootstrap

I am trying to align the button which is present outside the form in the same line of the form. The form and both buttons should be responsive and properly aligned on reducing the screen size. I am sharing snippet. Please provide some suggestions.

<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"/>
<body>
     <form class="form-inline">
          <div class="form-group">
              <select id="cato"  class="form-control" >
                <option disabled selected="true">-Select Category-</option>
                <option>Good</option>
                <option>Bad</option>
              </select>
            </div>      
            <div class="form-group">
               <select id="subo" class="form-control">
                <option disabled selected="true">-Select Subcategory-</option>
                <option>Good</option>
                <option>Bad</option>   
                </select>
            </div>  
              <button type="submit" onclick="resettable()" class="btn btn-primary"><i class="fa fa-arrow-circle-o-up" aria-hidden="true" ></i> Reset</button>    
        </form>
            
    <button type="submit" class="btn btn-primary m-2" data-toggle="modal" data-target="#modaledit"><i class="fa fa-plus" aria-hidden="true" ></i> Add Product</button>  
    </body>
Tags:

4

Answers


  1. 0

    Try to add some margin in all elements inside the form like the following

    div.form-inline * {
  margin: 2px;
}
    <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />

<body>
  <div class="form-inline">
    <form class="form-inline">
      <div class="form-group">
        <select id="cato" class="form-control">
          <option disabled selected="true">-Select Category-</option>
          <option>Good</option>
          <option>Bad</option>
        </select>
      </div>
      <div class="form-group">
        <select id="subo" class="form-control">
          <option disabled selected="true">-Select Subcategory-</option>
          <option>Good</option>
          <option>Bad</option>
        </select>
      </div>
      <button type="submit" onclick="resettable()" class="btn btn-primary mt-1"><i class="fa fa-arrow-circle-o-up" aria-hidden="true" ></i> Reset</button>
    </form>

    <button type="submit" class="btn btn-primary mt-1" data-toggle="modal" data-target="#modaledit"><i class="fa fa-plus" aria-hidden="true" ></i> Add Product</button>
  </div>
    Login or Signup to reply.
  2. 0

    Since you are trying to keep them together, you can consider them "sibling" elements. So you can put them both in a div and style that div to get your desired sizing.

    Also, I just changed the m-2 class on your submit button to mx-0 my-2 to basically give it no margin on x-axis, and the same margin as before on y-axis.

    Edit: Updated to fix vertical misalignment on small screen sizes

    <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />

<body>
  <div class="container">
    <form class="form-inline">
      <div class="form-group m-0">
        <select id="cato" class="form-control">
          <option disabled selected="true">-Select Category-</option>
          <option>Good</option>
          <option>Bad</option>
        </select>
      </div>
      <div class="form-group m-0">
        <select id="subo" class="form-control">
          <option disabled selected="true">-Select Subcategory-</option>
          <option>Good</option>
          <option>Bad</option>
        </select>
      </div>
      <button type="submit" onclick="resettable()" class="btn btn-primary m-0"><i class="fa fa-arrow-circle-o-up" aria-hidden="true" ></i> Reset</button>
    </form>

    <button type="submit" class="btn btn-primary mx-0 my-2" data-toggle="modal" data-target="#modaledit"><i class="fa fa-plus" aria-hidden="true" ></i> Add Product</button>
  </div>
</body>

    However, there’s some noticeable issues with your form here:

    1. Your "reset" button is set to type submit, meaning this would submit the form unless you are capturing it and preventing propagation.
    2. Your real submit button is outside the form. I’m not sure if that works, and it doesn’t seem like good practice even if it does. If all you want is to space out your submit button differently, consider adding <br> tags or using bootstrap classes.
    Login or Signup to reply.
  3. 0

    add d-inline-flex to the form:

    <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<div>
  <form class="form-inline d-inline-flex mt-2 ml-2 align-items-start">
    <div class="form-groups">
      <select id="cato" class="form-control">
        <option disabled selected="true">-Select Category-</option>
        <option>Good</option>
        <option>Bad</option>
      </select>
    </div>
    <div class="form-group">
      <select id="subo" class="form-control">
        <option disabled selected="true">-Select Subcategory-</option>
        <option>Good</option>
        <option>Bad</option>
      </select>
    </div>
    <button type="submit" onclick="resettable()" class="btn btn-primary"><i class="fa fa-arrow-circle-o-up" aria-hidden="true" ></i> Reset</button>
  </form>

  <button type="submit" class="btn btn-primary align-top m-2" data-toggle="modal" data-target="#modaledit"><i class="fa fa-plus" aria-hidden="true" ></i> Add Product</button>
</div>
    Login or Signup to reply.
  4. 0

    You can add parent to your form. Add display:inline-block and width:fit-content and the outside button will be aligned with form

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

Back To Top
Search