CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-2
cda01
cda01

Reputation: 1278

Bootstrap 2.3.2 - Right-align a Button with an Input inside of a form-horizontal

I'm having trouble styling the following form using Twitter Bootstrap 2.3.2

I can't seem to right-align the button with the other labels. Also, I can't get the last textbox to be in line with the button.

This is the form I have so far: JSFiddle example

<form class="form-horizontal">

<div class="control-group">
    <label class="control-label" for="inputFirstname">First name</label>
    <div class="controls">
        <input type="text" id="inputFirstname" placeholder="First name">
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="inputSurname">Surname</label>
    <div class="controls">
        <input type="text" id="inputSurname" placeholder="Surname">
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
        <input type="text" id="inputEmail" placeholder="Email">
    </div>
</div>

<div class="control-group">
    <button class="btn btn-primary">Browse</button>
    <div class="controls">
        <input type="text" id="inputSomeText" placeholder="Some text">
    </div>
</div>

enter image description here

This is the end result which I trying to achieve:enter image description here

Any help is greatly appreciated!!

Upvotes: 0

Views: 1586

Answers (2)

Dan
Dan

Reputation: 9468

Change your last control-group and also add margin-top:-5px; to the button (shown below via class label-btn):

HTML for last control-group:

<div class="control-group">
    <label class="control-label"><button class="btn btn-primary inline label-btn">Browse</button></label>
    <div class="controls">
        <input type="text" id="inputSomeText" placeholder="Some text">
    </div>
</div>

CSS

.label-btn {
    margin-top: -5px;
}

Updated fiddle

Upvotes: 1

Dhaval Panchal
Dhaval Panchal

Reputation: 648

Change last control-group to this

    <div class="control-group">
        <label class="control-label">
            <button class="btn btn-primary inline">Browse</button>
        </label>
        <div class="controls">
            <input type="text" id="inputSomeText" placeholder="Some text">
        </div>
    </div>

Upvotes: 0

Related Questions