Components
Reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
Reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
Tron icludes 900+ font based icons - a combination of FontAesome and Flaticon Material Design Pack.
Flaticon Material Design Pack includes 423 icons in font format made by Google Inc.
For more information and list of available icons please see Flaticon pack demo page.
FontAwesome is the iconic font and CSS toolkit that gives you 479 scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS.
For more details and list of available icons please visit FontAwesome official website.
For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to add extra classes .left-aligned or .right-aligned for proper spacing.
Use .icon-left and .icon-right classes on .btn for better icons alinghment inside buttons.
// Flaticon
// FontAwesome
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
Toggleable, contextual menu for displaying lists of links. It requires dropdown JavaScript plugin. Please follow the link to read more from official Bootstrap documnetation.
Wrap the dropdown's trigger and the dropdown menu within the By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add Add a header to label sections in any dropdown menu. Add Group a series of buttons together on a single line with the Wrap a series of buttons with Instead of applying button sizing classes to every button in a group, just add Place a Make a set of buttons appear vertically stacked rather than horizontally. Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group. Just wrap a series of For To use justified button groups with Use any button to trigger a dropdown menu by placing it within a Button dropdowns require the dropdown plugin to be included in your version of Bootstrap. Use Button dropdowns work with buttons of all sizes. Trigger dropdown menus above elements by adding Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use Place one add-on or button on either side of an input. You may also place one on both sides of an input. Make sure to use Tron does not support multiple add-ons on a single side. Add the relative form sizing classes to the Place any checkbox or radio option within an input group's addon instead of text. Buttons in input groups are a bit different and require one extra level of nesting. Instead of Tron restyles default navs available in Bootstrap. They have shared markup, starting with the base Note the For tabs with tabbable areas, you must use the tabs JavaScript plugin. Add Add Add Take that same HTML, but use Pills are also vertically stackable. Just add Easily make pills equal widths of their parent at screens wider than 768px with For any nav component (tabs or pills), add Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin. Navbars are components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases. Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can: The responsive navbar requires the Bootstrap's collapse plugin. Use Add Place form content inside Add the Wrap strings of text in an element with For folks using standard links that are not within the regular navbar navigation component, use the Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through Provide pagination links for your site with the multi-page pagination component, or the simpler pager alternative. Links are customizable for different circumstances. Use Quick previous and next links for simple pagination implementations with light markup and styles. By default, the pager centers links. Make sure you added Alternatively, you can align each link to the sides: Pager links also use the general Add any of the below mentioned modifier classes to change the appearance of a label. Highlight new or unread items by adding a When there is no content inside, badges will automatically collapse (via CSS's Badges automatically adapts to active navs Standard Bootstrap component that can optionally extend the entire viewport to showcase key content on your site. This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. To make the jumbotron full width, and without rounded corners, place it outside all Normally Normally Thumbnail component is for display grids of images, videos, text, and more. By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup. You can add any kind of HTML content like headings, paragraphs, or buttons into thumbnails. Also add Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco. Alert messages provide contextual feedback messages for typical user actions. For dismissal functionality, use the alerts jQuery plugin. Wrap any text and an optional close button in Alerts can be dissmissed (removed from the page) by adding an optional Be sure to use the To make the alert full width, and without rounded corners, place it outside all .containers and instead add class Help you visually provide up-to-date feedback on the progress of a workflow or action. Default progress bar. Remove the Uses a gradient to create a striped effect. Not available in IE8. Add Add Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content. The default media allow to float a media object (images, video, audio) to the left or right of a content block. Add Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Component for displaying lists of elements. Can be used as side navigation if it's linked items. The most basic list group is simply an unordered list with list items, and the proper classes. Add the badge to any list group item and it will automatically be positioned on the right. Use anchor tags instead of list items (that also means a parent Use contextual classes to style list items, default or linked. You can place nearly any HTML within, even for linked list groups like the one below. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Use the panel component to put your DOM element in a box. By default, all the Easily add a heading container to your panel with Wrap buttons or secondary text in Simply add Easily include full-width list groups within any panel. This is quite new Bootstrap feature. It allows browsers to determine video or slideshow dimensions based on the width of their containing block that will properly scale on any device. Rules are directly applied to wth
.dropdown class.
Alignment
.dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
Headers
Disabled menu items
.disabled to a in the dropdown to disable the link.
Button groups
.button group.Basic example
.btn in .btn-group.
Sizing
.btn-group-lg, .btn-group-sm or .btn-group-xs to the .btn-group.
Nesting
.btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
Vertical variation
...
Justified button groups
.btns in .btn-group.btn-group-justified..btn-outlined add .btn-group-outlined to nesting .btn-group in order to remove left border.With
elements elements, you must wrap each button in a button group.
Button dropdowns
.btn-group and providing the proper dropdown menu markup.Plugin dependency
Single button dropdowns
.icon-right class on .dropdown-toggle for propper paddings.
Split button dropdowns
Sizing
Dropup variation
.dropup to the parent.
Input groups
.input-group with an .input-group-addon to prepend or append elements to a single .form-control.Basic example
.addon-left, .addon-right or both classes on .form-control for propper addons positioning.
Tron does not support multiple form-controls in a single input group.
.00
.00
Sizing
.input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
@
@
@
Checkboxes and radio addons
Button addons
.input-group-addon, you'll need to use .input-group-btn to wrap the buttons.
Buttons with dropdowns
Segmented buttons
Navs
.nav class, as well as shared states. Swap modifier classes to switch between each style.Tabs
.nav-tabs class requires the .nav base class.Requires JavaScript tabs plugin
Left aligned (default)
Center aligned
.nav-center class to .nav to center tabs.
Right aligned
.nav-right class to .nav to right align tabs.
Vertical tabs
.nav-vertical class to .nav to make tabs stacked vertically.
Pills
.nav-pills instead:
Vertically stacked
.nav-stacked.
Justified pills
.nav-justified. On smaller screens, the pills are stacked.
Disabled links
.disabled for gray links and no hover effects.
Using dropdowns
Tabs with dropdowns
Pills with dropdowns
Navbar
Default navbar
Overflowing content
@grid-float-breakpoint variable in Bootstrap's variables.less. If you change this make sure you also change @navbar-collapsed-state variable in Tron's variables.less so that they have the same value.
Plugin dependency
Logo image
.navbar-logo instead of .navbar-brand to place logo image within navbar. Default logo dimensions are 130x48px and can be changed inside variables.less under navbar section.
Condensed navbar
.navbar-condensed to .navbar to make navbar more compact by reducing its height.
Forms
.navbar-form for proper vertical alignment and collapsed behavior in narrow viewports.
Buttons
.navbar-btn class to or along with other standard button classes elements to vertically center them in the navbar.
Text
.navbar-text class, usually tag for proper alignment and color.
Non-nav links
.navbar-link class to add the proper colors for the default and inverse navbar options.
Breadcrumbs
:before and content.
Pagination
Default pagination
Disabled and active states
.disabled for disabled links and .active to indicate the current page. It's recommended to swap out active or disabled anchors for to remove click functionality while retaining intended styles.
Pager
Default example
.icon-right or .icon-left classes to element for proper caret alignment and padding.Aligned links
Optional disabled state
.disabled utility class from the pagination. It's recommended to swap out active or disabled anchors for to remove click functionality while retaining intended styles.
Labels
Example
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Available variations
Default Primary Success Info Warning Danger
Default
Primary
Success
Info
Warning
Danger
Badges
to links, tabs, pills and more.Self collapsing
:empty selector). Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.Badges variations
.active state and when inside .btn. They turn white, but if you want to preserve default look just add .badge-default to .badge element.
Jumbotron
Hello, world!
.containers and instead add a .container within.
...
Page / Block headers
Page header
element with subheading wrapped in tag. Used as main page heading.
Example page header Subtext for header
Example page header Subtext for header
Block header
or element with subheading wrapped in tag. Used as heading for page section.
Subtext for headerExample block header
Subtext for headerExample page header
Thumbnails
Default example
...
Custom content
.with-caption class to .thumbnail to remove image bottom border radius
Thumbnail label
Thumbnail label
Alerts
Examples
.alert and one of the five contextual classes: .alert-primary, .alert-success, .alert-info, .alert-warning or .alert-danger for basic alert messages.
Primary variant! Lorem ipsum dolor sit amet, consectetur adipisicing.
Success variant! Lorem ipsum dolor sit amet, consectetur adipisicing.
Info variant! Lorem ipsum dolor sit amet, consectetur adipisicing.
Warning variant! Lorem ipsum dolor sit amet, consectetur adipisicing.
Danger variant! Lorem ipsum dolor sit amet, consectetur adipisicing.
...
...
...
...
...
Dismissable alerts
.alert-dismissable and close button.
Dismissable alert! Lorem ipsum dolor sit amet, consectetur adipisicing.
Dismissable alert! Lorem ipsum dolor sit amet, consectetur adipisicing.
Ensure proper behavior across all devices
element with the data-dismiss="alert" data attribute.Links in alerts
Alert message! This alert needs your attention, it's extremely important.
Full width alerts
.alert-fullwidth to .alertand place a .container within.
Full width alert! Lorem ipsum dolor sit amet, consectetur adipisicing.
...
Progress bars
Basic example
With label
.sr-only class from within the progress bar to show a visible percentage.
Contextual alternatives
Striped
Animated
.active to .progress-striped to animate the stripes. Not available in IE9 and below.
Stacked
.progress-stacked to .progress and place multiple bars into it to stack them.
Media object
Default media
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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 commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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
...
Media list
.media-list to
Media heading
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
...
List group
Basic example
Badges
Linked items
instead of an
Contextual classes
Custom content
List group item heading
List group item heading
List group item heading
Panels
Basic example
.panel does is apply some basic border and padding to contain some content.
Basic panel example
Basic panel example
Panel with heading
.panel-heading. You may also include any - with a .panel-title class to add a pre-styled heading.
Panel heading without title
Panel content
Panel title
Panel content
Panel heading without title
Panel content
Panel title
Panel content
Panel with footer
.panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations.
Panel content
Panel content
Contextual alternatives
.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning or .panel-danger to .panel element.
Panel Primary
Panel content
Panel Primary
Panel content
Panel Success
Panel content
Panel Info
Panel content
Panel Warning
Panel content
Panel Danger
Panel content
...
...
...
...
...
...
With list groups
Panel heading
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
Panel heading
...
Responsive Embed
Use the well as a simple effect on an element.
Look, I'm in a well!
Control padding and rounded corners with two optional modifier classes.
Look, I'm in a large well!
Look, I'm in a small well!
Update your browser to view this website correctly. Update my browser now