Palette — Basics

Typography

Use semantically correct heading tags in order (h1-h6), to adhere to WCAG accessibility guidelines. If you need a different size than what is associated with the correct heading tag, you can use helper classes for the style you need. Just add classes .h1, .h2, .h3 etc for the size you need.

All pages should have a page title, like seen on this page (Palette — Basics at the very top). For this, use <h1 class="page-title">.

Sometimes you'll need a section title, like the above Typography title. Use <h2 class="header-title"> with supplementary margin helpers, if needed, for proper positioning.

We rely on quite a lot of .cards, and to get the appropriate .card-header style, like seen in the examples in this style guide, you need to wrap the card header in a <h6 class="my-0">.

For “normal” text paragraphs, use the <p> tag. If you need muted text, for form help texts or any other text that needs less attention, add the .text-muted class to your text element.

Headers for specific uses

Page Title

Section Title

Card Title

                    <h1 class="page-title">Page Title</h1>
                    <h2 class="header-title">Section Title</h2>
                    <h6 class="my-0">Card Title</h6>
                
Generic headers and paragraphs

What is Lorem Ipsum? <h1> or <p class="h1">

Where does it come from? <h2> or <p class="h2">

Yeah but where did it really come from? <h3> or <p class="h3">

Why do we use it? <h4> or <p class="h4">

Where can I get some? <h5> or <p class="h5">
The standard Lorem Ipsum <h6> or <p class="h6">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make ...<p>


                    <h1>What is Lorem Ipsum?</h1>
                    <h2>Where does it come from?</h2>
                    <h3>Yeah but where did it <em>really</em> come from?</h3>
                    <h4>Why do we use it?</h4>
                    <h5>Where can I get some?</h5>
                    <h6>The standard Lorem Ipsum</h6>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
                
Contextual type styling

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Sometimes we need to tell the user to press ctrl alt delete (or other keys)


                    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
                    <p><del>This line of text is meant to be treated as deleted text.</del></p>
                    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
                    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
                    <p><u>This line of text will render as underlined</u></p>
                    <p><small>This line of text is meant to be treated as fine print.</small></p>
                    <p><strong>This line rendered as bold text.</strong></p>
                    <p><em>This line rendered as italicized text.</em></p>
                    <p>Sometimes we need to tell the user to press <kbd>ctrl</kbd> <kbd>alt</kbd> <kbd>delete</kbd> (or other keys)</p>
                

Text and link colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Text color

Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.

Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Info: Maecenas sed diam eget risus varius blandit sit amet non magna.

Warning: Etiam porta sem malesuada magna mollis euismod.

Danger: Donec ullamcorper nulla non metus auctor fringilla.

White: Etiam porta sem malesuada ultricies vehicula.


                    <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
                    <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                    <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
                    <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p class="text-white bg-dark">Etiam porta sem malesuada ultricies vehicula.</p>
                
Link color

                    <a href="#" class="text-muted">Muted link</a>
                    <a href="#" class="text-primary">Primary link</a>
                    <a href="#" class="text-success">Success link</a>
                    <a href="#" class="text-info">Info link</a>
                    <a href="#" class="text-warning">Warning link</a>
                    <a href="#" class="text-danger">Danger link</a>
                

Background colors

Similar to the text color classes, easily set the background of an element to any contextual class. Anchor components (links) will darken on hover, just like the text classes. Background utilities do not set color on text, so in some cases you’ll want to use .text-* utilities.

Background color

Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.

Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Info: Maecenas sed diam eget risus varius blandit sit amet non magna.

Warning: Etiam porta sem malesuada magna mollis euismod.

Danger: Donec ullamcorper nulla non metus auctor fringilla.

Dark: Cras mattis consectetur purus sit amet fermentum.

Faded: Cras mattis consectetur purus sit amet fermentum.


                    <p class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                    <p class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                    <p class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</p>
                    <p class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p class="bg-dark text-white">Cras mattis consectetur purus sit amet fermentum.</p>
                    <p class="bg-faded">Cras mattis consectetur purus sit amet fermentum.</p>
                

