Bootstrap Tag helpers

Free ASP .NET Core Mvc Tag Helpers for all major Bootstrap Components and JavaScript plugins. Here you will find an overview of these Tag Helpers.

To create a Bootstrap Modal, add the following Tag Helper:

To open the modal from a button, add the bootstrap-toggle-modal attribute to the button with the id of the modal as value:

Related Tag Helpers:

  • <bootstrap-modal-header> - denotes the Modal's header section.
  • <bootstrap-modal-body> - denotes the Modal's content section.
  • <bootstrap-modal-footer> - denotes the Modal's footer section.

Applicable attributes:

  • Animation can be added to the Modal by adding the class "fade" to it.
  • data-backdrop - true (default)/false/"static" - includes a modal-backdrop element. Specify "static" for a backdrop which doesn't close the modal on click.
  • data-keyboard - true (default)/false - closes the modal when escape key is pressed.
  • data-show - true (default)/false - shows the modal when initialized.
  • size - "xs"/"sm"/"lg". If size is not set, the size of the widget will be normal.

Methods:

$().modal('toggle')
$().modal('show')
$().modal('hide')
$().modal('handleUpdate')

Events:

show.bs.modal
shown.bs.modal
hide.bs.modal
hidden.bs.modal
loaded.bs.modal

To create a Bootstrap Dropdown, add the following Tag Helper:

You can add more Dropdown options by inserting more <bootstrap-dropdown-menu-item> Tag Helpers.

Related Tag Helpers:

  • <bootstrap-dropdown-label> - denotes the Dropdown's label (button). Its content can be set via the content attribute.
  • <bootstrap-dropdown-menu> - denotes the container (popup) for the Dropdown's items. It has a labelledby attribute that should be set to the id of the <bootstrap-dropdown-label> to denote connection between them.
  • <bootstrap-dropdown-menu-item> - denotes a Dropdown item.
  • <bootstrap-dropdown-menu-separator> - denotes a separator between Dropdown items.

Methods:

$().dropdown('toggle')

Events:

show.bs.dropdown
shown.bs.dropdown
hide.bs.dropdown
hidden.bs.dropdown

Tab

To create a Bootstrap togglable Tab, add the following Tag Helper:

To add more tabs to this sample Tab, insert <bootstrap-tab> Tag Helpers in <bootstrap-tabs-nav> and <bootstrap-tab-pane> Tag Helpers to <bootstrap-tabs-content>. These act as tab header and tab content sections respectively.

Related Tag Helpers:

  • <bootstrap-tabs-nav> - denotes the Tab's header section.
  • <bootstrap-tab> - denotes a Tab's tab in the header section. The attribute active denotes if the tab is selected.
  • <bootstrap-tabs-content> - denotes the Tab's content section.
  • <bootstrap-tab-pane> - denotes a Tab's content panel in the content section. The attribute active denotes if the content panel is visible. If the class "fade" is added, selection animation will be enabled.

Methods:

$().tab('show')

Events:

hide.bs.tab
show.bs.tab
hidden.bs.tab
shown.bs.tab

Tooltip

To create a Bootstrap Tooltip, add the attribute bootstrap-tooltip to an existing tag or Tag Helper. The value of the attribute specifies the tooltip's content. Supported tags are: <div>, <img>, <span>, <nav>, <button>, <a>, <p>, <h1>, <h2>, <h3>, <h4>, <h5> and <h6>

Applicable attributes:

  • data-animation - true (default)/false - apply a CSS fade transition to the tooltip.
  • data-container - string/false - appends the tooltip to a specific element. Example: data-container="body".
  • data-delay - number/object - delay showing and hiding the tooltip (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: delay: { "show": 500, "hide": 100 }.
  • data-html - true/false (default) - insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
  • data-placement - "top" (default)/"left"/"right"/"bottom"/"auto"/function - sets the tooltip's position relative to the host element. When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance.
  • data-selector - string/false (default) - if a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added.
  • data-trigger - "click"/"hover"/"focus"/"manual" (default is "hover focus") - how tooltip is triggered. You may pass multiple triggers; separate them with a space. "manual" cannot be combined with any other trigger.
  • data-viewport - string/object/function (default is { selector: 'body', padding: 0 }) - keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }. If a function is given, it is called with the triggering element DOM node as its only argument. The this context is set to the tooltip instance.

Methods:

$().tooltip('show')
$().tooltip('hide')
$().tooltipal('toggle')
$().tooltip('destroy')

Events:

show.bs.tooltip
shown.bs.tooltip
hide.bs.tooltip
hidden.bs.tooltip
inserted.bs.tooltip

Popover

To create a Bootstrap Popover, add the attribute bootstrap-popover to an existing tag or Tag Helper. Supported tags are: <div>, <img>, <span>, <nav>, <button>, <a>, <p>, <h1>, <h2>, <h3>, <h4>, <h5> and <h6>

