CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4alignment
SolidCloudinc
SolidCloudinc

Reputation: 321

Bootstrap align input on same row with long labels

Take two inputs like a drop down on the same row with labels that are longer and not the same amount of characters. It causes the input to drop down and be unaligned with its companion. Adding a break wouldn't work because at certain widths it aligns and others it wraps and drops down.

The form has ~100 elements so one per line would get very long.

<form>
                 <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>This is question 1?</label>
                        <select size="0" class="form-control" name="typeOfEntity">
                            <option disabled selected>Select One...</option>
                            <option>answer 1</option>
                            <option>answer 2</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label>This is a really long question 2 that I need to ask?</label>
                        <select size="0" class="form-control" name="whyRegistering">
                            <option disabled selected>Select One...</option>
                            <option>Answer 1</option>
                            <option>Answer 2,3,4,5 etc</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
</form>

Here is a jfiddle showing the issue. Resize the screen size and see the dropdowns looks off: https://jsfiddle.net/30mfgLde/

Upvotes: 1

Views: 2854

Answers (2)

Seysay
Seysay

Reputation: 13

You should use col-xs-* or md what ever to within your row. The form-control class displays block because that's the way bootstrap work. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
     crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7"
     crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8"
     crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
     crossorigin="anonymous"></script>

    <div class="container">



        <form>
            <div class="form-row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-xs-6 col-md-6">
                            <label>This is question 1?</label>
                        </div>
                        <div class="col-xs-6 col-md-3">
                            <select size="0" class="form-control" name="typeOfEntity">
                                <option disabled selected>Select One...</option>
                                <option>answer 1</option>
                                <option>answer 2</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-xs-8 col-md-6">
                        <label>This is a really long question 2 that I need to ask?</label></div>
                    <div class="col-xs-4 col-md-3">
                        <select size="0" class="form-control" name="whyRegistering">
                            <option disabled selected>Select One...</option>
                            <option>Answer 1</option>
                            <option>Answer 2,3,4,5 etc</option>
                        </select>
                    </div>
                </div>
            </div>
            <button type="submit" class="col-xs-12 btn btn-primary">Submit</button>
        </form>


    </div>

https://codepen.io/anon/pen/dQgevq

Upvotes: 0

Steve Maris
Steve Maris

Reputation: 1006

You can use flexbox to always align the input on bottom and label on top.

.form-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Upvotes: 4

Related Questions