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.

  ├── css/
     ├── bootstrap.css
     ├── bootstrap.min.css
  ├── js/
     ├── bootstrap.js
     ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

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.

  1. <div class="row-fluid">
  2. <div class="span4">...</div>
  3. <div class="span8">...</div>
  4. </div>

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 @twitter
  1. <table class="table">
  2. </table>

Optional classes

Add any of the following classes to the .table base class.


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 @twitter
  1. <table class="table table-striped">
  2. </table>


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 @twitter
  1. <table class="table table-bordered">
  2. </table>


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 @twitter
  1. <table class="table table-hover">
  2. </table>


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 @twitter
  1. <table class="table table-condensed">
  2. </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
  1. ...
  2. <tr class="success">
  3. <td>1</td>
  4. <td>TB - Monthly</td>
  5. <td>01/04/2012</td>
  6. <td>Approved</td>
  7. </tr>
  8. ...

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
  1. <table>
  2. <caption>...</caption>
  3. <thead>
  4. <tr>
  5. <th>...</th>
  6. <th>...</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>...</td>
  12. <td>...</td>
  13. </tr>
  14. </tbody>
  15. </table>

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.

  1. <p>
  2. <button class="btn btn-large btn-primary" type="button">Large button</button>
  3. <button class="btn btn-large" type="button">Large button</button>
  4. </p>
  5. <p>
  6. <button class="btn btn-primary" type="button">Default button</button>
  7. <button class="btn" type="button">Default button</button>
  8. </p>
  9. <p>
  10. <button class="btn btn-small btn-primary" type="button">Small button</button>
  11. <button class="btn btn-small" type="button">Small button</button>
  12. </p>
  13. <p>
  14. <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  15. <button class="btn btn-mini" type="button">Mini button</button>
  16. </p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

  1. <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
  2. <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.

Primary link Link

  1. <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
  2. <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.

  1. <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
  2. <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.

  1. <a class="btn" href="">Link</a>
  2. <button class="btn" type="submit">Button</button>
  3. <input class="btn" type="button" value="Input">
  4. <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.

  1. <div class="btn-group">
  2. <button class="btn">Left</button>
  3. <button class="btn">Middle</button>
  4. <button class="btn">Right</button>
  5. </div>

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

  1. <div class="btn-group btn-group-vertical">
  2. ...
  3. </div>


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>


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.


Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!
  1. <div class="well">
  2. ...
  3. </div>

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I'm in a well!
  1. <div class="well well-large">
  2. ...
  3. </div>
Look, I'm in a well!
  1. <div class="well well-small">
  2. ...
  3. </div>

Helper classes

Simple, focused classes for small display or behavior tweaks.


Float an element left

  1. class="pull-left"
  1. .pull-left {
  2. float: left;
  3. }


Float an element right

  1. class="pull-right"
  1. .pull-right {
  2. float: right;
  3. }


Change an element's color to #999

  1. class="muted"
  1. .muted {
  2. color: #999;
  3. }


Clear the float on any element

  1. class="clearfix"
  1. .clearfix {
  2. *zoom: 1;
  3. &:before,
  4. &:after {
  5. display: table;
  6. content: "";
  7. }
  8. &:after {
  9. clear: both;
  10. }
  11. }

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.

  1. <div class="pagination">
  2. <ul>
  3. <li><a href="#">Prev</a></li>
  4. <li><a href="#">1</a></li>
  5. <li><a href="#">2</a></li>
  6. <li><a href="#">3</a></li>
  7. <li><a href="#">4</a></li>
  8. <li><a href="#">5</a></li>
  9. <li><a href="#">Next</a></li>
  10. </ul>
  11. </div>

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.


Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

  1. <div class="pagination pagination-centered">
  2. ...
  3. </div>

Styled CSS3 Checkboxes and Radio Buttons

ToolTips, PopHovers

You can activate HTML content inside the Tooltip and PopHover by adding the following attribute: data-html="true"

Tootip Example



A rendered modal with header, body, and set of actions in the footer.

  1. <div class="modal hide fade">
  2. <div class="modal-header">
  3. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  4. <h3>Modal header</h3>
  5. </div>
  6. <div class="modal-body">
  7. <p>One fine body…</p>
  8. </div>
  9. <div class="modal-footer">
  10. <a href="#" class="btn">Close</a>
  11. <a href="#" class="btn">Save changes</a>
  12. </div>
  13. </div>
