Div's using d-inline appear on two rows
I'm trying to display two, or three, div's on one line but they always appear on two. Here is my jsfiddle and the code is below. The two blocks of code are the same except the second uses two div's since I thought that might make a difference, but it doesn't. How do I make all of this on one line in Bootstrap4 using row/col?
<div class="row justify-content-center">
<div class="col-3 d-inline-block">Title</div>
<form>
<div class="col-2 d-inline-block">Search
<input type="text" name="search">
</div>
</form>
</div>
<div class="row justify-content-center">
<div class="col-3 d-inline-block">Title</div>
<form>
<div class="col-2 d-inline-block">Search</div>
<div class="col d-inline-block"><input type="text" name="search"></div>
</form>
</div>
Bootstrap rows (.row) and columns (.col-*) are built with flex box. The columns have to be the direct children of the rows in order for them to take effects. The fact that you have a <form /> that wraps the search label and input breaks that.
If you want to make an inline form, there is a class .form-inline for that purpose: https://getbootstrap.com/docs/4.5/components/forms/#inline-forms
You can try the following layout for an inline form:
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-3">Title</div>
<form class="form-inline">
<label for="search" class="mr-2">Search</label>
<input id="search" type="text" name="search" class="form-control" />
</form>
</div>
</div>
.align-items-center: make items in the row vertically centered, optional.form-inline: make the form inline, required.mr-2: put right margin on the search label so that there is a gap between the form and itself, optional
