Twitter-bootstrap – How does one create a read-only form layout in twitter bootstrap

twitter-bootstrap

Suppose you have view information (not edit information) when using twitter bootstrap. What's the best way to display the data?

This was actually brought up as an issue: https://github.com/twitter/bootstrap/issues/4094.

Best Answer

Bootstrap 3

BS3 has a concept of a static field. You can mix and match static fields and input fields on the same form. Or use all static fields for a read only form.

http://getbootstrap.com/css/#forms-controls-static

Instead of a normal input element, you can use a p tag with this special bootstrap class:

<p class="form-control-static">email@example.com</p>

Bootstrap 4:

You can use the form-control-plaintext class on an input tag.

See https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text

Boostrap 5:

form-control-plaintext

Bootstrap 3 & 4

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
});

Bootstrap 3: getbootstrap.com/javascript/#modals-events

Bootstrap 4: getbootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2

$('#myModal').on('hidden', function () {
    // do something…
});

See getbootstrap.com/2.3.2/javascript.html#modals → Events

Css – How to make Twitter Bootstrap menu dropdown on hover rather than click

To get the menu to automatically drop on hover then this can achieved using basic CSS. You need to work out the selector to the hidden menu option and then set it to display as block when the appropriate li tag is hovered over. Taking the example from the twitter bootstrap page, the selector would be as follows:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

However, if you are using Bootstrap's responsive features, you will not want this functionality on a collapsed navbar (on smaller screens). To avoid this, wrap the code above in a media query:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

To hide the arrow (caret) this is done in different ways depending on whether you are using Twitter Bootstrap version 2 and lower or version 3:

Bootstrap 3

To remove the caret in version 3 you just need to remove the HTML <b class="caret"></b> from the .dropdown-toggle anchor element:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 & lower

To remove the caret in version 2 you need a little more insight into CSS and I suggest looking at how the :after pseudo element works in more detail. To get you started on your way to understanding, to target and remove the arrows in the twitter bootstrap example, you would use the following CSS selector and code:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

It will work in your favour if you look further into how these work and not just use the answers that I have given you.

Thanks to @CocaAkat for pointing out that we were missing the ">" child combinator to prevent sub menus being shown on the parent hover