Buttons

Buttons and links are very separate concepts. Always use a <button> when clicking will trigger an action, and an <a href="{link}"> when clicking will change the view or take the user out of the application.

The styling for buttons and links can be somewhat interchangeable. In fact you can make any element look like a button by adding the class .btn to an element. You can also make a button look like a link by combining the classes .btn and .btn-link. Make sure the context is very clear if you use styling tricks like this though. We don't want to trick the user into thinking clicking something will do one thing and then we do another.

Buttons

Pretty much any element can look like a button:

Link Not a link or a button

                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-secondary">Secondary</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-danger">Danger</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-link">Link</button>

                    <p>Pretty much any element can look like a button:</p>

                    <a class="btn btn-primary" href="#" role="button">Link</a>
                    <button class="btn btn-primary" type="submit">Button</button>
                    <input class="btn btn-primary" type="button" value="Input">
                    <input class="btn btn-primary" type="submit" value="Submit">
                    <input class="btn btn-danger" type="reset" value="Reset">
                    <span class="btn btn-primary">Not a link or a button</span>
                
Button variations

Outlined buttons with transparent background:

Button sizes:




                    <p>Outlined buttons with transparent background:</p>

                    <button type="button" class="btn btn-outline-primary">Primary</button>
                    <button type="button" class="btn btn-outline-secondary">Secondary</button>
                    <button type="button" class="btn btn-outline-success">Success</button>
                    <button type="button" class="btn btn-outline-danger">Danger</button>
                    <button type="button" class="btn btn-outline-warning">Warning</button>
                    <button type="button" class="btn btn-outline-info">Info</button>
                    <button type="button" class="btn btn-outline-light">Light</button>
                    <button type="button" class="btn btn-outline-dark">Dark</button>

                    <p>Button sizes:</p>

                    <button type="button" class="btn btn-primary btn-lg">Large button</button>
                    <button type="button" class="btn btn-primary btn-sm">Small button</button>
                    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
                
Button groups

You can even make button groups:

And groups of button groups:


                    <p>You can even make button groups:</p>

                    <div class="btn-group" role="group" aria-label="Basic example">
                        <button type="button" class="btn btn-secondary">Left</button>
                        <button type="button" class="btn btn-secondary">Middle</button>
                        <button type="button" class="btn btn-secondary">Right</button>
                    </div>

                    <p>And groups of button groups:</p>

                    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                        <div class="btn-group mr-2" role="group" aria-label="First group">
                            <button type="button" class="btn btn-secondary">1</button>
                            <button type="button" class="btn btn-secondary">2</button>
                            <button type="button" class="btn btn-secondary">3</button>
                            <button type="button" class="btn btn-secondary">4</button>
                        </div>
                        <div class="btn-group mr-2" role="group" aria-label="Second group">
                            <button type="button" class="btn btn-secondary">5</button>
                            <button type="button" class="btn btn-secondary">6</button>
                            <button type="button" class="btn btn-secondary">7</button>
                        </div>
                        <div class="btn-group" role="group" aria-label="Third group">
                            <button type="button" class="btn btn-secondary">8</button>
                        </div>
                    </div>
                

Icons

We use Font Awesome for all inline icons in our apps and sites. Displaying an icon is as easy as finding the right class and putting it into an i tag. Like this: <i class="fa fa-bolt"></i> .

If you need to adjust the size of the icon, supplement with either of the helper classes for icon size: .fa-lg, .fa-2x, .fa-3x, .fa-4x, .fa-5x. If you have a list of icons and need them to line up with equal width, use the helper class .fa-fw. Consult the Font Awesome 4.7.0 documentation if you need further modifications.

