Bootstrap form - reducing the height

Question

Have a form with 17 rows (each row around 2-3 controls). Copied my sample html below.

1) Have a requirement to reduce the height by half to all the controls. Beginner with Bootstrap and currently struck.

2) Also how to control the input size of the text fields.

3) Also would like to use fieldset around some controls.

Any pointer is appreciated.

Thanks,

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


</head>

<body>
    <div class="container">
        <form class="form-horizontal" role="form">
                <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row11">Label11:</label>
                    </div>
                    <div class="col-sm-1">
                        <input type="text" class="form-control" id="row11"
                            placeholder="Data 11">
                    </div>
                    <div class="col-sm-1">
                        <label class="control-label" for="row12">Label12:</label>
                    </div>

                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="row12">
                    </div>
            </div>
            <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-1">
                        <label class="control-label" for="row21">Label21:</label>
                    </div>

                    <div class="col-sm-1">
                        <input type="text" class="form-control" id="row21"
                            placeholder="Data21">
                    </div>
                    <div class="col-sm-1">
                        <label class="control-label" for="row22">Label22:</label>
                    </div>

                    <div class="col-sm-1">
                        <input type="text" class="form-control" id="row22" placeholder="Data 22">
                    </div>
            </div>


                <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row31">Label31:</label>
                    </div>

                    <div class="col-sm-1">
                        <input type="text" class="form-control" id="row31"
                            placeholder="Data31">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row41">Label41:</label>
                    </div>

                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="row41"
                            placeholder="Data41">
                    </div>
                </div>

            <div class="form-group">


                    <div class="col-sm-offset-1 col-sm-8">
                        <input type="text" class="form-control" id="row41"
                            placeholder="Data42">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row51">Label51:</label>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="row51"
                            placeholder="Data51">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row61">Label61:</label>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="row61"
                            placeholder="Data61">
                    </div>
                    <div class="col-sm-offset-3 col-sm-1">
                        <label class="control-label" for="row62">Label62:</label>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="row62"
                            placeholder="Data62">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row71">Label71:</label>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="row71"
                            placeholder="Data71">
                    </div>
                    <div class="col-sm-offset-3 col-sm-1">
                        <label class="control-label" for="row72">Label72:</label>
                    </div>

                    <div class="col-sm-2">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Ddown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row81">Label81:</label>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="row81"
                            placeholder="Data81">
                    </div>
                    <div class="col-sm-offset-3 col-sm-1">
                        <label class="control-label" for="row82">Label82:</label>
                    </div>

                    <div class="col-sm-2">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Ddown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row91">Label91:</label>
                    </div>

                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="row91"
                            placeholder="Data91">
                    </div>
                    <div class="col-sm-offset-2 col-sm-1">
                        <label class="control-label" for="row92">Label92:</label>
                    </div>

                    <div class="col-sm-1">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Ddown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row101">Label101:</label>
                    </div>

                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="row101"
                            placeholder="Data10-1">
                    </div>
                    <div class="col-sm-offset-2 col-sm-1">
                        <label class="control-label" for="row10-2">Label102:</label>
                    </div>


                        <div class="col-sm-1 dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Ddown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            </ul>
                        </div>

                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row11-1">Label111:</label>
                    </div>

                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="row11-1"
                            placeholder="Data11-1">
                    </div>
                    <div class="col-sm-offset-2 col-sm-1">
                        <label class="control-label" for="row11-2">Label112:</label>
                    </div>

                    <div class="col-sm-1">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Ddown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row12-1">Label121:</label>
                    </div>

                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="row12-1"
                            placeholder="Data12-1">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row13-1">Label131:</label>
                    </div>

                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="row13-1"
                            placeholder="Data13-1">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row14-1">Label141:</label>
                    </div>

                    <div class="col-sm-1">
                        <input type="text" class="form-control" id="row14-1"
                            placeholder="Data14-1">
                    </div>
                    <div class="col-sm-offset-1 col-sm-1">
                        <label class="control-label" for="row14-2">Label142:</label>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="row14-2"
                            placeholder="Data14-2">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row15-1">Label151:</label>
                    </div>

                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="row15-1"
                            placeholder="Data15-1">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row16-1">Label161:</label>
                    </div>

                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="row16-1"
                            placeholder="Data16-1">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row17-1">Label171:</label>
                    </div>

                    <div class="col-sm-8">
                        <textarea rows="3" class="form-control" id="row17-1"
                            placeholder="Data17-1"></textarea>
                    </div>
                </div>


        </form>
    </div>

    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script
        src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

akaphenom akaphenom · Accepted Answer · 2015-02-10T22:33:07

I would think as a last resort you could brute force it with some CSS. Add a class to the form like 'form-widgets-sm'.

Then in the CSS:

.form-widgets-sm label {
    height: 15px;
}

.form-widgets-sm input {
    height: 15px;
}

and adjust the heights in there (obviously the 15px is a placeholder). You may also have to modify the form-groups and/or the div columns.

While I am sure there is a more bootstrap way of doing this, this method isn't that disruptive (you add that one class to the form), and can allow you to move forward while you wait for a more bootstrap answer.

Bootstrap form - reducing the height

1 Answers