Applicable attributes:

  • data-animation - true (default)/false - apply a CSS fade transition to the popover.
  • data-container - string/false - appends the popover to a specific element. Example: data-container="body".
  • data-content - string (default is "")/function - sets the popover's content. If a function is given, it will be called with its this reference set to the element that the popover is attached to.
  • data-delay - number/object - delay showing and hiding the popover (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: delay: { "show": 500, "hide": 100 }.
  • data-html - true/false (default) - insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
  • data-placement - "top" (default)/"left"/"right"/"bottom"/"auto"/function - sets the popover's position relative to the host element. When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the popover instance.
  • data-selector - string/false (default) - if a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added.
  • data-title (alternative to title) - string (default is "")/function - sets the popover's title. If a function is given, it will be called with its this reference set to the element that the popover is attached to.
  • data-trigger - "click"/"hover"/"focus"/"manual" (default is "hover focus") - how popover is triggered. You may pass multiple triggers; separate them with a space. "manual" cannot be combined with any other trigger.
  • data-viewport - string/object/function (default is { selector: 'body', padding: 0 }) - keeps the popover within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }. If a function is given, it is called with the triggering element DOM node as its only argument. The this context is set to the popover instance.
  • title (alternative to data-title) - string (default is "")/function - sets the popover's title. If a function is given, it will be called with its this reference set to the element that the popover is attached to.

Methods:

$().popover(show)
$().popover(hide)
$().popover(toggle)
$().popover(destroy)

Events:

show.bs.popover
shown.bs.popover
hide.bs.popover
hidden.bs.popover
inserted.bs.popover

Alert

To create a Bootstrap Alert, add the following Tag Helper:

Related Tag Helpers:

  • <bootstrap-alert-close> - denotes the Alert's close button.

Applicable attributes:

  • The color scheme of the Alert can be changed by adding the class "alert-success", "alert-info", "alert-warning" or "alert-danger".
    To denote that the Alert can be closed, add the "alert-dismissible" class.
    Enable animation by adding the classes "fade", "in" and/or "out".

Methods:

$().alert('close')

Events:

close.bs.alert
closed.bs.alert

Button

To create a Bootstrap Button, add the following Tag Helper:

Related Tag Helpers:

  • <bootstrap-button-group> - enclose several <bootstrap-button> Tag Helpers in this Tag Helper to create a button group.

Applicable attributes:

  • autocomplete - set this attribute to "off" for cross-browser compatibility.
  • data-toggle - "button" (for a single button)/"buttons" (for a button group).
  • The class "active" has to be applied to pre-toggled buttons. To change the button's color scheme (template), add the class "btn-default", "btn-primary", "btn-success", "btn-info", "btn-warning", "btn-danger" or "btn-link".

Methods:

$().button('toggle')
$().button('reset')

Collapse

To create a Bootstrap Collapse, add the following Tag Helper:

Applicable attributes:

  • data-parent - false (default)/selector - if a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown.
  • data-toggle - toggles the collapsible element on invocation.
  • trigger - selector - denotes the element that toggles the Collapse.

Methods:

$().collapse('toggle')
$().collapse('show')
$().collapse('hide')

Events:

show.bs.collapse
shown.bs.collapse
hide.bs.collapse
hidden.bs.collapse

To create a Bootstrap Carousel, add the following Tag Helper:

Related Tag Helpers:

  • <bootstrap-carousel-indicators> - denotes the container of Carousel's indicators.
  • <bootstrap-carousel-indicator> - denotes a Carousel indicator. Applicable attributes:
    • active - denotes the initially selected indicator.
    • target - has to be set to the selector of the Carousel that the indicator controls.
  • <bootstrap-carousel-items> - denotes the container of Carousel's items.
  • <bootstrap-carousel-item> - denotes a Carousel item. Its active attribute denotes the initially shown item.
  • <bootstrap-carousel-caption> - specifies a Carousel item's caption.
  • <bootstrap-carousel-control> - denotes a Carousel control arrow. Applicable attributes:
    • slide - specifies which item to go to when the arrow is clicked ("prev"/"next").
    • target - has to be set to the selector of the Carousel that the arrow controls.
    • type - specifies the position of the arrow ("left"/"right").

Applicable attributes:

  • Animation can be added to the Carousel by adding the class "slide" to it.
  • data-interval - number (default 5000)/false - the amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
  • data-pause - string (default "hover") - pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
  • data-wrap - true (default)/false - whether the carousel should cycle continuously or have hard stops.
  • data-keyboard - true (default)/false - whether the carousel should react to keyboard events.

Methods:

