making form with buttons inline - html

Question

I have 2 buttons and a form with input type inside of it. I want all of them be inline , but I can't do that.
This is what I have:
.btn-registerLayout {
background-color: #425fab;
font-size: 10px;
outline: none;
text-align: left;
cursor: pointer;
height: 22px !important;
width: 50px !important;
padding: 0 !important;
margin: 0 !important;
}
.btn {
color: #fff !important;
}
/* Search Section*/
.header-search .header-search-box {
position: relative;
width: 100%;
}
.header-search-input {
width: 100%;
background: #f0f0f0;
font-size: 12px;
height: 20px;
transition: .2s;
color: darkgreen;
outline: none;
display: inline;
border: 1px solid red !important;
position: relative;
overflow: hidden;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-inline pl-5" style="float:left">
<div class="d-inline">
<form asp-action="Index" asp-controller="Products" class="form-inline" method="get">
<input type="search" class="header-search-input" name="SearchKey" placeholder="Search">
</form>
</div>
<button class="btn btn-registerLayout d-inline" style="width:28px !important">
<i class="ml-2 bi bi-person-plus-fill"></i>
</button>
<button class="btn btn-registerLayout d-inline">
<i class="ml-2 bi bi-box-arrow-in-right"></i><span style="padding-left:5px"> Login</span>
</button>
</div>
but I can not make form inline with buttons and result is like this:

Answer 1

Add d-inline-flex on the parent to get the elements inline, then you can use spacers or ml to space out the buttons from the input.
.btn-registerLayout {
background-color: #425fab;
font-size: 10px;
outline: none;
text-align: left;
cursor: pointer;
height: 22px !important;
width: 50px !important;
padding: 0 !important;
margin: 0 !important;
}
.btn {
color: #fff !important;
}
/* Search Section*/
.header-search .header-search-box {
position: relative;
width: 100%;
}
.header-search-input {
width: 100%;
background: #f0f0f0;
font-size: 12px;
height: 20px;
transition: .2s;
color: darkgreen;
outline: none;
display: inline;
border: 1px solid red !important;
position: relative;
overflow: hidden;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-inline-flex pl-5">
<div class="d-inline-block mx-auto">
<form asp-action="Index" asp-controller="Products" class="form-inline" method="get">
<input type="search" class="header-search-input" name="SearchKey" placeholder="Search">
</form>
</div>
<button class="btn btn-registerLayout d-inline ml-2" style="width:28px !important">
<i class="bi bi-person-plus-fill"></i>
</button>
<button class="btn btn-registerLayout d-inline ml-2">
<i class="bi bi-box-arrow-in-right"></i><span> Login</span>
</button>
</div>

Answer 2

.btn-registerLayout {
background-color: #425fab;
font-size: 10px;
cursor: pointer;
}
.btn {
color: #fff !important;
}
/* Search Section*/
.header-search .header-search-box {
position: relative;
width: 100%;
}
.header-search-input {
width: 100%;
background: #f0f0f0;
font-size: 12px;
height: 20px;
transition: .2s;
color: darkgreen;
outline: none;
display: inline;
border: 1px solid red !important;
position: relative;
overflow: hidden;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<div class="d-inline pl-5" style="float:left">
<div class="d-inline">
<form asp-action="Index" asp-controller="Products" class="form-inline" method="get">
<input type="search" class="header-search-input" name="SearchKey" placeholder="Search">
</form>
</div>
<div class="btn-wrap"><button class="btn btn-registerLayout d-inline">
<span>Login<i class="ml-2 bi bi-box-arrow-in-right"></i></span>
</button>
<button class="btn btn-registerLayout d-inline">
<i class="ml-1 bi bi-person-plus-fill"></i>
</button>
</div>
</div>
</div>
Always works a bit better grouping buttons like that in a wrapper of some sort.