Buzzer
buzzerlogo
Documentation Mega Download
RB
Nathan pushed new commit in github.
10 minutes ago
Alice started new task: buzzerUI design.
1 hour ago
Rose deployed new version of NodeJS REST
2 hours ago
 RB
Alice started new task: buzzerUI design.
1 hour ago
Rose deployed new version of NodeJS REST
2 hours ago
Mark all as read
Jane Pearson Administrator
Profile Settings 6 Inbox Message
Need help? Sign out

Subscribe

Accordion

  • Lorem ipsum

    Lorem ipsum dolor sit amet, elit. Placeat, quibusdam! Voluptate nobis

  • Dolor sit amet

    Lorem ipsum dolor sit amet, consectetur adipisicing Voluptate nobis

Company

Image Gallery

img
img
img

Documentation

Visitors
2,5,1,8,3,6,7,5
Visits
10,8,9,3,5,8,5
Chats
1,8,5,6,2,4,3,2
Introduction
Alerts Avatars Buttons Breadcrumb Input group List group Modal Pagination Colors Cards Charts Form components Tags Typography
Browse Portfolio

Modal components

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>Modal body text goes here.</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
    </div>
</div>
</div>

Live demo

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
        ...
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
    </div>
</div>