Align buttons next to input field - Twitter Bootstrap CSS

michaelmcgurk
July 11, 2016
109 views
0 votes
2 Answers

You can see in my Demo that the buttons aren’t aligned correctly 🙁

Is it possible to:

1) have a space between the input field and the buttons &

2) have the buttons vertically aligned correctly?

Demo: https://jsfiddle.net/xg69pkt0/

Code:

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-sm-6">
		<div class="panel panel-default">
			<div class="panel-body form-horizontal payment-form">
				<div class="form-group">
					<label for="concept" class="col-sm-4 control-label">Postcode</label>
					<div class="col-sm-8">
						<div class="input-group">
							<input type="text" class="form-control" id="concept" name="concept">
							<div class="input-group-btn">
								<button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue"  align="top" type="submit" style="margin-bottom:10px">Find Address</button>
								<button class="btn btn-default blue-bt pull-left" name="Continue" id="Continue"  align="top" type="submit">Change</button>
							</div>
						</div>
					</div>
				</div>

Answers

https://jsfiddle.net/a3xnqy33/

<div class="col-sm-6">
    <div class="panel panel-default">
        <div class="panel-body form-horizontal payment-form">
            <div class="form-group">
                <label for="concept" class="col-sm-4 control-label">Postcode</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input type="text" class="form-control" id="concept" name="concept">
                        <div class="input-group-btn inup-group-addon">
                            <button class="btn btn-default">Find Address</button>
                            <button class="btn btn-default" name="Continue" id="Continue"  align="top" type="submit">Change</button>
                        </div>
                    </div>
                </div>
            </div>

please see the modified fiddle

Hey You can check the following also. In your code you have not closed your divs properly.

<div class="col-sm-6">
    <div class="panel panel-default">
        <div class="panel-body form-horizontal payment-form">
            <div class="form-group">
                <label for="concept" class="col-sm-3 control-label">Postcode</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="concept" name="concept">
                </div>
                <div class="col-sm-4">
                    <div class="input-group-btn">
                        <button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Find Address</button>
                        <button class="btn btn-default blue-bt" name="Continue" id="Continue" type="submit">Change</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Align buttons next to input field – Twitter Bootstrap CSS

Answers