All icons
fa-500px
fa-address-book
fa-address-book-o
fa-address-card
fa-address-card-o
fa-adjust
fa-adn
fa-align-center
fa-align-justify
fa-align-left
fa-align-right
fa-amazon
fa-ambulance
fa-american-sign-language-interpreting
fa-anchor
fa-android
fa-angellist
fa-angle-double-down
fa-angle-double-left
fa-angle-double-right
fa-angle-double-up
fa-angle-down
fa-angle-left
fa-angle-right
fa-angle-up
fa-apple
fa-archive
fa-area-chart
fa-arrow-circle-down
fa-arrow-circle-left
fa-arrow-circle-o-down
fa-arrow-circle-o-left
fa-arrow-circle-o-right
fa-arrow-circle-o-up
fa-arrow-circle-right
fa-arrow-circle-up
fa-arrow-down
fa-arrow-left
fa-arrow-right
fa-arrow-up
fa-arrows
fa-arrows-alt
fa-arrows-h
fa-arrows-v
fa-asl-interpreting (alias)
fa-assistive-listening-systems
fa-asterisk
fa-at
fa-audio-description
fa-automobile (alias)
fa-backward
fa-balance-scale
fa-ban
fa-bandcamp
fa-bank (alias)
fa-bar-chart
fa-bar-chart-o (alias)
fa-barcode
fa-bars
fa-bath
fa-bathtub (alias)
fa-battery (alias)
fa-battery-0 (alias)
fa-battery-1 (alias)
fa-battery-2 (alias)
fa-battery-3 (alias)
fa-battery-4 (alias)
fa-battery-empty
fa-battery-full
fa-battery-half
fa-battery-quarter
fa-battery-three-quarters
fa-bed
fa-beer
fa-behance
fa-behance-square
fa-bell
fa-bell-o
fa-bell-slash
fa-bell-slash-o
fa-bicycle
fa-binoculars
fa-birthday-cake
fa-bitbucket
fa-bitbucket-square
fa-bitcoin (alias)
fa-black-tie
fa-blind
fa-bluetooth
fa-bluetooth-b
fa-bold
fa-bolt
fa-bomb
fa-book
fa-bookmark
fa-bookmark-o
fa-braille
fa-briefcase
fa-btc
fa-bug
fa-building
fa-building-o
fa-bullhorn
fa-bullseye
fa-bus
fa-buysellads
fa-cab (alias)
fa-calculator
fa-calendar
fa-calendar-check-o
fa-calendar-minus-o
fa-calendar-o
fa-calendar-plus-o
fa-calendar-times-o
fa-camera
fa-camera-retro
fa-car
fa-caret-down
fa-caret-left
fa-caret-right
fa-caret-square-o-down
fa-caret-square-o-left
fa-caret-square-o-right
fa-caret-square-o-up
fa-caret-up
fa-cart-arrow-down
fa-cart-plus
fa-cc
fa-cc-amex
fa-cc-diners-club
fa-cc-discover
fa-cc-jcb
fa-cc-mastercard
fa-cc-paypal
fa-cc-stripe
fa-cc-visa
fa-certificate
fa-chain (alias)
fa-chain-broken
fa-check
fa-check-circle
fa-check-circle-o
fa-check-square
fa-check-square-o
fa-chevron-circle-down
fa-chevron-circle-left
fa-chevron-circle-right
fa-chevron-circle-up
fa-chevron-down
fa-chevron-left
fa-chevron-right
fa-chevron-up
fa-child
fa-chrome
fa-circle
fa-circle-o
fa-circle-o-notch
fa-circle-thin
fa-clipboard
fa-clock-o
fa-clone
fa-close (alias)
fa-cloud
fa-cloud-download
fa-cloud-upload
fa-cny (alias)
fa-code
fa-code-fork
fa-codepen
fa-codiepie
fa-coffee
fa-cog
fa-cogs
fa-columns
fa-comment
fa-comment-o
fa-commenting
fa-commenting-o
fa-comments
fa-comments-o
fa-compass
fa-compress
fa-connectdevelop
fa-contao
fa-copy (alias)
fa-copyright
fa-creative-commons
fa-credit-card
fa-credit-card-alt
fa-crop
fa-crosshairs
fa-css3
fa-cube
fa-cubes
fa-cut (alias)
fa-cutlery
fa-dashboard (alias)
fa-dashcube
fa-database
fa-deaf
fa-deafness (alias)
fa-dedent (alias)
fa-delicious
fa-desktop
fa-deviantart
fa-diamond
fa-digg
fa-dollar (alias)
fa-dot-circle-o
fa-download
fa-dribbble
fa-drivers-license (alias)
fa-drivers-license-o (alias)
fa-dropbox
fa-drupal
fa-edge
fa-edit (alias)
fa-eercast
fa-eject
fa-ellipsis-h
fa-ellipsis-v
fa-empire
fa-envelope
fa-envelope-o
fa-envelope-open
fa-envelope-open-o
fa-envelope-square
fa-envira
fa-eraser
fa-etsy
fa-eur
fa-euro (alias)
fa-exchange
fa-exclamation
fa-exclamation-circle
fa-exclamation-triangle
fa-expand
fa-expeditedssl
fa-external-link
fa-external-link-square
fa-eye
fa-eye-slash
fa-eyedropper
fa-fa (alias)
fa-facebook
fa-facebook-f (alias)
fa-facebook-official
fa-facebook-square
fa-fast-backward
fa-fast-forward
fa-fax
fa-feed (alias)
fa-female
fa-fighter-jet
fa-file
fa-file-archive-o
fa-file-audio-o
fa-file-code-o
fa-file-excel-o
fa-file-image-o
fa-file-movie-o (alias)
fa-file-o
fa-file-pdf-o
fa-file-photo-o (alias)
fa-file-picture-o (alias)
fa-file-powerpoint-o
fa-file-sound-o (alias)
fa-file-text
fa-file-text-o
fa-file-video-o
fa-file-word-o
fa-file-zip-o (alias)
fa-files-o
fa-film
fa-filter
fa-fire
fa-fire-extinguisher
fa-firefox
fa-first-order
fa-flag
fa-flag-checkered
fa-flag-o
fa-flash (alias)
fa-flask
fa-flickr
fa-floppy-o
fa-folder
fa-folder-o
fa-folder-open
fa-folder-open-o
fa-font
fa-font-awesome
fa-fonticons
fa-fort-awesome
fa-forumbee
fa-forward
fa-foursquare
fa-free-code-camp
fa-frown-o
fa-futbol-o
fa-gamepad
fa-gavel
fa-gbp
fa-ge (alias)
fa-gear (alias)
fa-gears (alias)
fa-genderless
fa-get-pocket
fa-gg
fa-gg-circle
fa-gift
fa-git
fa-git-square
fa-github
fa-github-alt
fa-github-square
fa-gitlab
fa-gittip (alias)
fa-glass
fa-glide
fa-glide-g
fa-globe
fa-google
fa-google-plus
fa-google-plus-circle (alias)
fa-google-plus-official
fa-google-plus-square
fa-google-wallet
fa-graduation-cap
fa-gratipay
fa-grav
fa-group (alias)
fa-h-square
fa-hacker-news
fa-hand-grab-o (alias)
fa-hand-lizard-o
fa-hand-o-down
fa-hand-o-left
fa-hand-o-right
fa-hand-o-up
fa-hand-paper-o
fa-hand-peace-o
fa-hand-pointer-o
fa-hand-rock-o
fa-hand-scissors-o
fa-hand-spock-o
fa-hand-stop-o (alias)
fa-handshake-o
fa-hard-of-hearing (alias)
fa-hashtag
fa-hdd-o
fa-header
fa-headphones
fa-heart
fa-heart-o
fa-heartbeat
fa-history
fa-home
fa-hospital-o
fa-hotel (alias)
fa-hourglass
fa-hourglass-1 (alias)
fa-hourglass-2 (alias)
fa-hourglass-3 (alias)
fa-hourglass-end
fa-hourglass-half
fa-hourglass-o
fa-hourglass-start
fa-houzz
fa-html5
fa-i-cursor
fa-id-badge
fa-id-card
fa-id-card-o
fa-ils
fa-image (alias)
fa-imdb
fa-inbox
fa-indent
fa-industry
fa-info
fa-info-circle
fa-inr
fa-instagram
fa-institution (alias)
fa-internet-explorer
fa-intersex (alias)
fa-ioxhost
fa-italic
fa-joomla
fa-jpy
fa-jsfiddle
fa-key
fa-keyboard-o
fa-krw
fa-language
fa-laptop
fa-lastfm
fa-lastfm-square
fa-leaf
fa-leanpub
fa-legal (alias)
fa-lemon-o
fa-level-down
fa-level-up
fa-life-bouy (alias)
fa-life-buoy (alias)
fa-life-ring
fa-life-saver (alias)
fa-lightbulb-o
fa-line-chart
fa-link
fa-linkedin
fa-linkedin-square
fa-linode
fa-linux
fa-list
fa-list-alt
fa-list-ol
fa-list-ul
fa-location-arrow
fa-lock
fa-long-arrow-down
fa-long-arrow-left
fa-long-arrow-right
fa-long-arrow-up
fa-low-vision
fa-magic
fa-magnet
fa-mail-forward (alias)
fa-mail-reply (alias)
fa-mail-reply-all (alias)
fa-male
fa-map
fa-map-marker
fa-map-o
fa-map-pin
fa-map-signs
fa-mars
fa-mars-double
fa-mars-stroke
fa-mars-stroke-h
fa-mars-stroke-v
fa-maxcdn
fa-meanpath
fa-medium
fa-medkit
fa-meetup
fa-meh-o
fa-mercury
fa-microchip
fa-microphone
fa-microphone-slash
fa-minus
fa-minus-circle
fa-minus-square
fa-minus-square-o
fa-mixcloud
fa-mobile
fa-mobile-phone (alias)
fa-modx
fa-money
fa-moon-o
fa-mortar-board (alias)
fa-motorcycle
fa-mouse-pointer
fa-music
fa-navicon (alias)
fa-neuter
fa-newspaper-o
fa-object-group
fa-object-ungroup
fa-odnoklassniki
fa-odnoklassniki-square
fa-opencart
fa-openid
fa-opera
fa-optin-monster
fa-outdent
fa-pagelines
fa-paint-brush
fa-paper-plane
fa-paper-plane-o
fa-paperclip
fa-paragraph
fa-paste (alias)
fa-pause
fa-pause-circle
fa-pause-circle-o
fa-paw
fa-paypal
fa-pencil
fa-pencil-square
fa-pencil-square-o
fa-percent
fa-phone
fa-phone-square
fa-photo (alias)
fa-picture-o
fa-pie-chart
fa-pied-piper
fa-pied-piper-alt
fa-pied-piper-pp
fa-pinterest
fa-pinterest-p
fa-pinterest-square
fa-plane
fa-play
fa-play-circle
fa-play-circle-o
fa-plug
fa-plus
fa-plus-circle
fa-plus-square
fa-plus-square-o
fa-podcast
fa-power-off
fa-print
fa-product-hunt
fa-puzzle-piece
fa-qq
fa-qrcode
fa-question
fa-question-circle
fa-question-circle-o
fa-quora
fa-quote-left
fa-quote-right
fa-ra (alias)
fa-random
fa-ravelry
fa-rebel
fa-recycle
fa-reddit
fa-reddit-alien
fa-reddit-square
fa-refresh
fa-registered
fa-remove (alias)
fa-renren
fa-reorder (alias)
fa-repeat
fa-reply
fa-reply-all
fa-resistance (alias)
fa-retweet
fa-rmb (alias)
fa-road
fa-rocket
fa-rotate-left (alias)
fa-rotate-right (alias)
fa-rouble (alias)
fa-rss
fa-rss-square
fa-rub
fa-ruble (alias)
fa-rupee (alias)
fa-s15 (alias)
fa-safari
fa-save (alias)
fa-scissors
fa-scribd
fa-search
fa-search-minus
fa-search-plus
fa-sellsy
fa-send (alias)
fa-send-o (alias)
fa-server
fa-share
fa-share-alt
fa-share-alt-square
fa-share-square
fa-share-square-o
fa-shekel (alias)
fa-sheqel (alias)
fa-shield
fa-ship
fa-shirtsinbulk
fa-shopping-bag
fa-shopping-basket
fa-shopping-cart
fa-shower
fa-sign-in
fa-sign-language
fa-sign-out
fa-signal
fa-signing (alias)
fa-simplybuilt
fa-sitemap
fa-skyatlas
fa-skype
fa-slack
fa-sliders
fa-slideshare
fa-smile-o
fa-snapchat
fa-snapchat-ghost
fa-snapchat-square
fa-snowflake-o
fa-soccer-ball-o (alias)
fa-sort
fa-sort-alpha-asc
fa-sort-alpha-desc
fa-sort-amount-asc
fa-sort-amount-desc
fa-sort-asc
fa-sort-desc
fa-sort-down (alias)
fa-sort-numeric-asc
fa-sort-numeric-desc
fa-sort-up (alias)
fa-soundcloud
fa-space-shuttle
fa-spinner
fa-spoon
fa-spotify
fa-square
fa-square-o
fa-stack-exchange
fa-stack-overflow
fa-star
fa-star-half
fa-star-half-empty (alias)
fa-star-half-full (alias)
fa-star-half-o
fa-star-o
fa-steam
fa-steam-square
fa-step-backward
fa-step-forward
fa-stethoscope
fa-sticky-note
fa-sticky-note-o
fa-stop
fa-stop-circle
fa-stop-circle-o
fa-street-view
fa-strikethrough
fa-stumbleupon
fa-stumbleupon-circle
fa-subscript
fa-subway
fa-suitcase
fa-sun-o
fa-superpowers
fa-superscript
fa-support (alias)
fa-table
fa-tablet
fa-tachometer
fa-tag
fa-tags
fa-tasks
fa-taxi
fa-telegram
fa-television
fa-tencent-weibo
fa-terminal
fa-text-height
fa-text-width
fa-th
fa-th-large
fa-th-list
fa-themeisle
fa-thermometer (alias)
fa-thermometer-0 (alias)
fa-thermometer-1 (alias)
fa-thermometer-2 (alias)
fa-thermometer-3 (alias)
fa-thermometer-4 (alias)
fa-thermometer-empty
fa-thermometer-full
fa-thermometer-half
fa-thermometer-quarter
fa-thermometer-three-quarters
fa-thumb-tack
fa-thumbs-down
fa-thumbs-o-down
fa-thumbs-o-up
fa-thumbs-up
fa-ticket
fa-times
fa-times-circle
fa-times-circle-o
fa-times-rectangle (alias)
fa-times-rectangle-o (alias)
fa-tint
fa-toggle-down (alias)
fa-toggle-left (alias)
fa-toggle-off
fa-toggle-on
fa-toggle-right (alias)
fa-toggle-up (alias)
fa-trademark
fa-train
fa-transgender
fa-transgender-alt
fa-trash
fa-trash-o
fa-tree
fa-trello
fa-tripadvisor
fa-trophy
fa-truck
fa-try
fa-tty
fa-tumblr
fa-tumblr-square
fa-turkish-lira (alias)
fa-tv (alias)
fa-twitch
fa-twitter
fa-twitter-square
fa-umbrella
fa-underline
fa-undo
fa-universal-access
fa-university
fa-unlink (alias)
fa-unlock
fa-unlock-alt
fa-unsorted (alias)
fa-upload
fa-usb
fa-usd
fa-user
fa-user-circle
fa-user-circle-o
fa-user-md
fa-user-o
fa-user-plus
fa-user-secret
fa-user-times
fa-users
fa-vcard (alias)
fa-vcard-o (alias)
fa-venus
fa-venus-double
fa-venus-mars
fa-viacoin
fa-viadeo
fa-viadeo-square
fa-video-camera
fa-vimeo
fa-vimeo-square
fa-vine
fa-vk
fa-volume-control-phone
fa-volume-down
fa-volume-off
fa-volume-up
fa-warning (alias)
fa-wechat (alias)
fa-weibo
fa-weixin
fa-whatsapp
fa-wheelchair
fa-wheelchair-alt
fa-wifi
fa-wikipedia-w
fa-window-close
fa-window-close-o
fa-window-maximize
fa-window-minimize
fa-window-restore
fa-windows
fa-won (alias)
fa-wordpress
fa-wpbeginner
fa-wpexplorer
fa-wpforms
fa-wrench
fa-xing
fa-xing-square
fa-y-combinator
fa-y-combinator-square (alias)
fa-yahoo
fa-yc (alias)
fa-yc-square (alias)
fa-yelp
fa-yen (alias)
fa-yoast
fa-youtube
fa-youtube-play
fa-youtube-square

