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>
4
Answers
Try to add some margin in all elements inside the form like the following
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 tomx-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
However, there’s some noticeable issues with your form here:
submit
, meaning this would submit the form unless you are capturing it and preventing propagation.<br>
tags or using bootstrap classes.add
d-inline-flex
to the form:You can add parent to your form. Add
display:inline-block
andwidth:fit-content
and the outside button will be aligned with form