---

categories: [Widgets]

layout: page

title: Modals

resource: true

---

<button class="btn btn-default" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">

<span class="pficon pficon-close"></span>

</button>

<h4 class="modal-title" id="myModalLabel">Modal Title</h4>

</div>

<div class="modal-body">

<form class="form-horizontal">

<div class="form-group">

<label class="col-sm-3 control-label" for="textInput">Field One</label>

<div class="col-sm-9">

<input type="text" id="textInput" class="form-control"></div>

</div>

<div class="form-group">

<label class="col-sm-3 control-label" for="textInput2">Field Two</label>

<div class="col-sm-9">

<input type="text" id="textInput2" class="form-control"></div>

</div>

<div class="form-group">

<label class="col-sm-3 control-label" for="textInput3">Field Three</label>

<div class="col-sm-9">

<input type="text" id="textInput3" class="form-control">

</div>

</div>

</form>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

<button type="button" class="btn btn-primary">Save</button>

</div>

</div>

</div>

</div>