How to align a bootstrap input and button

On this page we quickly and simply cover how to align a bootstrap input and button on the same line with some styling. Always feel free to copy over any of the code snippets below and make them your own.

when copying over the css classes make sure to paste them within the <style> tags.

    .input-bar {
        display:table;
        width: 100%;
    }

    .input-bar-item {
        display:table-cell;
    }

    .input-bar-item > button {
        margin-left:5px;
    }

    .width100 {
        width:100%;
    }

    .bdy {width:100%;height:100%

    }

    .responsive2 {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;

    }

 

The snippet below contains the textbox input and button along with a few custom classes that I wrote which can be seen above. everything apart from the <h1> is placed within a <div>  with class bdy and responsive2. The next <div>  has a boostrap class container so make sure to use:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

The colour of the button can be changed, to see other colours go to :https://getbootstrap.com/docs/4.0/components/buttons/

<div id="bdy" class="bdy responsive2">
    <div class="container">
        <h1 style="text-align:center; margin-top:50px;">S E A R C H</h1>
        <div class="input-bar">
            <div class="input-bar-item width100">
                <form method="post" name="frmSearch" id="frmSearch">
                    <div class="form-group">
                        <input class="form-control" width100 type="text" name="txtSearch" id="txtSearch" placeholder="Enter full or partial city/town/postcode" />
                    </div>
                </form>
            </div>
            <div class="input-bar-item">
                <button class="btn btn-danger" onclick="btnSearchOnclick()">Search</button>
            </div>
        </div>
    </div>
</div>