Form 001 Horizontal

by Ivan Gerasimenko

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<br>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-2"></div>
        <div class="col-xs-12 col-sm-8">
            <form class="form-horizontal">
                <div class="form-group">
                    <label class="col-xs-12 col-sm-4 control-label">Label 1</label>
                    <div class="col-xs-12 col-sm-8">
                        <input type="text" class="form-control" id="firstName" placeholder="Type something..." />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-4 col-sm-4 control-label">Label 2</label>
                    <div class="col-xs-8 col-sm-8">
                        <input type="text" class="form-control" id="firstName" placeholder="Type something..." />
                    </div>
                </div>
                <div class="form-group small-size">
                    <label class="col-xs-4 col-sm-4 control-label">Label 3</label>
                    <div class="col-xs-8 col-sm-8">
                        <input type="text" class="form-control" id="firstName" placeholder="Type something..." />
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group col-xs-12">
                        <div class="input-group-addon tooltip-target tooltip-blue" data-toggle="tooltip" data-placement="top" data-original-title="User name"><i class="icon-user"></i>
                        </div>
                        <input type="text" class="form-control"...

CSS

@media(max-width:767px){
    .small-size.form-group .control-label {
        padding-top: 7px;
        font-size: 12px;
        text-align: right;
    }
    
    .small-size.form-group input[type="text"] {
        font-size: 12px;
        height:28px;
    }
}

.tooltip-blue + .tooltip > .tooltip-inner {background-color: #4679bd;}
.tooltip-blue + .tooltip > .tooltip-arrow {border-top-color: #4679bd;}

JavaScript

$('.tooltip-target').tooltip();