1. Simulor
  2. UI Elements

UI Elements

Buttons

Use the button classes on an <a>, <button>, or <input>element. Use a classes .btn-outline-**to quickly create a bordered buttons. Add .btn-roundedto default button to get rounded corners.

Button-Sizes

Add .btn-lg, .btn-smfor additional sizes.

Button-Disabled

Add the disabledattribute to <button>buttons.

Block Button

Create block level buttons,with by adding add .btn-block.

Button Group

Wrap a series of buttons with .btnin .btn-group.



Dropdown linkDropdown link
Dropdown linkDropdown link

Modals

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

Tabs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Accordions

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Cards

Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content. With supporting text below as a natural lead-in to additional content.

Button
Card image cap
Card title

Some quick example text to build on the card title.

  • Dapibus ac facilisis in
Card linkAnother link
Card image cap

Some quick example text to build on the card title and make up the bulk of the card's content. With supporting text below as a natural lead-in to additional content.

Button
Card title
Support card subtitle
Card image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

Card linkAnother link
More Cards

Badges

Badges scale to match the size of the immediate parent element by using relative font sizing and emunits.

PrimarySecondarySuccessDangerWarningInfoLightDark

Use the .badge-pillmodifier class to make badges more rounded (with a larger border-radiusand additional horizontal padding). Useful if you miss the badges from v3

PrimarySecondarySuccessDangerWarningInfoLightDark

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Single button dropdowns

Any single .btncan be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

ActionAnother actionSomething else here
ActionAnother actionSomething else here
ActionAnother actionSomething else here

Variant

The best part is you can do this with any button variant, too:

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

Dropright variation

Trigger dropdown menus at the right of the elements by adding .droprightto the parent element.

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

Dropup variation

Trigger dropdown menus above elements by adding .dropupto the parent element.

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

Split button dropdowns

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-splitfor proper spacing around the dropdown caret.

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

Dropleft variation

Trigger dropdown menus at the right of the elements by adding .dropleftto the parent element.

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

Menu alignment

Add .dropdown-menu-right to a .dropdown-menuto right align the dropdown menu.

ActionAnother actionSomething else here

Pagination

Provide pagination links for your site or app with the multi-page pagination component.

Default Pagination

Simple pagination inspired by Rdio, great for apps and search results.

Sizing

Add .pagination-lgor .pagination-smfor additional sizes.

Alignment

Change the alignment of pagination components with flexbox utilities.

Breadcrumb

Indicate the current page’s location within a navigational hierarchy.

  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data

Popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Tooltips

Four options are available: top, right, bottom, and left aligned.

Progress

Basic Example

Default progress bar.

25%
Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

Striped example

Uses a gradient to create a striped effect.

Size example

We only set a heightvalue on the .progress, so if you change that value the inner .progress-barwill automatically resize accordingly.