$().carousel('cycle')
$().carousel('pause')
$().carousel(number) number (pass it to the .carousel() function)
$().carousel('prev')
$().carousel('next')

Events:

slide.bs.carousel
slid.bs.carousel

Other Bootstrap Components

Input group

To create a Bootstrap Input group, add the following Tag Helper:

Applicable classes:

input-group-sm, input-group-lg

Related Tag Helpers:

  • <bootstrap-input-group-addon> - denotes an Input group addon.

To denote that the input and the <bootstrap-input-group-addon> Tag Helper in the Input group are connected, set the input's "aria-describedby" attribute to the id of the addon.

To create a Bootstrap Nav, add the following Tag Helper:

Applicable classes:

nav-tabs (alternative to "nav-pills"), nav-pills (alternative to "nav-tabs"), nav-justified, "nav-stacked

Related Tag Helpers:

  • <bootstrap-nav-item> - denotes a Nav item.
    Applicable classes: active - if added, the item will be initially selected, disabled - if added, the item selection will be disabled.

To create a Bootstrap Navbar, add the following Tag Helper:

Applicable classes:

navbar-inverse - applies an inverted color scheme to the Navbar.

Related Tag Helpers:

  • <bootstrap-nav-bar-header> - denotes the Navbar header.
  • <bootstrap-nav-bar-collapse> - denotes the Navbar collapse.

Classes applicable to Navbar inner elements:

navbar-brand, navbar-toggle, navbar-form, navbar-left - aligns element to the left of the Navbar, navbar-right - aligns element to the right of the Navbar, navbar-btn, navbar-text

To create a Bootstrap Breadcrumbs, add the following Tag Helper:

Related Tag Helpers:

  • <bootstrap-breadcrumb-item> - denotes a Breadcrumb (item).
    Applicable classes: pagination-sm - if added, the item will be highlighted.

Pagination

To create a Bootstrap Pagination, add the following Tag Helper:

Applicable classes:

pagination-sm, pagination-lg

Applicable attributes:

  • "type" - if set to "pager", denotes only a pager with "previous" and "next" links.

Related Tag Helpers:

  • <bootstrap-pagination-item> - denotes a Pagination item.
    Applicable classes: active, disabled, previous, next

Label

To create a Bootstrap Label, add the following Tag Helper:

Applicable classes:

label-default, label-primary, label-success, label-info, label-warning, label-danger

Badge

To create a Bootstrap Badge, add the following Tag Helper:

Jumbotron

To create a Bootstrap Jumbotron, add the following Tag Helper:

To create a Bootstrap Page header, add the following Tag Helper:

Thumbnail

To create a Bootstrap Thumbnail, add the following Tag Helper:

Applicable attributes:

  • "href" (optional)
  • "target" (optional)

Progress bar

To create a Bootstrap Progress bar, add the following Tag Helper:

Related Tag Helpers:

  • <bootstrap-progress-bar> - denotes a progress bar.
    Applicable classes: active - enables animation (requires "progress-bar-striped"), progress-bar-success, progress-bar-info, progress-bar-warning, progress-bar-danger, progress-bar-striped

    Applicable attributes:

    • "value"
    • "minwidth"

Media object

To create a Bootstrap Media object, add the following Tag Helper:

Related Tag Helpers:

  • <bootstrap-media-left>
    Applicable classes: media-top, media-middle, media-middle
  • <bootstrap-media-body>
  • <bootstrap-media-right>.
    Applicable classes: media-top, media-middle, media-middle
  • <bootstrap-media-list> - wrap nested <bootstrap-media> Tag Helpers inside this Tag Helper to create a "nested list"-like structure of media objects.

The class "media-heading" should be applied to heading tags inside <bootstrap-media-body>. The class "media-object" should be applied to images inside <bootstrap-media-left> and <bootstrap-media-right>.

List group

To create a Bootstrap List group, add the following Tag Helper:

Related Tag Helpers:

  • <bootstrap-listgroup-item> - denotes a List group item.
    Applicable classes: active - if added, the item will be highlighted, disabled - if added, the item will have a disabled visual effect, list-group-item-success, list-group-item-info, list-group-item-warning, list-group-item-danger list-group-item-success

Panel

To create a Bootstrap Panel, add the following Tag Helper:

Applicable classes:

panel-default, panel-primary, panel-success, panel-info, panel-warning, panel-danger

Related Tag Helpers:

  • <bootstrap-panel-header> - denotes the header section of the Panel.
  • <bootstrap-panel-body> - denotes the content section of the Panel.
  • <bootstrap-panel-footer> - denotes the footer section of the Panel.

Responsive embed

To create a Bootstrap Responsive embed, add the class "bootstrap-embed-responsive" to an iframe, embed, object or video element:

Well

To create a Bootstrap Well, add the following Tag Helper:

Applicable classes:

well-sm, well-lg