CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Abdul
Abdul

Reputation: 1208

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:

enter image description here

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.

Upvotes: 3

Views: 6195

Answers (2)

Arun Kumar M
Arun Kumar M

Reputation: 1601

Try this:

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

Upvotes: 4

odedta
odedta

Reputation: 2478

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

Upvotes: 1

Related Questions