Launch demo modal
  1. <!-- Button to trigger modal -->
  2. <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
  4. <!-- Modal -->
  5. <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  6. <div class="modal-header">
  7. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  8. <h3 id="myModalLabel">Modal header</h3>
  9. </div>
  10. <div class="modal-body">
  11. <p>One fine body…</p>
  12. </div>
  13. <div class="modal-footer">
  14. <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  15. <button class="btn">Save changes</button>
  16. </div>
  17. </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:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>


Add dismiss functionality to all alert messages with this plugin.

Holy guacamole! Best check yo self, you're not looking too good.
Default alert box! This is default style. Nothing special to see.
Info alert box! Also a blue one for tips and info highlights.
Warning alert box! Best check yo self, you're not looking too good.
Error alert box! Nice red alert when something goes wrong.


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.

Take this action Or do this

Close icon

Use the generic close icon for dismissing content like modals and alerts.

  1. <button class="close">&times;</button>

iOS devices require an href="#" for click events if you would rather use an anchor.

  1. <a class="close" href="#">&times;</a>

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

 custom-none  custom-bootstrap  custom-less_c  custom-w3c  custom-pencil  custom-pencil-2  custom-image  custom-image-2  custom-images  custom-pacman  custom-diamonds  custom-clubs  custom-spades  custom-tags  custom-tag  custom-folder-open  custom-folder  custom-library  custom-feed  custom-podcast  custom-connection  custom-coin  custom-pushpin  custom-location  custom-location-2  custom-map  custom-map-2  custom-history  custom-clock  custom-clock-2  custom-alarm  custom-alarm-2  custom-stopwatch  custom-bell  custom-calendar  custom-calendar-2  custom-screen  custom-laptop  custom-mobile  custom-mobile-2  custom-tablet  custom-tv  custom-spinner  custom-busy  custom-spinner-2  custom-spinner-3  custom-spinner-4  custom-spinner-5  custom-spinner-6  custom-redo  custom-undo  custom-zoom-out  custom-zoom-in  custom-search  custom-quotes-left  custom-users  custom-user  custom-users-2  custom-user-2  custom-bubbles  custom-bubbles-2  custom-bubble  custom-bubbles-3  custom-bubble-2  custom-bubbles-4  custom-wand  custom-stats  custom-bars  custom-bars-2  custom-list  custom-list-2  custom-numbered-list  custom-menu  custom-menu-2  custom-link  custom-earth  custom-happy  custom-happy-2  custom-smiley  custom-smiley-2  custom-tongue  custom-tongue-2  custom-sad  custom-sad-2  custom-wink  custom-wink-2  custom-grin  custom-grin-2  custom-cool  custom-eye  custom-eye-blocked  custom-eye-2  custom-switch  custom-angry  custom-angry-2  custom-cool-2  custom-evil  custom-evil-2  custom-shocked  custom-shocked-2  custom-confused  custom-confused-2  custom-neutral  custom-neutral-2  custom-wondering  custom-wondering-2  custom-spell-check  custom-checkmark  custom-checkmark-2  custom-checkbox-checked  custom-checkbox-unchecked  custom-checkbox-partial  custom-radio-checked  custom-radio-unchecked  custom-crop  custom-scissors  custom-font  custom-text-height  custom-text-width  custom-bold  custom-underline  custom-italic  custom-strikethrough  custom-right-to-left  custom-left-to-right  custom-code  custom-embed  custom-console  custom-new-tab  custom-html5  custom-html5-2  custom-css3  custom-chrome  custom-firefox  custom-IE  custom-opera  custom-safari  custom-IcoMoon  custom-earth-2  custom-target  custom-list-3  custom-smiley-3  custom-image-3  custom-equalizer  custom-link-2  custom-at  custom-switch-2  custom-apple  custom-paperclip  custom-code-2  custom-dashboard  custom-meter2  custom-meter  custom-rocket  custom-settings  custom-equalizer-2  custom-warning  custom-notification  custom-question  custom-info  custom-info-2  custom-blocked  custom-cancel-circle  custom-checkmark-circle  custom-spam  custom-enter  custom-exit  custom-shuffle  custom-tab  custom-quill  custom-forjq  custom-forphp

Font Icon examples

Rotated and Flipped Icons


Stacked Icons

icon-twitter on icon-check-empty
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.





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.

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.

Spinner icon when loading content...
  1. <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