Checkbox not displaying in Bootstrap 5

[MtnBiker]

Checkbox not rendering correctly in Bootstrap 5. I upgraded to v5 to get another feature.

Environment

• Ruby [2.6.6]
• Rails [rails 6.0.3.6] gem 'rails', '~> 6.0'
• Simple Form [simple_form 5.1.0] gem 'simple_form'
• Bootstrap yarn.lock
• bootstrap@^5.0.0:
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.1.tgz#e7939d599119dc818a90478a2a299bdaff037e09"
  integrity sha512-Fl79+wsLOZKoiU345KeEaWD0ik8WKRI5zm0YSPj2oF1Qr+BO7z0fco6GbUtqjoG1h4VI89PeKJnMsMMVQdKKTw==

Current behavior. Extant is a boolean

<%= simple_form_for(@location) do |form| %>
<%= form.input :extant %>

HTML generated

<div class="form-check"><input name="location[extant]" type="hidden" value="0"><input class="form-check-input boolean optional" type="checkbox" value="1" name="location[extant]" id="location_extant"><label class="form-check-label boolean optional" for="location_extant">Extant</label></div>

Screenshot below (the green line is from the text field directly above). The short gray line is the checkbox:

Expected behavior

A checkbox.

The short gray line does react when click on and turns blue.

[MtnBiker]

I wonder if I have a webpacker problem and the stylesheets aren't getting added. Because if I put

    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
      <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
    </div>

in the form just below the original checkbox, I get

application.js

import 'bootstrap' // or require("bootstrap"); use import for yarn?

import 'bootstrap/dist/js/bootstrap' // not always done

application.scss

@import "bootstrap/scss/bootstrap";

Sure enough I found the problem:

I also had some custom formatting that was overriding. Haven't sorted out what it is yet, but removing one .scss file fixed the checkbox, but no doubt breaks something else, so need to figure out what class is wrong.

.input has this line and it is the problem. My comments aren't good enough to show why I have it.
height: auto !important;

[carlosantoniodasilva]

Glad to know you've figured it out.

Please note that there's some work being done to get the bootstrap initializer fully working with Simple Form here: heartcombo/simple_form-bootstrap#329 (separate repo for the sample app & bootstrap config development), you might want to keep an eye on that if you're going for v5.