How to place two input next to each other in bootstrap 4 - html

Question

I want to place the text input and the button next to each other, with about 10px margin between them.
Whit this code, i get the result what you can see on the uploaded photo.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="float-left">
<input type="number" class="form-control item_page_item_db w-50" id="quantity<?php echo intval($kat['termek_id']); ?>" value="1">
</div>
<div class="float-left">
<button class="btn btn-outline-secondary add_to_cart_button" data-product-id="<?php echo intval($kat['termek_id']); ?>" type="button"><i class="fa fa-shopping-basket" aria-hidden="true"></i> Kosárba helyezem
</button>
</div>
<div class="clearfix"></div>
</div>
I want them closer to each other, and vertically centered the right way. Now, they dont have any css for size, only just colors and font size...

Answer 1

The bootstrap way: Use col classes to create a width (Shown below)
.row {
background: #f8f9fa;
margin-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-2">
<input type="number" class="form-control" value="1">
</div>
<div class="col-sm-10">
<button class="btn btn-outline-secondary" type="button">
<i class="fa fa-shopping-basket"></i>
Kosárba helyezem
</button>
</div>
</div>
</div>
Pure CSS way:
.cont {
display: flex;
}
input {
width: 100px !important; /**use specific width**/
margin-right: 10px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont">
<input type="number" class="form-control" value="1">
<button class="btn btn-outline-secondary" type="button">
<i class="fa fa-shopping-basket"></i>
Kosárba helyezem
</button>
</div>

Answer 2

See the below structure and css. Hope it helps.
.col-sm-6 input[type="number"]{width:100%}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<input type="number" class="form-control item_page_item_db" id="quantity<?php echo intval($kat['termek_id']); ?>" value="1">
</div>
<div class="col-sm-6">
<button class="btn btn-outline-secondary add_to_cart_button" data-product-id="<?php echo intval($kat['termek_id']); ?>" type="button"><i class="fa fa-shopping-basket" aria-hidden="true"></i> Kosárba helyezem
</button>
</div>
<div class="clearfix"></div>
</div>
</div>

Answer 3

You can use col-md-6 class instead of float-left or right.