Cannot Get Bootstrap 4 Horizontal Form to Work as Required

Cannot get Bootstrap 4 Horizontal Form to work as required

The problem is that Flexbox doesn't work in rows/columns the way a Table does. You can use col-sm-auto to get each label to shrink-to-fit, but then the labels/inputs won't align vertically down the page...

Sample Image

It sounds like you want to shrink the label column to fit the width of the widest label. This could be done by putting all the labels in 1 column, and inputs in another column, but then each label/input won't stack together on mobile screens.

There's no elegant Bootstrap-only solution to this problem. You can use Tables, CSS grid, or the option described by @Toan Lu in the comments.

Bootstrap Grid option

I'd recommend simply using col-sm-2 or col-sm-3 for the labels (fitting them to approx. the widest label) and text-truncate to ellipsis(...) the overflowing text until they stack vertically on mobile...

Sample Image

<div class="form-row">
        <label class="col-form-label col-sm-2 text-truncate">
            Label
        </label>
        <div class="col-sm-3 col-md-2">
             <select>..</select>
        </div>
</div>

https://codeply.com/go/e3mDrmMv7k

Table option

With this option, the width:1% is used on the labels so that they shrink to the width of the widest. Use text-nowrap to stop the labels from wrapping. Each form row is a d-table-row and each label is a d-table-cell...

.col-form-label.d-sm-table-cell {
   width: 1%;
}
<div class="container py-3">
    <div class="form-row d-table-row">
        <label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
            Genre
        </label>
        <div class="col-sm-3 col-md-2">
            <select>
             ..
            </select>
        </div>
    </div>
    <div class="form-row d-table-row">
        <label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
            Longer label here
        </label>
        <div class="col-sm-3 col-md-2">
            <select>
                ..
            </select>
        </div>
    </div>
</div>

https://codeply.com/go/e3mDrmMv7k (see 2nd option)

The table option makes the divs into tr/td but also works responsively allowing the fields to stack vertically on mobile. Read more on [d-table classes](Yes, part of Bootstrap 4: http://getbootstrap.com/docs/4.1/utilities/display/#notation).

CSS Grid option

One other (non-Bootstrap 4) method is using CSS grid. Make the row display:grid Use the fr sizing on the 2 grid-template-columns across the row.

.d-grid {
  display: grid;
  grid-template-columns: 0fr 1fr;
}

https://codeply.com/go/9Z7Hg2tl1H

creating Horizontal Form in Bootstrap 4

.form-horizontal class has been dropped in Bootstrap 4, you can have a look to the new syntax for horizontal forms here

Here is an Example of horizontal form, also copied it here for quick demo purpose.

<!DOCTYPE html>
<title>My Example</title>

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
body {
padding-top: 1em;
}   
</style> 
 

<div class="container">
<form action="/#">
<div class="form-group row">
<label for="first_name" class="col-xs-3 col-form-label mr-2">First Name</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
</div>
<div class="form-group row">
<label for="last_name" class="col-xs-3 col-form-label mr-2">Last Name</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="last_name" name="last_name">
</div>
</div>
<div class="form-group row">
<div class="offset-xs-3 col-xs-9">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>

<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Initialize popover component
$(function () {
  $('[data-toggle="popover"]').popover()
})

$("form").submit(function(e) {
  e.preventDefault();
});
</script>

Bootstrap 4 - can't horizontally align a vertical form

The form is horizontally centered, but it's only half the width of it's parent. The issue is...

"And by specifying the form rows to add up to 6-columns (2-column
labels and 4-column inputs), the form would fill the 6-column content
area, thereby automatically centering itself"

Since 6 is half of 12, the form col-6 (2+4) is only going to fill half the parent col-6. If you want a narrower form in the middle use col-4 (1/3 width), and then something that adds to 12 for the labels and form input (eg. 3+9). OFC you could also use 4/8, 6/6, etc...

<div class="container-fluid">
    <div class="row">
        <div class="my-4 offset-4 col-4 justify-content-center align-items-center">
            <form action="/some/path" method="post">
                <div class="form-group row">
                    <label for="username" class="col-3 col-form-label">Username</label>
                    <div class="col-9">
                        <input type="text" class="form-control" id="username" name="_username" required="required" autocomplete="username">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="password" class="col-3 col-form-label">Password</label>
                    <div class="col-9">
                        <input type="password" class="form-control" id="password" name="_password" required="required" autocomplete="current-password">
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-3"></div>
                    <div class="col-9">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on">
                            <label for="remember_me" class="form-check-label">Remember me</label>
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-12">
                        <button class="btn btn-burnt-orange" type="submit" id="_submit" name="_submit">Log in</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

https://www.codeply.com/go/b4FE5qflxS

Related: Center the content inside a column in Bootstrap 4

Bootstrap .form-horizontal not working

<div class="controls">
                <label for="input1" class="control-label">Label</label>
                <input id="input1" type="text">
 </div>

Is this what you are looking for?

EDIT
Horizontal label from outside of input's div.

    <div class="control-group">
        <label for="input1" class="control-label col-sm-2">Label</label>
        <div class="controls col-sm-10">
            <input id="input1" type="text">
        </div>
    </div>

How can I align a horizontal form with the submit button using Bootstrap 4?

I'd probably try some flexbox stuff: d-flex align-items-end

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<form method="get" action="/some-action">
  <div class="container-fluid">
    <div class="form-group row d-flex align-items-end">
      <div class="col">
        <label for="something">Something</label>
        <select class="form-control" id="something" name="something">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </div>
      
      <div class="col">
        <input type="submit" class="btn btn-primary" />
      </div>
    </div>
  </div>
</form>

Related Topics

Less CSS - Change Variable Value for Theme Colors Depending on Body Class

Select All Elements After Specific Element

How to Animate Flexbox Inserts & Removes

Two Divs Split with Diagonal Line - CSS

Concentric Circles with CSS

Compiling Issue in Bootstrap 3 with Namespace

Inherit CSS Class

Css3 Animate: How to Have the Object Not Revert to Its Initial Position After Animation Has Run

CSS Transitions Between Absolute and Relative Positioning

Flexbox Misbehaving with Max-Height

IE7 CSS Inheritance Does Not Work

Z-Index Isn't Applied

What Are Good Uses of the CSS 'Content' Property

What Are Differences Between Rgb VS Rgba Other Than 'Opacity'

How to Use Image Sprites in Gwt

Size of Zero Pixels in CSS with or Without 'Px' Suffix

Outline: None VS Outline: 0

Removing the Clear and Reveal Password Icons from Internet Explorer


Leave a reply



Submit