Tables

We have a few options for table styles, states, responsiveness and otherwise. If you are in doubt about which table style to use, please consult with a UX or front-end designer.

For simple, small tables with few and narrow columns, it should be sufficient to add the class .table to the <table> tag.

For tables with lots of rows and columns it’s recommended to add the classes .table-sm (less padding) and .table-hover to the <table> tag to save space while letting the user highlight entire rows on mouse hover.

If you need to convey a state or special attention to a table row, there are several contextual classes you can use. Try adding one of the classes .table-success, .table-warning, .table-danger and .table-info to the row’s <tr>.

Table
Normal table (with row states)
# First Name Last Name
1 Henning Støverud
2 Jagjit Singh
3 Knut‑Erik Lødding
4 Henning Støverud
5 Jagjit Singh
6 Knut‑Erik Lødding
7 Henning Støverud
8 Jagjit Singh
9 Knut‑Erik Lødding

                    <table class="table">
                        <caption>Normal table (w/ row states)</caption>
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">First Name</th>
                                <th scope="col">Last Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>Henning</td>
                                <td>Støverud</td>
                            </tr>
                            <tr class="table-info">
                                <th scope="row">2</th>
                                <td>Jagjit</td>
                                <td>Singh</td>
                            </tr>
                            <tr class="table-danger">
                                <th scope="row">3</th>
                                <td>Knut‑Erik</td>
                                <td>Lødding</td>
                            </tr>
                            <tr>
                                <th scope="row">4</th>
                                <td>Henning</td>
                                <td>Støverud</td>
                            </tr>
                            <tr>
                                <th scope="row">5</th>
                                <td>Jagjit</td>
                                <td>Singh</td>
                            </tr>
                            <tr class="table-warning">
                                <th scope="row">6</th>
                                <td>Knut‑Erik</td>
                                <td>Lødding</td>
                            </tr>
                            <tr>
                                <th scope="row">7</th>
                                <td>Henning</td>
                                <td>Støverud</td>
                            </tr>
                            <tr class="table-success">
                                <th scope="row">8</th>
                                <td>Jagjit</td>
                                <td>Singh</td>
                            </tr>
                            <tr>
                                <th scope="row">9</th>
                                <td>Knut‑Erik</td>
                                <td>Lødding</td>
                            </tr>
                        </tbody>
                    </table>
                
Responsive table
Responsive table (w/ less padding and hover highlight)
# First Name Last Name First Name Last Name First Name Last Name First Name Last Name First Name Last Name First Name Last Name First Name Last Name First Name Last Name
1 Henning Støverud Henning Støverud Henning Støverud Henning Støverud Henning Støverud Henning Støverud Henning Støverud Henning Støverud
2 Jagjit Singh Jagjit Singh Jagjit Singh Jagjit Singh Jagjit Singh Jagjit Singh Jagjit Singh Jagjit Singh
3 Knut‑Erik Lødding Knut‑Erik Lødding Knut‑Erik Lødding Knut‑Erik Lødding Knut‑Erik Lødding Knut‑Erik Lødding Knut‑Erik Lødding Knut‑Erik Lødding

                    <table class="table table-responsive">
                        <caption>Responsive table</caption>
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                [...]
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">1</th>
                                [...]
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                [...]
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                [...]
                            </tr>
                        </tbody>
                    </table>