Currently, I am working on developing an app using Bootstrap 4. In my layout, I have 3 buttons and an inline form. However, the form is displaying below the buttons instead of being in the same line. Can anyone provide guidance on how I can ensure that all elements are on the same line?
<button type="button" class="mb-2 mr-2 btn btn-primary">
<span>Add</span>
</button>
<div class="d-inline dropdown">
<button aria-haspopup="true" aria-expanded="false" id="menuUtilities" type="button" class="mr-2 mb-2 dropdown-toggle btn btn-primary">Utilities</button>
</div>
<div class="d-inline dropdown">
<button aria-haspopup="true" aria-expanded="false" id="menuReports" type="button" class="mb-2 dropdown-toggle btn btn-primary">Reports</button>
</div>
<form class="mb-2 form-inline">
<!-- inline form to align with buttons -->
</form>