How to completely remove the .invisible div?

Question

I am trying to hide a select tag and just show it when needed.

So I use the .invisible of bootstrap but the result is, even it is hidden it still consume spaces.

  <div class="row invisible">
    <div class="form-group form-group-lg col-lg-12">
      <div class="row">
        <label for="for-select" class="col-lg-2 col-form-label">Items</label>
        <div class="col-lg-10">
          <select name="for-select" id="for-select" class="form-control">
          </select>
        </div>
      </div>
    </div>
  </div>

But the result looks like this:

Answer 1

There is a difference between visibility and display:

Visibility makes something invisible without changing the dimensions. Display changes the display hence it will not take any space.

https://getbootstrap.com/docs/4.0/utilities/visibility/

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Use one of the display classes instead of the visibility classes.

Answer 2

Use .d-none instead of .invisible.

.d-none will use the css property display: none;. https://getbootstrap.com/docs/4.0/utilities/display/

.invisible uses visibility: hidden; which can be useful to hide content but keep it for audio readers. https://getbootstrap.com/docs/4.0/utilities/visibility/

Answer 3

使用类.hidden而不是.invisible 并在要显示时更改删除类.hidden