javascript - How to decrease the height of the input text field in bootstrap?

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.

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.

Share Improve this question edited Oct 29, 2015 at 10:51 Krupesh Kotecha 2,4123 gold badges22 silver badges40 bronze badges asked Oct 29, 2015 at 9:57 Abdul 1,2085 gold badges32 silver badges69 bronze badges

Go to -- stackoverflow./questions/13754536/… – CodeLove Commented Oct 29, 2015 at 10:00
Let me check friend. – Abdul Commented Oct 29, 2015 at 10:00
Yes I already tried this. That is not working for me. – Abdul Commented Oct 29, 2015 at 10:02

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

Try this:

input.form-control {
   height:25px !important;
}

.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./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to decrease the height of the input text field in bootstrap? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)