Modal
| Name | type | default | description |
|---|---|---|---|
| backdrop | boolean or the string 'static' |
'static' | Includes a modal-backdrop element. Alternatively, specify static for a
backdrop
which doesn't close the modal on click.
|
| keyboard | boolean | true | Closes the modal when escape key is pressed |
| onBeforeChange | function | undefined | Function that gets called before every change of modal state. If this function returns true, action is prevented. |
| All option defaults are configurable in 'Modal' provider and can be changed via attributes. | |||
<div class="modal fade" data-bs-modal="modal.exampleModal" data-backdrop="'static'" data-keyboard="false"> ... </div>
Dropdown
<div bs-dropdown="dropdown"> <button bs-dropdown-toggle class="btn btn-primary dropdown-toggle">Toggle dropdown</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
<a data-ng-click="dropdown=true;$event.stopPropagation()">Show dropdown by binding</a>
Auto placement & boundary element
Dropdown will be converted to 'dropup' if it would overflow given boundary element (red border).
<div bs-dropdown-boundary> <div bs-dropdown...> ... </div> </div>
Optionally, you can pass boundary element (jqLite instance) via 'boundary-element' attribute.
Tooltip
| Name | Type | Default | Description |
|---|---|---|---|
| animation | boolean | true | Apply a CSS fade transition to the tooltip |
| delay | number | object | 0 | Delay showing and hiding the tooltip (ms) If a number is supplied, delay is applied to both hide/show Object structure is: |
| html | boolean | false | Allow HTML in the tooltip. |
| placement | string | 'bottom' | How to position the tooltip - top | bottom | left | right | auto. |
| title | string | '' | Default title value if |
| trigger | string | 'hover focus' | How tooltip is triggered - click | hover | focus. You may pass multiple triggers; separate them with a space. |
| All option defaults are configurable in 'Tooltip' provider and can be changed via attributes. | |||
Static tooltip
<bs-tooltip placement="left">Tooltip on left</bs-tooltip> <bs-tooltip placement="top">Tooltip on top</bs-tooltip> <bs-tooltip placement="bottom">Tooltip on bottom</bs-tooltip> <bs-tooltip placement="right">Tooltip on right</bs-tooltip>
Four directions
<span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="left">Title left</span> <span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="right">Title right</span> <span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="top">Title top</span> <span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="bottom">Title bottom</span>
Auto placement & boundary element
Tooltip will be adjusted to display within boundary element (red border)
Title auto
<div bs-tooltip-boundary> <span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="auto"> Title auto </span> </div>
Trigger on click with bound html value & remote trigger
Title on click Remote trigger<span class="btn btn-secondary" bs-tooltip-toggle="tooltip" title="{{title}}
" html="true" trigger="click">Title on click</span>
<input type="text" ng-model="title"/>
<span class="btn btn-secondary" ng-click="tooltip=!tooltip">Remote trigger</span>
Create tooltips on all elements with [title] attribute
<button class="btn btn-secondary" title="Test">Hover me!</button>
-----
directive('title', ['bsTooltipFactory', function(bsTooltipFactory){
return bsTooltipFactory.customBindingDirective();
}]);
Popover
| Name | Type | Default | Description |
|---|---|---|---|
| animation | boolean | true | Apply a CSS fade transition to the popover |
| content | string | '' | Default content value if |
| delay | number | object | 0 | Delay showing and hiding the popover (ms) If a number is supplied, delay is applied to both hide/show Object structure is: |
| html | boolean | false | Allow HTML in the popover title/content. |
| placement | string | 'right' | How to position the popover - top | bottom | left | right | auto.
|
| title | string | '' | Default title value if |
| trigger | string | 'click' | How popover is triggered - click | hover | focus. You may pass multiple triggers; separate them with a space. |
Static popover
<bs-popover placement="top"> <bs-popover-title>Popover top</bs-popover-title> <bs-popover-content>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </bs-popover-content> </bs-popover>
Four directions
Popover on left
Popover on top
Popover on bottom
Popover on right
<span class="btn btn-secondary" bs-popover-toggle content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="left">Popover on left</span> <span class="btn btn-secondary" bs-popover-toggle content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">Popover on top</span> <span class="btn btn-secondary" bs-popover-toggle content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="bottom">Popover on bottom</span> <span class="btn btn-secondary" bs-popover-toggle content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="right">Popover on right</span>
Auto placement & boundary element
Popover will be adjusted to display within boundary element (red border)
Popover auto
<div bs-tooltip-boundary> <span class="btn btn-secondary" bs-tooltip title="title" placement="left auto"> Popover auto </span> </div>
Different trigger types
Popover on focus Popover on hover Remote trigger<span class="btn btn-secondary" bs-popover-toggle trigger="focus"...> Popover on focus </span> <span class="btn btn-secondary" bs-popover-toggle="popover" trigger="hover"...> Popover on hover </span> <span class="btn btn-secondary" ng-click="popover=!popover"...> Remote trigger </span>
Collapse
Collapse plugin requires ngAnimate to properly display collapse animations!
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.
<span class="btn btn-primary" ng-click="collapse=!collapse">Toggle collapse</span> <div bs-collapse="collapse"> <div class="well"> 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. </div> </div>
Accordion example
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.
<div class="panel-group" bs-collapse-group> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a role="button" ng-click="tab1=!tab1"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse" bs-collapse="tab1"> <div class="panel-body">...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title" ng-init="tab2=true"> <a class="collapsed" ng-click="tab2=!tab2"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse" bs-collapse="tab2"> <div class="panel-body">...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title" ng-init="tab3=true"> <a class="collapsed" ng-click="tab3=!tab3"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse" bs-collapse="tab3"> <div class="panel-body">...</div> </div> </div> </div>
Carousel
| Name | type | default | description |
|---|---|---|---|
| interval | number | 5000 | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
| pause | string | null | "hover" | If set to "hover", pauses the cycling of the carousel on mouseenter
and resumes the cycling of the carousel on mouseleave. If set to null,
hovering over the carousel won't pause it.
|
| wrap | boolean | true | Whether the carousel should cycle continuously or have hard stops. |
| keyboard | boolean | true |
Whether the carousel should react to keyboard events.
You need to set a tabindex attribute on carousel for this to work.
|
![First slide [900x500]](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNzc3OiM1NTUvdGV4dDpGaXJzdCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE2Njg3MWNkZWRlIHRleHQgeyBmaWxsOiM1NTU7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY2ODcxY2RlZGUiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMzA4IiB5PSIyNzAuNCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9nPjwvZz48L3N2Zz4=)
![Second slide [900x500]](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNjY2OiM0NDQvdGV4dDpTZWNvbmQgc2xpZGUKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNjY4YjJjZmYxNyB0ZXh0IHsgZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjQ1cHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE2NjhiMmNmZjE3Ij48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjxnPjx0ZXh0IHg9IjI2NC41IiB5PSIyNzAuNCI+U2Vjb25kIHNsaWRlPC90ZXh0PjwvZz48L2c+PC9zdmc+)
![Third slide [900x500]](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE2NjhiMmQxNmJiIHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY2OGIyZDE2YmIiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8+PGc+PHRleHQgeD0iMjk3LjUiIHk9IjI3MC40Ij5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==)
<div class="carousel" bs-carousel tabindex="0"> <bs-carousel-indicators></bs-carousel-indicators> <div class="carousel-inner"> <div class="item" bs-carousel-item> <img alt="..." src="..."/> </div> <div class="item" bs-carousel-item> <img alt="..." src="..."/> </div> </div> <a href="#" class="left carousel-control" bs-carousel-nav="left"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a href="#" class="right carousel-control" bs-carousel-nav="right"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
Toasts
<button type="button" class="btn btn-outline-primary mb-3" ng-click="$root.toast=true"> Show toast </button> <bs-toast visible="$root.toast"> <bs-toast-header> <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="ml-2 mb-1 close" ng-click="$root.toast=false"> <span>×</span> </button> </bs-toast-header> <bs-toast-body> Hello, world! This is a toast message. </bs-toast-body> </bs-toast>
| Name | Type | Default | Description |
|---|---|---|---|
| animation | boolean | true | Apply a CSS fade transition to the toast |
| All option defaults are configurable in 'Toasts' provider and can be changed via attributes. | |||