Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>You can use the mark tag to highlight text.
You can use the mark tag to <mark>highlight</mark> text.
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
Lowercased text.
Uppercased text.
Capitalized text.
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous in <a href="#">Source Title</a></small> </blockquote>
Images in can be made responsive with the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
Styles
Default Button
Raised Button
Floating Action Button
Icon Toggle Button
Flat Button
<a href="#" class="btn btn-primary" type="button">Button</a> Default Button <a href="#" class="btn btn-raised btn-primary" type="button">Button</a> Raised Button <a href="#" class="btn btn-floating-action btn-primary" type="button"><i class="fa fa-star"> </i></a> Floating Action Button <a href="#" class="btn btn-icon-toggle btn-primary" type="button"><i class="fa fa-star"> </i></a> Icon Toggle Button <a href="#" class="btn btn-flat btn-primary" type="button">Button</a> Flat Button
Sizes
btn-xs btn-sm btn btn-lg
<a href="#" type="button" class="btn btn-xs btn-primary">btn-xs</a> <a href="#" type="button" class="btn btn-sm btn-primary">btn-sm</a> <a href="#" type="button" class="btn btn btn-primary">btn</a> <a href="#" type="button" class="btn btn-lg btn-primary">btn-lg</a>
Button Colors
<a href="#" type="button" class="btn btn-block btn-default-bright">Default Bright</a> <a href="#" type="button" class="btn btn-block btn-default-light">Default Light</a> <a href="#" type="button" class="btn btn-block btn-default">Default</a> <a href="#" type="button" class="btn btn-block btn-default-dark">Default Dark</a> <a href="#" type="button" class="btn btn-block btn-primary">Athletic Blue</a> <a href="#" type="button" class="btn btn-block btn-primary-bright">Clinical Blue</a> <a href="#" type="button" class="btn btn-block btn-primary-light">Accent Blue</a> <a href="#" type="button" class="btn btn-block btn-accent">AU Blue</a> <a href="#" type="button" class="btn btn-block btn-accent-bright">AU Gray</a> <a href="#" type="button" class="btn btn-block btn-accent-light">Accent Green</a> <a href="#" type="button" class="btn btn-block btn-info">Info</a> <a href="#" type="button" class="btn btn-block btn-success">Success</a> <a href="#" type="button" class="btn btn-block btn-warning">Warning</a> <a href="#" type="button" class="btn btn-block btn-danger">Danger</a>
<h3 class="main-title text-center" style="color:#003359;">Text <strong>Colors</strong></h3>
<p class="text-default-dark">.text-default-dark</p> <p class="text-default">.text-default</p> <p class="text-default-light">.text-default-light</p> <p class="text-default-bright">.text-default-bright</p> <p class="text-primary">.text-primary</p> <p class="text-primary-light">.text-primary-light</p> <p class="text-primary-bright">.text-primary-bright</p> <p class="text-accent">.text-accent</p> <p class="text-accent-light">.text-accent-light</p> <p class="text-accent-bright">.text-accent-bright</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-success">.text-success</p> <p class="text-info">.text-info</p>
<h4 class="ui horizontal divider header"><i class="icon fa fa-bullhorn" aria-hidden="true"></i>Divider </h4>
<div class="alert alert-callout alert-success" role="alert"> <strong>Well done!</strong> You successfully read this.</div>
<div class="alert alert-callout alert-info" role="alert"> <strong>Heads up!</strong> This alert needs your attention, but it's not super important.</div>
<div class="alert alert-callout alert-warning" role="alert"> <strong>Warning!</strong> Better check yourself, you're not looking too good.</div>
<div class="alert alert-callout alert-danger" role="alert"> <strong>Oh snap!</strong> Change a few things up and try submitting again.</div>
<div class="alert alert-success" role="alert"> <strong>Well done!</strong> You successfully read this. </div>
<div class="alert alert-info" role="alert"> <strong>Heads up!</strong> This alert isn't super important. </div>
<div class="alert alert-warning" role="alert"> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>
<div class="alert alert-danger" role="alert"> <strong>Oh snap!</strong> Change a few things and try again. </div>
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
# | First Name | Last Name | NetID |
---|---|---|---|
1 | Princess | Bubblegum | peebles1 |
2 | Marceline | Abadeer | marcy |
3 | Peppermint | Butler | pbutler |
<table class="table">
Use .table-striped to add zebra-striping to any table row within the <tbody>.
# | First Name | Last Name | NetID |
---|---|---|---|
1 | Princess | Bubblegum | peebles1 |
2 | Marceline | Abadeer | marcy |
3 | Peppermint | Butler | pbutler |
<table class="table table-striped">
Add .table-condensed to make tables more compact by cutting cell padding in half.
# | First Name | Last Name | NetID |
---|---|---|---|
1 | Princess | Bubblegum | peebles1 |
2 | Marceline | Abadeer | marcy |
3 | Peppermint | Butler | pbutler |
<table class="table table-condensed">
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
# | First Name | Last Name | NetID |
---|---|---|---|
1 | Princess | Bubblegum | peebles1 |
2 | Marceline | Abadeer | marcy |
3 | Peppermint | Butler | pbutler |
<div class="table-responsive"> <table class="table"> ... </table> </div>