put component on side of search field - html

Question

I am developing a web application and would like my EntreCadastre-se|Carrinho menu to be next to the text field, but it is getting underneath
<div class="row">
<div class="col-6 col-md-4 col-xs-4">
<img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal">
</div>
<div class="col-6 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-6 col-md-4">
<ul class="menu_2">
<div class="btn-group" role="group">
<div class="btn-group" role="group">
Entre/Cadastre-se <span class="caret"></span>
</div>
<button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
</div>
</ul>
</div>
</div>

Answer 1

What you are doing wrong here is your math. Like #efkin said you have only 12 columns. But you have defined three divs with col-6. That means 3*6 = 18.
When you want 3 columns with equal size on one row you have to use col-4 for each, because 3*4 = 12.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4 col-md-4 col-xs-4">
<img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal" >
</div>
<div class="col-4 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-4 col-md-4">
<ul class="menu_2">
<div class="btn-group" role="group">
<div class="btn-group" role="group">
Entre/Cadastre-se <span class="caret"></span>
</div>
<button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
</div>
</ul>
</div>
</div>