Is there a Twitter Bootstrap class that means "initially hidden"?

Question

Using Bootstrap 3, I have an element on a page I want to show later in response to the user clicking a button. Example:

<div id="search_results">
... gets populated from ajax data later ...
</div>

<button id="search_button" type="button" class="btn btn-primary pull-right">Search</button>

<script>
$('#search_button').click(function() {
    // ... do the call to search
    // and in the callback: 
    $('#search_results').show();
});
</script>

The search_results div should be initially hidden. Is there some normal/best practice way of doing this with bootstrap?

Yes, I do realize I can just put style="display:none" on search_results, but is that the best way to do it? It would seem to be a bit better to have a style that semantically means "initially hidden". (NOTE: The hidden or hide classes don't do this as they are !important and show(), toggle(), etc. use an inline style which does not override them, i.e. setting "hidden" as the class makes it unshowable from jQuery.)

Answer 1

Looking through the source suggests either .collapse or .invisible are options, depending on whether you want display: none; behaviour or visibility: hidden; behaviour, respectively.

Update, 2016-03-08: Early adopters of Bootstrap v4 should note that the rule for .invisible is now visibility: hidden !important;. (.collapse is unchanged.)