Bootstrap 3.3.7 Alerts, Dialogs, and Collapse

Alert

Applications provide interfaces for displaying information or prompting users for confirmation and input. Typical examples are alerts and dialogs. Bootstrap includes features for implementing these interfaces.

The simplest one is the alert. Bootstrap can provide alert displays like this.

<div class="alert alert class">
    ...alert content...
</div>

If you specify alert as the class, an alert is displayed. However, that alone only shows an outline, so in actual use, add one of the following classes.

Using these, you can create alert displays.

<div class="alert alert-info">
    <h4>Alert!</h4>
    This is an alert display.
</div>
<div class="alert alert-success">
    <h4>Alert!</h4>
    This is an alert display.
</div>
<div class="alert alert-warning">
    <h4>Alert!</h4>
    This is an alert display.
</div>
<div class="alert alert-danger">
    <h4>Alert!</h4>
    This is an alert display.
</div>

Four alerts are displayed.

Turning Alerts On and Off

An alert is displayed from the beginning of the page. That is simple, but in practice an alert should appear only when needed or be closable with a close box.

Close Box

<a href="#" data-dismiss="alert">×</a>

The close box can be created with an <a> tag. It must include the data-dismiss="alert" attribute. This displays a close box in the upper right of the alert. The × is written inside the <a> tag.

You can also add a fade effect when it closes by adding the fade in classes to the alert <div>.

Controlling Alert Display

To keep an alert hidden until a button is clicked, set the alert <div> style as follows.

style="display:none;"

To show the alert, display the hidden <div>. jQuery’s show method is convenient.

$('alert tag selector').show();

For example, call this from a button’s onclick.

<button class="btn btn-default" onclick="$('#alert').show()">Show Alert</button>

<div id="alert" class="alert alert-success fade in" style="display:none;">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <h4>Alert!</h4>
    This is an alert display.
</div>

When the page is opened and the Show Alert button is pressed, the alert appears. Clicking the close box closes it.

Modal Dialog

An alert is inserted as a message in the content, while a dialog is used to display something in another window over the screen. It is also called a modal dialog.

A dialog has a somewhat complex tag structure. As with alerts, prepare the dialog content in advance with HTML tags and show it when a button is clicked.

<div class="modal fade" id="dialog id" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ...header...
            </div>
            <div class="modal-body">
                ...body...
            </div>
            <div class="modal-footer">
                ...footer...
            </div>
        </div>
    </div>
</div>

The overall dialog is created with class="modal-dialog". Inside it, class="modal-content" is prepared, and then header, body, and footer tags are placed inside.

Opening and Closing a Dialog

A dialog cannot be used just by preparing display tags. You also need a mechanism to open and close it.

Opening a Dialog

Use an <a> tag.

<a href="dialog selector" data-toggle="modal"> ...... </a>

The href points to the dialog <div>, usually by ID, and data-toggle="modal" opens it.

Closing a Dialog

To close a dialog, use an <a> tag with data-dismiss="modal", usually in the footer.

<a href="#" data-dismiss="modal"> ...... </a>

Here is a simple example.

<a href="#dialog" role="button" class="btn btn-default" data-toggle="modal">Show Dialog</a>

<div class="modal fade" id="dialog" role="dialog" aria-labelledby="dlogLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                 <h4 class="modal-title" id="dlogLabel">Dialog!</h4>
            </div>
            <div class="modal-body">
                This is the dialog message.
            </div>
            <div class="modal-footer">
                <a href="#" role="button" class="btn btn-default" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>

Clicking Show Dialog displays the dialog, and clicking Close closes it.

Collapse

Alerts appear and disappear as needed. Bootstrap also provides another interface for showing and hiding content when needed: collapse.

<div class="collapse">
    ...display content...
</div>

Prepare a <div> with class="collapse". To expand or collapse it, prepare an <a> tag.

<a data-toggle="collapse" href="target to collapse"> ...... </a>

The href specifies the tag with class="collapse" by ID. Each time the link is clicked, the collapsed content is shown or hidden.

<a role="button" class="btn btn-default" data-toggle="collapse" href="#panel">Show Collapse</a>

<div id="panel" class="collapse">
    <div class="panel panel-default">
        <div class="panel-body">
            This is the displayed panel.
        </div>
    </div>
</div>

Clicking the button shows and hides the message. Remember it as a component that can easily create collapsible displays.