how can i make this type of layout in bootstrap studio

Question

I am trying to center a text with borders and a button in one row (like image of layout that I am trying to make and failing again and again. I have tried with 2 column layout, one row, and two-column layout, simple div, container...etc. can anyone help me to center these two things in one line.

Answer 1

This will do the work for you:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-xs-9 col-lg-9 col-md-9 col-xl-9">
    <input type="text" class="form-control" placeholder="Text">
        </div>
        <div class="col-xs-3 col-lg-3 col-md-3 col-xl-3">
            <button class="btn" value="SEARCH">SEARCH</button>
        </div>
    </div>
</div>