How to decrease the height of the input text field in bootstrap?
Question
How to decrease the height of the input text field in bootstrap? My code:
Head section:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/defaultStyles.css">
<link rel="stylesheet" type="text/css" href="css/myMenuStyle.css">
<link rel="stylesheet" type="text/css"
href="css/FiexedHeaderTableScrollingStyle.css">
<style type="text/css">
.form-group {
margin-bottom: 0px ;
margin-top: 0px; <!-- I used this style to decrease space between fields -->
}
</style>
</head>
Actual form code:
<form class="form-horizontal" action="addKPITODB">
<div class="form-group form-group-sm">
<label for="kpi_name" class="col-sm-2 control-label">KPI Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="kpi_name"
placeholder="KPI Name" name="kpi_name">
</div>
</div>
<div class="form-group form-group-sm">
<label for="kpi_sql" class="col-sm-2 control-label">KPI SQL</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="K sql"
name="kpi_sql" id="kpi_sql">
</div>
</div>
</form>
The above code gives the following output:
In the above image, the input field height is big even I am using form-group form-group-sm . I need to decrease the height further.
2 answers
solution1
1 ACCPTED 2015-10-29 10:04:05
Try this:
input.form-control {
height:25px !important;
}
solution2
0 2015-10-29 10:03:26
.form-control class in bootstrap is set to have height: 34px you can set it to anything you like using:
.form-control {
height: 30px;
}
for example, if it is not working that means that your stylesheet file is being loaded BEFORE bootstrap.css file, so either add !important to your CSS rule or load your stylesheet AFTER the bootstrap.css file which is the preferred way.
Here is an example:
.form-control { height: 100px; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css"></link> <form class="form-horizontal" action="addKPITODB"> <div class="form-group form-group-sm"> <label for="kpi_name" class="col-sm-2 control-label">KPI Name</label> <div class="col-sm-5"> <input type="text" class="form-control" id="kpi_name" placeholder="KPI Name" name="kpi_name"> </div> </div> <div class="form-group form-group-sm"> <label for="kpi_sql" class="col-sm-2 control-label">KPI SQL</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="K sql" name="kpi_sql" id="kpi_sql"> </div> </div></form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.