Simple_form: Bootstrap 4 compatibility?

[owenstrevor]

Can anyone tell me if simple_form is compatible with the new Bootstrap 4 beta?

[wynksaiddestroy]

As far as I understand the issue, simple_form is not compatible at the moment. Particularly I see no way to add error classes like is-invalid directly to the input element.
There is an open pull request #1476 which addresses the problem, but hasn’t been merged yet.

[naysawn]

Yes - it's compatible. Just add an initializer, custom to bootstrap 4.

[6temes]

@naysawn It would be quite useful if you referred us to the initializer that works for Bootstrap4.

[iz103]

I am guessing, by initializer, this means adding a bootstrap-4 here:

/lib/generators/simple_form/templates/config/initializers/simple_form_bootstrap_4.rb

Add the same code form the simple_form_bootstrap.rb and change the selectors to the equivalent new ones.

Not sure, but I might give that a try. Is this what you did @naysawn ?

[6temes]

There's an issue with styling invalid fields. We are using this workaround:

.has-invalid {
  .invalid-feedback {
    display: block;
  }

  label {
    color: $form-feedback-invalid-color;
  }

  .form-control {
    background: rgba($form-feedback-invalid-color, .8);
    border-color: $form-feedback-invalid-color;
  }
}

[wynksaiddestroy]

As I already wrote in a previous https://github.com/plataformatec/simple_form/issues/1516#issuecomment-330211453, I see no way how to achieve Bootstrap 4 integration apart from workarounds like @6temes proposed. If @naysawn or @iz103 do have a working initializer, I will be pleased to see it.

[printercu]

Created sample app https://github.com/printercu/rails_sf_bs4 with online demo https://rails-sf-bs4.herokuapp.com/
Basic features works fine, while there are still some issues with highlighting invalid checkbox/radio collections and other complex input. This is known issue in bs and it may change a lot before release.

This is commit with changes from bs3: https://github.com/printercu/rails_sf_bs4/commit/29a6a8e0b819a207cb3dd1405fcdbed0380f37d9

[tordans]

JFYI, Current discussion on the topic can be found here: https://github.com/plataformatec/simple_form/pull/1337