Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap inline input and button

how create this login form on bootstrap 3.0

http://joxi.ru/zcBBUtg5CbB8ELTo5CA

My code:

<form role="form" class="form-inline">
    <input type="email" class="form-control input-sm" placeholder="Адрес электронной почты">
    <div class="form-group">
        <input type="password" class="form-control input-sm" placeholder="Пароль">
        <button class="btn btn-primary btn-sm">Войти</button>
     </div>

</form>

http://jsfiddle.net/mborodov/Ls684/

But, i need padding between inputs and inline password input and submit button.

like image 901
Maksim Borodov Avatar asked Sep 24 '13 16:09

Maksim Borodov


1 Answers

Try with this jsFiddle : http://jsfiddle.net/Ls684/2/

<form role="form" class="padding-15 black round-5 form-inline">
    <input type="email" class="form-control input-sm" placeholder="Адрес электронной почты">
    <div class="form-group">
            <input type="password" class="form-control input-sm" placeholder="Пароль">
            <button class="btn btn-primary btn-sm">Войти</button>
     </div>
</form>

CSS

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

.form-control[type="email"]{
    width : 100%;
    margin-bottom: 10px;
}

.form-control[type="password"]{
    width : 60%;
    float : left;
}

button{
    width : 30%;
    float : left;
    margin-left: 10%;
}
like image 98
Donovan Charpin Avatar answered Oct 06 '22 01:10

Donovan Charpin