• Light Version

  • Dark Version

  • RTL Version

Ericsson University
avatar
Sara Hopkins

Webdeveloper

Statistics

$545

27%

Friends

Ericsson University

Documentation

English
SpanishjapaneseFrance
Mark all as read

  • Campaign Holidayis nearly reach budget limit.

  • New admission 32in computer department.

  • 6th sem result 67%in computer department.

  • New Feedback 53for university assessment.

Mark all as read
George
ProfileSettings6InboxMessage
Need help?Sign out

Modal components

Below is a staticmodal example(meaning its positionand displayhave 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.

<divclass="modal"tabindex="-1"role="dialog"><divclass="modal-dialog"role="document"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title">Modal title</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">&times;</span></button></div><divclass="modal-body"><p>Modal body text goes here.</p></div><divclass="modal-footer"><buttontype="button"class="btn btn-secondary"data-dismiss="modal">Close</button><buttontype="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 --><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal">Launch demo modal </button><!-- Modal --><divclass="modal fade"id="exampleModal"tabindex="-1"role="dialog"aria-labelledby="exampleModalLabel"aria-hidden="true"><divclass="modal-dialog"role="document"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title"id="exampleModalLabel">Modal title</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">&times;</span></button></div><divclass="modal-body">... </div><divclass="modal-footer"><buttontype="button"class="btn btn-secondary"data-dismiss="modal">Close</button><buttontype="button"class="btn btn-primary">Save changes</button></div></div></div></div>