General
Dozens of reusable components built to provide navigation, alerts, popovers, and more. Please refer to the full Bootstrap componets documentation available at the following addresses:
Bootstrap Components Documentation
Bootstrap CSS Documentation
Bootstrap Scaffolding Documentation
Bootstrap JavaScript Documentation
Also if you want to know more about the PhpBB base code and its styling I suggest to have a look at the following:
PhpBB3 Styles' files list
PhpBB 3.0 Olympus Documentation
PhpBB Development Wiki
Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png
Forum Grid System
Live fluid grid example
More info about the Bootsrtap Grid system can be found here: Bootsrtap Grid system
The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.
<div class="span12"></div>
to force 100% width. By default every block has 100% width.Make any row "fluid" by changing .row
to .row-fluid
. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.
- <div class="row-fluid">
- <div class="span4">...</div>
- <div class="span8">...</div>
- </div>
Tables
Default styles
For basic styling—light padding and only horizontal dividers—add the base class .table
to any <table>
.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
- <table class="table">
- …
- </table>
Optional classes
Add any of the following classes to the .table
base class.
.table-striped
Adds zebra-striping to any table row within the <tbody>
via the :nth-child
CSS selector (not available in IE7-8).
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
- <table class="table table-striped">
- …
- </table>
.table-bordered
Add borders and rounded corners to the table.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
Mark | Otto | @TwBootstrap | |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
- <table class="table table-bordered">
- …
- </table>
.table-hover
Enable a hover state on table rows within a <tbody>
.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
- <table class="table table-hover">
- …
- </table>
.table-condensed
Makes tables more compact by cutting cell padding in half.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
- <table class="table table-condensed">
- …
- </table>
Optional row classes
Use contextual classes to color table rows.
Class | Description |
---|---|
.success
|
Indicates a successful or positive action. |
.error
|
Indicates a dangerous or potentially negative action. |
.warning
|
Indicates a warning that might need attention. |
.info
|
Used as an alternative to the default styles. |
# | Product | Payment Taken | Status |
---|---|---|---|
1 | TB - Monthly | 01/04/2012 | Approved |
2 | TB - Monthly | 02/04/2012 | Declined |
3 | TB - Monthly | 03/04/2012 | Pending |
4 | TB - Monthly | 04/04/2012 | Call in to confirm |
- ...
- <tr class="success">
- <td>1</td>
- <td>TB - Monthly</td>
- <td>01/04/2012</td>
- <td>Approved</td>
- </tr>
- ...
Supported table markup
List of supported table HTML elements and how they should be used.
Tag | Description |
---|---|
<table>
|
Wrapping element for displaying data in a tabular format |
<thead>
|
Container element for table header rows (<tr> ) to label table columns
|
<tbody>
|
Container element for table rows (<tr> ) in the body of the table
|
<tr>
|
Container element for a set of table cells (<td> or <th> ) that appears on a single row
|
<td>
|
Default table cell |
<th>
|
Special table cell for column (or row, depending on scope and placement) labels |
<caption>
|
Description or summary of what the table holds, especially useful for screen readers |
- <table>
- <caption>...</caption>
- <thead>
- <tr>
- <th>...</th>
- <th>...</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>...</td>
- <td>...</td>
- </tr>
- </tbody>
- </table>
Buttons
Default buttons
Button styles can be applied to anything with the .btn
class applied. However, typically you'll want to apply these to only <a>
and <button>
elements for the best rendering.
Button | class="" | Description |
---|---|---|
btn |
Standard gray button with gradient | |
btn btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons | |
btn btn-info |
Used as an alternative to the default styles | |
btn btn-success |
Indicates a successful or positive action | |
btn btn-warning |
Indicates caution should be taken with this action | |
btn btn-danger |
Indicates a dangerous or potentially negative action | |
btn btn-inverse |
Alternate dark gray button, not tied to a semantic action or use | |
btn btn-link |
Deemphasize a button by making it look like a link while maintaining button behavior |
Cross browser compatibility
IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button
elements, rendering text gray with a nasty text-shadow that we cannot fix.
Button sizes
Fancy larger or smaller buttons? Add .btn-large
, .btn-small
, or .btn-mini
for additional sizes.
- <p>
- <button class="btn btn-large btn-primary" type="button">Large button</button>
- <button class="btn btn-large" type="button">Large button</button>
- </p>
- <p>
- <button class="btn btn-primary" type="button">Default button</button>
- <button class="btn" type="button">Default button</button>
- </p>
- <p>
- <button class="btn btn-small btn-primary" type="button">Small button</button>
- <button class="btn btn-small" type="button">Small button</button>
- </p>
- <p>
- <button class="btn btn-mini btn-primary" type="button">Mini button</button>
- <button class="btn btn-mini" type="button">Mini button</button>
- </p>
Create block level buttons—those that span the full width of a parent— by adding .btn-block
.
- <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
- <button class="btn btn-large btn-block" type="button">Block level button</button>
Disabled state
Make buttons look unclickable by fading them back 50%.
Anchor element
Add the .disabled
class to <a>
buttons.
- <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
- <a href="#" class="btn btn-large disabled">Link</a>
Heads up!
We use .disabled
as a utility class here, similar to the common .active
class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
Button element
Add the disabled
attribute to <button>
buttons.
- <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
- <button type="button" class="btn btn-large" disabled>Button</button>
One class, multiple tags
Use the .btn
class on an <a>
, <button>
, or <input>
element.
- <a class="btn" href="">Link</a>
- <button class="btn" type="submit">Button</button>
- <input class="btn" type="button" value="Input">
- <input class="btn" type="submit" value="Submit">
As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input
, use an <input type="submit">
for your button.
Button State
Use the data-loading-text="loading..."
attribute to create a loading state button.
Single button group
Wrap a series of buttons with .btn
in .btn-group
.
- <div class="btn-group">
- <button class="btn">Left</button>
- <button class="btn">Middle</button>
- <button class="btn">Right</button>
- </div>
Vertical button groups
Make a set of buttons appear vertically stacked rather than horizontally.
- <div class="btn-group btn-group-vertical">
- ...
- </div>
Labels and badges
Labels
Labels | Markup |
---|---|
Default |
<span class="label">Default</span>
|
Success |
<span class="label label-success">Success</span>
|
Warning |
<span class="label label-warning">Warning</span>
|
Important |
<span class="label label-important">Important</span>
|
Info |
<span class="label label-info">Info</span>
|
Inverse |
<span class="label label-inverse">Inverse</span>
|
Badges
Name | Example | Markup |
---|---|---|
Default | 1 |
<span class="badge">1</span>
|
Success | 2 |
<span class="badge badge-success">2</span>
|
Warning | 4 |
<span class="badge badge-warning">4</span>
|
Important | 6 |
<span class="badge badge-important">6</span>
|
Info | 8 |
<span class="badge badge-info">8</span>
|
Inverse | 10 |
<span class="badge badge-inverse">10</span>
|
Easily collapsible
For easy implementation, labels and badges will simply collapse (via CSS's :empty
selector) when no content exists within.
Miscellaneous Lightweight utility components
Wells
Use the well as a simple effect on an element to give it an inset effect.
- <div class="well">
- ...
- </div>
Optional classes
Control padding and rounded corners with two optional modifier classes.
- <div class="well well-large">
- ...
- </div>
- <div class="well well-small">
- ...
- </div>
Helper classes
Simple, focused classes for small display or behavior tweaks.
.pull-left
Float an element left
- class="pull-left"
- .pull-left {
- float: left;
- }
.pull-right
Float an element right
- class="pull-right"
- .pull-right {
- float: right;
- }
.muted
Change an element's color to #999
- class="muted"
- .muted {
- color: #999;
- }
.clearfix
Clear the float
on any element
- class="clearfix"
- .clearfix {
- *zoom: 1;
- &:before,
- &:after {
- display: table;
- content: "";
- }
- &:after {
- clear: both;
- }
- }
Standard pagination
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
- <div class="pagination">
- <ul>
- <li><a href="#">Prev</a></li>
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li><a href="#">Next</a></li>
- </ul>
- </div>
Fancy larger or smaller pagination? Add .pagination-large
, .pagination-small
, or .pagination-mini
for additional sizes.
Alignment
Add one of two optional classes to change the alignment of pagination links: .pagination-centered
and .pagination-right
.
- <div class="pagination pagination-centered">
- ...
- </div>
Styled CSS3 Checkboxes and Radio Buttons
ToolTips, PopHovers
data-html="true"
Tootip Example
Modals
A rendered modal with header, body, and set of actions in the footer.
Modal header
One fine body…
- <div class="modal hide fade">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h3>Modal header</h3>
- </div>
- <div class="modal-body">
- <p>One fine body…</p>
- </div>
- <div class="modal-footer">
- <a href="#" class="btn">Close</a>
- <a href="#" class="btn">Save changes</a>
- </div>
- </div>
- <!-- Button to trigger modal -->
- <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
- <!-- Modal -->
- <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h3 id="myModalLabel">Modal header</h3>
- </div>
- <div class="modal-body">
- <p>One fine body…</p>
- </div>
- <div class="modal-footer">
- <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
- <button class="btn">Save changes</button>
- </div>
- </div>
If a remote url is provided, content will be loaded via jQuery's load
method and injected into the .modal-body
. If you're using the data api, you may alternatively use the href
tag to specify the remote source. An example of this is shown below:
<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>
Alerts
Add dismiss functionality to all alert messages with this plugin.
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.Oh snap! You got an error!
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Close icon
Use the generic close icon for dismissing content like modals and alerts.
- <button class="close">×</button>
iOS devices require an href="#"
for click events if you would rather use an anchor.
- <a class="close" href="#">×</a>
Font Icons
Web Application Icons
- icon-adjust
- icon-asterisk
- icon-ban-circle
- icon-bar-chart
- icon-barcode
- icon-beaker
- icon-bell
- icon-bolt
- icon-book
- icon-bookmark
- icon-bookmark-empty
- icon-briefcase
- icon-bullhorn
- icon-calendar
- icon-camera
- icon-camera-retro
- icon-certificate
- icon-check
- icon-check-empty
- icon-cloud
- icon-cog
- icon-cogs
- icon-comment
- icon-comment-alt
- icon-comments
- icon-comments-alt
- icon-credit-card
- icon-dashboard
- icon-download
- icon-download-alt
- icon-edit
- icon-envelope
- icon-envelope-alt
- icon-exclamation-sign
- icon-external-link
- icon-eye-close
- icon-eye-open
- icon-facetime-video
- icon-film
- icon-filter
- icon-fire
- icon-flag
- icon-folder-close
- icon-folder-open
- icon-gift
- icon-glass
- icon-globe
- icon-group
- icon-hdd
- icon-headphones
- icon-heart
- icon-heart-empty
- icon-home
- icon-inbox
- icon-info-sign
- icon-key
- icon-leaf
- icon-legal
- icon-lemon
- icon-lock
- icon-unlock
- icon-magic
- icon-magnet
- icon-map-marker
- icon-minus
- icon-minus-sign
- icon-money
- icon-move
- icon-music
- icon-off
- icon-ok
- icon-ok-circle
- icon-ok-sign
- icon-pencil
- icon-picture
- icon-plane
- icon-plus
- icon-plus-sign
- icon-print
- icon-pushpin
- icon-qrcode
- icon-question-sign
- icon-random
- icon-refresh
- icon-remove
- icon-remove-circle
- icon-remove-sign
- icon-reorder
- icon-resize-horizontal
- icon-resize-vertical
- icon-retweet
- icon-road
- icon-rss
- icon-screenshot
- icon-search
- icon-share
- icon-share-alt
- icon-shopping-cart
- icon-signal
- icon-signin
- icon-signout
- icon-sitemap
- icon-sort
- icon-sort-down
- icon-sort-up
- icon-star
- icon-star-empty
- icon-star-half
- icon-tag
- icon-tags
- icon-tasks
- icon-thumbs-down
- icon-thumbs-up
- icon-time
- icon-tint
- icon-trash
- icon-trophy
- icon-truck
- icon-umbrella
- icon-upload
- icon-upload-alt
- icon-user
- icon-user-md
- icon-volume-off
- icon-volume-down
- icon-volume-up
- icon-warning-sign
- icon-wrench
- icon-zoom-in
- icon-zoom-out
Text Editor Icons
- icon-file
- icon-cut
- icon-copy
- icon-paste
- icon-save
- icon-undo
- icon-repeat
- icon-paper-clip
- icon-text-height
- icon-text-width
- icon-align-left
- icon-align-center
- icon-align-right
- icon-align-justify
- icon-indent-left
- icon-indent-right
- icon-font
- icon-bold
- icon-italic
- icon-strikethrough
- icon-underline
- icon-link
- icon-columns
- icon-table
- icon-th-large
- icon-th
- icon-th-list
- icon-list
- icon-list-ol
- icon-list-ul
- icon-list-alt
Directional Icons
- icon-arrow-down
- icon-arrow-left
- icon-arrow-right
- icon-arrow-up
- icon-chevron-down
- icon-circle-arrow-down
- icon-circle-arrow-left
- icon-circle-arrow-right
- icon-circle-arrow-up
- icon-chevron-left
- icon-caret-down
- icon-caret-left
- icon-caret-right
- icon-caret-up
- icon-chevron-right
- icon-hand-down
- icon-hand-left
- icon-hand-right
- icon-hand-up
- icon-chevron-up
Video Player Icons
- icon-play-circle
- icon-play
- icon-pause
- icon-stop
- icon-step-backward
- icon-fast-backward
- icon-backward
- icon-forward
- icon-fast-forward
- icon-step-forward
- icon-eject
- icon-fullscreen
- icon-resize-full
- icon-resize-small
Social Icons
- icon-phone
- icon-phone-sign
- icon-facebook
- icon-facebook-sign
- icon-twitter
- icon-twitter-sign
- icon-github
- icon-github-sign
- icon-linkedin
- icon-linkedin-sign
- icon-pinterest
- icon-pinterest-sign
- icon-google-plus
- icon-google-plus-sign
- icon-sign-blank
New Icons in 3.2
- icon-compass
- icon-collapse
- icon-collapse-top
- icon-expand
- icon-eur
- icon-euro (alias)
- icon-gbp
- icon-usd
- icon-xing-sign
- icon-youtube-play
- icon-dropbox
- icon-stackexchange
- icon-instagram
- icon-flickr
- icon-adn
- icon-bitbucket
- icon-renren
- icon-dollar (alias)
- icon-inr
- icon-rupee (alias)
- icon-jpy
- icon-yen (alias)
- icon-cny
- icon-renminbi (alias)
- icon-krw
- icon-bitbucket-sign
- icon-tumblr
- icon-tumblr-sign
- icon-long-arrow-down
- icon-long-arrow-up
- icon-long-arrow-left
- icon-long-arrow-right
- icon-apple
- icon-won (alias)
- icon-btc
- icon-bitcoin (alias)
- icon-file
- icon-file-text
- icon-sort-by-alphabet
- icon-sort-by-alphabet-alt
- icon-sort-by-attributes
- icon-windows
- icon-android
- icon-linux
- icon-dribbble
- icon-skype
- icon-foursquare
- icon-trello
- icon-female
- icon-sort-by-attributes-alt
- icon-sort-by-order
- icon-sort-by-order-alt
- icon-thumbs-up
- icon-thumbs-down
- icon-youtube-sign
- icon-youtube
- icon-xing
- icon-male
- icon-gittip
- icon-sun
- icon-moon
- icon-archive
- icon-bug
- icon-vk
- icon-weibo
Custom font Icons
Class Names
Font Icon examples
Rotated and Flipped Icons
normalicon-rotate-90
icon-rotate-180
icon-rotate-270
icon-flip-horizontal
icon-flip-vertical
Stacked Icons
icon-flag on icon-circle
icon-terminal on icon-sign-blank
Better Bulleted Lists
- New bulleted lists
- Fix some old bugs
- And deal with arbitrary
- Font sizes better
Place Font Awesome icons just about anywhere with the <i>
tag.
Increase the icon size by using the icon-large
(33% increase), icon-2x
,
icon-3x
, or icon-4x
classes.
icon-camera-retro
icon-camera-retro
icon-camera-retro
icon-camera-retro
Bordered & Pulled Icons
Use icon-border
and pull-right
or pull-left
for easy pull quotes or article graphics.
Use a few of the new styles together ... lots of new possibilities.
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities.
Animated Spinner
Use the icon-spin
class to get any icon to rotate. Works well with icon-spinner
and
icon-refresh
.
- <i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...
CSS3 animations aren't supported in IE7 - IE9.
Custom CSS
Anything you can do with CSS font styles, you can do with Font Awesome.
Complete Font icons documentation can be found here: FontAweseome Documentation