## UI Bootstrap

## Buttons ngx-botstrap buttons

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}}
Left Middle Right

Radio & Uncheckable Radio

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

## Carousel ngx-bootstrap carousel

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 label

Nulla vitae elit libero, a pharetra augue mollis interdum.

### Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

### Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

## Collapse ngx-bootstrap collapse

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

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

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

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

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

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

Typeahead

##### This is: {{model | json}} Index: {{ index }}

    Model: {{selected | json}}

Type States