I am creating a form and when I am adding a select box the layout is not working as expected. The select box item is getting issues. I have created JSFiddle here
I am placing my elements in form-group with each having 50% of width.
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="tipoDeuda">Tipo de Deuda</label>
<div class="col-sm-8">
<select class="form-control" id="tipoDeuda">
</select>
</div>
</div>
It seems to work fine when I added select.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<form class="form-horizontal" id="consultaCarteraForm">
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="empleador">Empleador</label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" id="empleador" placeholder="">
<i id="searchEmpleador" class="fa fa-search search-form-cartera-icon" aria-hidden="true"></i>
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="estudioAbogados">Estudio o Tercero</label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" id="estudioAbogados" placeholder="">
<i id="searchEstudioAbogados" class="fa fa-search search-form-cartera-icon" aria-hidden="true"></i>
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="tipoDeuda">Tipo de Deuda</label>
<div class="col-sm-8">
<select class="form-control" id="tipoDeuda">
<option>select</option>
<option>select1</option>
<option>select2</option>
</select>
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label
input-sm col-sm-4" for="devenguePorCobrar">Rango Devengue Por Cobrar</label>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="devenguePorCobrar">
</div>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="devenguePorCobrar1">
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="devenguePorCobrar">Rango Monto Deuda Real</label>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="rangoMontoRealMin">
</div>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="rangoMontoRealMax">
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="devenguePorCobrar">Rango Monto Deuda Presunta</label>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="rangoMontoPresMin">
</div>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="rangoMontoPresMax">
</div>
</div>
<!-- Button -->
<div class="col-sm-12 controls">
<button id="btnBuscar" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-search"></span> BUSCAR </button>
<button id="btnLimpiar" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-search"></span> LIMPIAR </button>
</div>
<div class="col-sm-4">
</div>
</form>
</body>
</html>
Related
I am using bootstrap grid to make multiple input search filters, but on mobile device it's not responsive, any help appreciated.
I wanted to show form fields two in a row on mobile phone so that user can see labels and input search data correctly.
Desktop output: (works fine)
Mobile output: (needs to make responsive)
CODE
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<section class="section">
<div class="row">
<div class="col-md-12">
<form action="" method="post">
<section class="example">
<div class="row form-group">
<div class="col-2">
<label class="control-label">Date of Surgery</label>
<input type="date" name="date_of_surgery" class="form-control boxed">
</div>
<div class="col-2">
<label class="control-label">Hospital</label>
<input type="text" name="hospital" class="form-control" placeholder="Hospital name">
</div>
<div class="col-2">
<label class="control-label">Follow Up(from)</label>
<input type="date" name="date_from" class="form-control">
</div>
<div class="col-2">
<label class="control-label">To</label>
<input type="date" name="date_to" class="form-control">
</div>
<div class="col-2">
<label class="control-label">Diagnosis</label>
<input type="text" name="diagnosis" class="form-control">
</div>
<div class="col-2">
<label class="control-label">Surgery</label>
<input type="text" name="surgery" class="form-control">
</div>
</div>
</section>
<section class="example">
<div class="row form-group">
<div class="col-2">
<label class="control-label">Surgeon</label>
<input type="text" name="surgeon" class="form-control boxed" placeholder="Surgeon's Name">
</div>
<div class="col-2">
<label class="control-label">Assistant</label>
<input type="text" name="assistant" class="form-control" placeholder="Assistant's name">
</div>
<div class="col-2">
<label class="control-label">Anaesthetist</label>
<input type="text" name="anaesthetist" class="form-control" placeholder="Anaesthetist's name">
</div>
<div class="col-2">
<label class="control-label">Age (from)</label>
<input type="number" name="age_from" class="form-control" placeholder="Age From">
</div>
<div class="col-2">
<label class="control-label">To</label>
<input type="number" name="age_to" class="form-control" placeholder="Age To">
</div>
<div class="col-2">
<label for="sex" class="control-label">Sex</label>
<select name="sex" class="form-control">
<option selected="true" disabled="disabled">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
</div><br>
<div class="col-12">
<button type="submit" value="Search" name="search" class="btn btn-primary btn-lg btn-block"><li class="fa fa-search" area-hidden="true"></li> Search </button>
</div>
</form>
</section>
You just need to replace your col-2 by col-4 col-md-2 or col-6 col-sm-4 col-md-2.
Because if you apply col-2 all the devices will show the same front. Please read doc
Below an example with col-4 col-md-2:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<section class="section">
<div class="row">
<div class="col-md-12">
<form action="" method="post">
<section class="example">
<div class="row form-group">
<div class="col-4 col-md-2">
<label class="control-label">Date of Surgery</label>
<input type="date" name="date_of_surgery" class="form-control boxed">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Hospital</label>
<input type="text" name="hospital" class="form-control" placeholder="Hospital name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Follow Up(from)</label>
<input type="date" name="date_from" class="form-control">
</div>
<div class="col-4 col-md-2">
<label class="control-label">To</label>
<input type="date" name="date_to" class="form-control">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Diagnosis</label>
<input type="text" name="diagnosis" class="form-control">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Surgery</label>
<input type="text" name="surgery" class="form-control">
</div>
</div>
</section>
<section class="example">
<div class="row form-group">
<div class="col-4 col-md-2">
<label class="control-label">Surgeon</label>
<input type="text" name="surgeon" class="form-control boxed" placeholder="Surgeon's Name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Assistant</label>
<input type="text" name="assistant" class="form-control" placeholder="Assistant's name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Anaesthetist</label>
<input type="text" name="anaesthetist" class="form-control" placeholder="Anaesthetist's name">
</div>
<div class="col-4 col-md-2">
<label class="control-label">Age (from)</label>
<input type="number" name="age_from" class="form-control" placeholder="Age From">
</div>
<div class="col-4 col-md-2">
<label class="control-label">To</label>
<input type="number" name="age_to" class="form-control" placeholder="Age To">
</div>
<div class="col-4 col-md-2">
<label for="sex" class="control-label">Sex</label>
<select name="sex" class="form-control">
<option selected="true" disabled="disabled">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
</div><br>
<div class="col-12">
<button type="submit" value="Search" name="search" class="btn btn-primary btn-lg btn-block"><li class="fa fa-search" area-hidden="true"></li> Search </button>
</div>
</section>
</form>
</div>
</div>
</section>
I have two buttons in a bootstrap 4 flex row that refuse to align vertically. I want to align bottom with the inputs on the same row.
The fiddle is here.
The code:
<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
<div class="row form-group">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">O/C</label>
<input id="OC" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
Signature
</button>
</div>
</div>
<br>
<div class="row form-group">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">Witness</label>
<input id="Witness" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="WitnessName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
Witness Signature
</button>
</div>
</div>
</div>
I have tried adding mt-auto to the <button> element as per this Stack Overflow answer but it ad no apparent effect.
d-flex and flex-column are already added to card-body.
I would like the solution to use bootstrap helper utilities. The buttons also touch the inputs on small screens.
Maybe you can use this code align-items-end in each group of form-group:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
<div class="row form-group align-items-end">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">O/C</label>
<input id="OC" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2 ">
<button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
Signature
</button>
</div>
</div>
<br>
<div class="row form-group align-items-end">
<div class="col-md-2">
<label class="control-label control-label-left" for="OCQID">Witness</label>
<input id="Witness" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="WitnessName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
Witness Signature
</button>
</div>
</div>
</div>
and the result:
You can use .align-items-baseline after using .flex row.
Introduction
Hi, i am working with the search form, having 5 inputs and a search button. Each input field have its label.
Code
<section class="content">
<div class="box box-info">
<form action="/users" id="Search-form" method="POST" role="form">
<div class="box-body">
<div class="form-inline row" role="form" style="padding-top: 7px; padding-left: 10px;width:100%;">
<div class="form-group frm-setp">
<label for="pwd">Name:</label>
<input type="text" class="form-control" placeholder="first name" name="name" id="srch-term" value="$data.name">
</div>
<div class="form-group frm-setp">
<label for="pwd">Ph#:</label>
<input type="text" class="form-control" placeholder="923325540106" name="phoneNumber" id="srch-term" value="$data.phoneNumber" pattern="[0-9]{12}">
</div>
<div class="form-group frm-setp">
<label for="email">From:</label>
<input type="text" class="form-control pickdate" name="fromdate" id="fromdate"
value="$data.from" />
</div>
<div class="form-group frm-setp">
<label for="pwd">To:</label>
<input type="text" class="form-control pickdate" name="todate" id="todate"
value="$data.to" />
</div>
<div class="form-group frm-setp">
<label for="pwd">Filter</label>
<select name="ddlFilterBy" id="ddlFilterBy" class="form-control">
<option value="all">All</option>
<option value="driver">Active Drivers</option>
</select>
</div>
<div class="form-group frm-setp">
<button type="submit" class="btn btn-info">Search</button>
</div>
</div>
</div>
</form>
</div>
</section>
Display LG
Display MD
Problem
Here, clearly i have problem with medium screens or less but works perfect with larger screens.
On medium or small screens, other elements break the line.
If someone have idea about this kind of problem or any reference, then please do help. Thanks for your time.
Do it in this way-- All your inputs must be wrapped within responsive grid column classes.
Working example
#media(max-width:767px){
#srch {
margin-top: 22px;
margin-left: 10px;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<section class="content">
<div class="box box-info">
<form action="/users" id="Search-form" method="POST" role="form">
<div class="box-body">
<div class="form-inline row" role="form" style="padding-top: 7px; padding-left: 10px;width:100%;">
<div class="form-group frm-setp col-md-2 col-lg-2 col-sm-2 col-xs-2">
<label for="pwd">Name:</label>
<input type="text" class="form-control" placeholder="first name" name="name" id="srch-term" value="$data.name">
</div>
<div class="form-group frm-setp col-md-2 col-lg-2 col-sm-2 col-xs-2">
<label for="pwd">Ph#:</label>
<input type="text" class="form-control" placeholder="923325540106" name="phoneNumber" id="srch-term" value="$data.phoneNumber" pattern="[0-9]{12}">
</div>
<div class="form-group frm-setp col-md-2 col-lg-2 col-sm-2 col-xs-2">
<label for="email">From:</label>
<input type="text" class="form-control pickdate" name="fromdate" id="fromdate"
value="$data.from" />
</div>
<div class="form-group frm-setp col-lg-2 col-md-2 col-sm-2 col-xs-2">
<label for="pwd">To:</label>
<input type="text" class="form-control pickdate" name="todate" id="todate"
value="$data.to" />
</div>
<div class="form-group frm-setp col-md-2 col-lg-2 col-sm-2 col-xs-2">
<label for="pwd">Filter</label>
<select name="ddlFilterBy" id="ddlFilterBy" class="form-control">
<option value="all">All</option>
<option value="driver">Active Drivers</option>
</select>
</div>
<div class="form-group frm-setp col-lg-2 col-md-2 col-sm-2 col-xs-2">
<button id="srch" type="submit" class="btn btn-info">Search</button>
</div>
</div>
</div>
</form>
</div>
</section>
</body>
</html>
Use col-*-* class for all your inputs and labels.
<div class="col-*-*">
<input class="input-lg">
</div>
I have a problem with <div>, as you can see :
firefox display:
chrome display:
html structure :
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<input type="text" name="from_area" class="form-control input-lg typeahead typeahead-area-tariff" id="from_area" placeholder="Origin" />
</div>
<div class="form-group col-xs-12 col-sm-4">
<input type="text" name="to_area" class="form-control input-lg typeahead typeahead-area-tariff" id="to_area" placeholder="Destination" />
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="weight" class="form-control input-lg" id="weight" placeholder="Weight" />
<span class="input-group-addon">Kg</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="length" class="form-control input-lg" id="length" placeholder="Length" />
<span class="input-group-addon">Cm</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="width" class="form-control input-lg" id="width" placeholder="Width" />
<span class="input-group-addon">Cm</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="height" class="form-control input-lg" id="height" placeholder="Height" />
<span class="input-group-addon">Cm</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4 col-sm-offset-4 text-center">
<button type="submit" class="btn btn-primary btn-lg btn-block" tabindex="7"><span class="fi flaticon-search"></span> Search </button>
</div>
</div>
I am using <div class="col-sm-4"> but when I see it on firefox, input text "Width" breaks to a new line. Please help :(
[SOLVED] Added <div class="clearfix"></div> after the third input text.
Reference
i am new in bootstrap.i design the following html form using bootstrap.
Here is the image given below:
as you can see,that the right side [red marked] size are not same.
I know about manually adjusting each of the elements width.But it is very tedious.
May be form-control causes this.Please help me on this.Thanks
here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employee Loan Distribution</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
<script src="js/moment.min.js"></script> <!-- bootstrap-datetimepicker requires Moment.js to be loaded first -->
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({format:"DD/MM/YYYY", useCurrent: false });
});
</script>
<style>
#datetimepicker1{
width:140px;
}
body {
background-color: #584F39;
}
.panel.panel-primary {
border-color: #73AD21;
}
.panel-group .panel .panel-heading {
background: #73AD21;
}
.form-horizontal .panel.panel-primary {
border-color: #73AD21;
margin-bottom: 10px;
}
#media (max-width: 767px) {
.form-group-top {
margin-top: 15px;
}
}
</style>
</head>
<body >
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Employee Loan Distribution</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-3" for="acode">Employee ID:</label>
<div class="col-sm-3" id = "empid" >
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="employeeid" placeholder="Enter ID">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Loan Name:</label>
<div class="col-sm-8">
<div class="input-group">
<select class="form-control " name="month" id="month" onchange="" >
<option value="" disabled selected>Loan</option>
<option value="01">Bank Consumer Loan</option>
<option value="02">GPF Loan Adv.</option>
<option value="03">Green Super Market Loan</option>
<option value="05">House Building Loan</option>
<option value="19">Other Loan</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="dcode">Description:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" id="dcode" placeholder="Enter Loan Description">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Amount:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Amount" >
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Sanction Date:</label>
<div class="col-sm-3">
<div class="input-group date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" id='datetimepicker1' class="form-control" placeholder="DD/MM/YYYY">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Interest Rate:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Rate" >
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-info">Exit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
remove input-group class in no use addon-button
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Employee Loan Distribution</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-3" for="acode">Employee ID:</label>
<div class="col-sm-9" id = "empid" >
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="employeeid" placeholder="Enter ID">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Loan Name:</label>
<div class="col-sm-9">
<select class="form-control " name="month" id="month" onchange="" >
<option value="" disabled selected>Loan</option>
<option value="01">Bank Consumer Loan</option>
<option value="02">GPF Loan Adv.</option>
<option value="03">Green Super Market Loan</option>
<option value="05">House Building Loan</option>
<option value="19">Other Loan</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="dcode">Description:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dcode" placeholder="Enter Loan Description">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Amount:</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter Amount" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Sanction Date:</label>
<div class="col-sm-9">
<div class="input-group date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" id='datetimepicker1' class="form-control" placeholder="DD/MM/YYYY">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Interest Rate:</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter Rate" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-info">Exit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
https://jsfiddle.net/gpazs5pt/1/
create a custom class like this:
.custom
{
min-width: 150px;
}
add this class to all form elements.