UI Bootstrap

Buttons ngx-botstrap buttons

  • You can put anything here

There are two directives that can make a group of buttons behave like a set of checkboxes, radio buttons, or a hybrid where radio buttons can be unchecked.


Single toggle

Default static button with two states
Status - {{ singleModel }}

Checkbox

Checkbox-like buttons set with variable states
Status - {{checkModel | json}}

Radio & Uncheckable Radio

Radio buttons with checked/unchecked states
Status - {{radioModel || 'null'}}

Carousel ngx-bootstrap carousel

  • You can put anything here

A slideshow component for cycling through elements—images or slides of text—like a carousel. Nested carousels are not supported.

Optional captions

Add captions to your slides easily with the .carousel-caption element within any <slide>. Place just about any optional HTML within there and it will be automatically aligned and formatted.

First slide

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

 Second slide

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 Third slide

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Collapse ngx-bootstrap collapse

  • You can put anything here

Nunc nec porta felis. Curabitur non fringilla ipsum, quis mollis metus. Etiam mauris elit, iaculis quis dapibus et, luctus id erat. Sed ac rutrum est, a bibendum nibh. Phasellus rhoncus imperdiet neque in tincidunt. Fusce nibh tellus, laoreet a orci in, auctor semper leo. Sed turpis odio, lobortis in orci et, finibus placerat nulla. Maecenas vehicula ante sit amet lacus placerat, non congue nibh tristique.

Dropdown ngx-bootstrap dropdown

  • You can put anything here

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included dropdown directives.

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within dropdown. Dropdowns can be triggered from <a> or<button>elements to better fit your potential needs. Read more..



Dropdown links with icon

Adding .dm-icon class to the .dropdown-menu will enable extra room for icons in dropdown links.



Alignment



Dropups - Trigger dropdown menus above elements



Split Button Dropdowns

Pagination ngx-bootstrap pagination

  • You can put anything here

Pagination - provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Pager - quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Default


The selected page no: {{currentPage}}/{{smallnumPages}}


States & Limits

Page: {{bigCurrentPage}} / {{numPages}}


Pager



Custom

Popover ngx-bootstrap popover

  • You can put anything here

Add small overlay content, like those found in iOS, to any element for housing secondary information.

Four directions


Four positioning options are available: top, right, bottom, and left aligned. Besides that, auto option may be used to detect a position that fits the component on screen.


Popover on Mouse Hover


Progressbar ngx-bootstrap progressbar

  • You can put anything here

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Static

22%
166 / 200

Dynamic

{{dynamic}} / {{max}} No animation {{dynamic}}% Object (changes type based on value) {{type}} !!!Watch out !!!

Stacked


Tabs ngx-bootstrap tabs

  • You can put anything here

Static tabs

Static content Static content 1 Static content 2 Click here! I've got an HTML heading, and a select callback. Pretty cool!
In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuada pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massa imperdiet quam. Pellentesque commodo eros a enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Phasellus a est. Pellentesque commodo eros a enim. Cras ultricies mi eu turpis hendrerit fringilla. Donec mollis hendrerit risus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Praesent egestas neque eu enim. In hac habitasse platea dictumst.
Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet est. Praesent ac massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla porta dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Etiam rhoncus. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Cras id dui. Curabitur turpis. Etiam ut purus mattis mauris sodales aliquam. Aenean viverra rhoncus pede. Nulla sit amet est. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Praesent ac sem eget est egestas volutpat. Cras varius. Morbi mollis tellus ac sapien. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Fusce vel dui.Morbi mattis ullamcorper velit. Etiam rhoncus. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Cras id dui. Curabitur turpis. Etiam ut purus mattis mauris sodales aliquam. Aenean viverra rhoncus pede. Nulla sit amet est. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Praesent ac sem eget est egestas volutpat. Cras varius. Morbi mollis tellus ac sapien. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Fusce vel dui.

Tooltip ngx-bootstrap tooltip

Tooltips Positions

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

Optional Colors Schemes

Typeahead ngx-bootstrap typeahead

  • You can put anything here

Typeahead

This is: {{model | json}} Index: {{ index }}
 
Model: {{selected | json}}