<!-- Button trigger modal --><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal">
Popup 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">Popup Modal</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button></div><divclass="modal-body">
Woohoo, you're reading this text in a modal!
</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>
Vertically Centered Modal
Vertically Centered Modal
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros.
<!-- Button trigger modal --><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModalCenter">
Centered modal
</button><!-- Modal --><divclass="modal fade"id="exampleModalCenter"tabindex="-1"role="dialog"aria-labelledby="exampleModalCenterTitle"aria-hidden="true"><divclass="modal-dialog modal-dialog-centered"role="document"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title"id="exampleModalCenterTitle">Vertically Centered Modal</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button></div><divclass="modal-body">
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</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>
Alerts
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<divclass="alert alert-primary"role="alert">
A simple primary alert—check it out!
</div><divclass="alert alert-secondary"role="alert">
A simple secondary alert—check it out!
</div><divclass="alert alert-success"role="alert">
A simple success alert—check it out!
</div><divclass="alert alert-danger"role="alert">
A simple danger alert—check it out!
</div><divclass="alert alert-warning"role="alert">
A simple warning alert—check it out!
</div><divclass="alert alert-info"role="alert">
A simple info alert—check it out!
</div><divclass="alert alert-light"role="alert">
A simple light alert—check it out!
</div><divclass="alert alert-dark"role="alert">
A simple dark alert—check it out!
</div>
Link color
A simple primary alert with an example link. Give it a
click if you like.
A simple secondary alert with an example link. Give it a
click if you like.
A simple success alert with an example link. Give it a
click if you like.
A simple danger alert with an example link. Give it a
click if you like.
A simple warning alert with an example link. Give it a
click if you like.
A simple info alert with an example link. Give it a click
if you like.
A simple light alert with an example link. Give it a
click if you like.
A simple dark alert with an example link. Give it a click
if you like.
<divclass="alert alert-primary"role="alert">
A simple primary alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
</div><divclass="alert alert-secondary"role="alert">
A simple secondary alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
</div><divclass="alert alert-success"role="alert">
A simple success alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
</div><divclass="alert alert-danger"role="alert">
A simple danger alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
</div><divclass="alert alert-warning"role="alert">
A simple warning alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
</div><divclass="alert alert-info"role="alert">
A simple info alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
</div><divclass="alert alert-light"role="alert">
A simple light alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
</div><divclass="alert alert-dark"role="alert">
A simple dark alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
</div>
<form><divclass="form-group"><labelfor="exampleInputEmail1">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"placeholder="Enter email"><smallid="emailHelp"class="form-text text-muted">We'll never share your email with anyone else.</small></div><divclass="form-group"><labelfor="exampleInputPassword1">Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password"></div><divclass="form-group form-check"><inputtype="checkbox"class="form-check-input"id="exampleCheck1"><labelclass="form-check-label"for="exampleCheck1">Check me out</label></div><buttontype="submit"class="btn btn-primary">Submit</button></form>
Media Objects
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<divclass="media"><imgsrc="..."class="mr-3"alt="..."><divclass="media-body"><h5class="mt-0 ml-3">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div></div>
Nesting
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.
<divclass="media"><imgsrc="..."class="mr-3"alt="..."><divclass="media-body ml-3"><h5class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<divclass="media mt-3"><aclass="mr-3"href="#"><imgsrc="..."class="mr-3"alt="..."></a><divclass="media-body ml-3"><h5class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div></div></div></div>