ASP.NET Core MVC Bootstrap Tag Helpers
MIT License
ASP.NET Core MVC Bootstrap tag helpers. Demo: http://aspcore.jqwidgets.com/bootstrap
This package includes tag helpers for the following bootstrap components:
Create a new ASP .NET Core Web Application.
Install the Tag Helpers. To install ASP.NET Core MVC Bootstrap Tag Helpers, run the following command in the Package Manager Console
Install-Package jQWidgets.AspNetCore.Mvc.Bootstrap.TagHelpers
.
Update _ViewImports.cshtml
.
@using jQWidgets.AspNetCore.Mvc.Bootstrap.Demos
@using jQWidgets.AspNetCore.Mvc.Bootstrap.TagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, jQWidgets.AspNetCore.Mvc.Bootstrap.TagHelpers
@inject Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration TelemetryConfiguration
Add a reference to bootstrap.mvc.css
in _Layout.cshtml
. bootstrap.mvc.css
is included in this repository.
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/bootstrap.mvc.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
Build the Solution.
Add a Bootstrap Tag Helper to a Page.
To create a Bootstrap Modal, add the following Tag Helper:
<bootstrap-modal id="myModal" aria-labelledby="myModalLabel" size="sm">
<bootstrap-modal-header>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Sample modal header</h4>
</bootstrap-modal-header>
<bootstrap-modal-body>
Sample modal body
</bootstrap-modal-body>
</bootstrap-modal>
To open the modal from a button, add the bootstrap-toggle-modal attribute to the button with the id of the modal as value:
<bootstrap-button type="button" class="btn btn-primary" bootstrap-toggle-modal="myModal">
Open sample modal
</bootstrap-button>
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.
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:
<bootstrap-dropdown>
<bootstrap-dropdown-label id="newDropDown" class="btn btn-danger btn-lg" content="DropDown Button"></bootstrap-dropdown-label>
<bootstrap-dropdown-menu labelledby="newDropDown">
<bootstrap-dropdown-menu-item><a href="#">Action</a></bootstrap-dropdown-menu-item>
<bootstrap-dropdown-menu-item><a href="#">Another action</a></bootstrap-dropdown-menu-item>
<bootstrap-dropdown-menu-item><a href="#">Something else here</a></bootstrap-dropdown-menu-item>
<bootstrap-dropdown-menu-separator></bootstrap-dropdown-menu-separator>
<bootstrap-dropdown-menu-item><a href="#">Separated link</a></bootstrap-dropdown-menu-item>
</bootstrap-dropdown-menu>
</bootstrap-dropdown>
You can add more Dropdown options by inserting more 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 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:
To create a Bootstrap togglable Tab, add the following Tag Helper:
<bootstrap-tabs>
<bootstrap-tabs-nav id="tabs3" class="">
<bootstrap-tab active="true"><a href="#home" aria-controls="home" role="tab">Home</a></bootstrap-tab>
<bootstrap-tab><a href="#profile" aria-controls="profile" role="tab">Profile</a></bootstrap-tab>
<bootstrap-tab>
<bootstrap-dropdown>
<bootstrap-dropdown-label id="bootstrapDropdown" class="btn btn-link" content="Dropdown"></bootstrap-dropdown-label>
<bootstrap-dropdown-menu labelledby="bootstrapDropdown">
<bootstrap-dropdown-menu-item><a href="#dropdown1">fat</a></bootstrap-dropdown-menu-item>
<bootstrap-dropdown-menu-item><a href="#dropdown2">mdo</a></bootstrap-dropdown-menu-item>
</bootstrap-dropdown-menu>
</bootstrap-dropdown>
</bootstrap-tab>
</bootstrap-tabs-nav>
<bootstrap-tabs-content>
<bootstrap-tab-pane active="true" id="home" class="fade in">Content 1.</bootstrap-tab-pane>
<bootstrap-tab-pane id="profile" class="fade">Content 2.</bootstrap-tab-pane>
<bootstrap-tab-pane id="dropdown1" class="fade">Content 3.</bootstrap-tab-pane>
<bootstrap-tab-pane id="dropdown2" class="fade">Content 4.</bootstrap-tab-pane>
</bootstrap-tabs-content>
</bootstrap-tabs>
To add more tabs to this sample Tab, insert 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:
Methods:
$().tab('show')
Events:
hide.bs.tab
show.bs.tab
hidden.bs.tab
shown.bs.tab
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>
<bootstrap-button bootstrap-tooltip-toggle="btn2" bootstrap-tooltip="Tooltip on the top" type="button" id="btn2" class="btn btn-default" data-placement='top'>Tooltip on top</bootstrap-button>
Applicable attributes:
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
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>
<bootstrap-button bootstrap-popover="popover1b" type="button" id="myButton1b" class="btn btn-lg btn-danger" data-placement='right' title="Popover title" data-content="And here's some amazing content.">`
Click to toggle popover
</bootstrap-button>
Applicable attributes:
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
To create a Bootstrap Alert, add the following Tag Helper:
<bootstrap-alert class="alert-danger alert-dismissible fade in">
<bootstrap-alert-close><span aria-hidden="true"></span></bootstrap-alert-close>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</bootstrap-alert>
Related Tag Helpers:
<bootstrap-alert-close>
- denotes the Alert's close button.
Applicable attributes:
Methods:
$().alert('close')
Events:
close.bs.alert
closed.bs.alert
To create a Bootstrap Button, add the following Tag Helper:
<button type='button' class='btn btn-default' data-placement="top">Bootstrap Button</button>
Related Tag Helpers:
<bootstrap-button-group>
- enclose several Tag Helpers in this Tag Helper to create a button group.
Applicable attributes:
Methods:
$().button('toggle')
$().button('reset')
To create a Bootstrap Collapse, add the following Tag Helper:
<bootstrap-collapse trigger="#triggerA, #triggerB, #triggerBB" id="collapseExample">
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.
</bootstrap-collapse>
Applicable attributes:
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:
<bootstrap-carousel class="slide" id="carousel-example-generic1" style="width:900px; display:block;">
<bootstrap-carousel-indicators style="display:block;">
<bootstrap-carousel-indicator target="#carousel-example-generic1" slide-to="0" active="true" class=""></bootstrap-carousel-indicator>
<bootstrap-carousel-indicator target="#carousel-example-generic1" slide-to="1"></bootstrap-carousel-indicator>
<bootstrap-carousel-indicator target="#carousel-example-generic1" slide-to="2"></bootstrap-carousel-indicator>
</bootstrap-carousel-indicators>
<bootstrap-carousel-items style="display:block;">
<bootstrap-carousel-item active="true"><img src="..." /></bootstrap-carousel-item>
<bootstrap-carousel-item><img src="..." /></bootstrap-carousel-item>
<bootstrap-carousel-item><img src="..." /></bootstrap-carousel-item>
</bootstrap-carousel-items>
<bootstrap-carousel-control type="left" slide="prev" target="#carousel-example-generic1">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</bootstrap-carousel-control>
<bootstrap-carousel-control type="right" slide="next" target="#carousel-example-generic1">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</bootstrap-carousel-control>
</bootstrap-carousel>
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:
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
To create a Bootstrap Input group, add the following Tag Helper:
<bootstrap-input-group>
<bootstrap-input-group-addon id="basic-addon">https://example.com/users/</bootstrap-input-group-addon>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon">
</bootstrap-input-group>
Applicable classes:
Related Tag Helpers:
To denote that the input and the 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:
<bootstrap-nav>
<bootstrap-nav-item class="active"><a href="#">Home</a></bootstrap-nav-item>
<bootstrap-nav-item><a href="#">Profile</a></bootstrap-nav-item>
<bootstrap-nav-item><a href="#">Messages</a></bootstrap-nav-item>
</bootstrap-nav>
Applicable classes:
nav-tabs
(alternative to "nav-pills"), nav-pills (alternative to "nav-tabs"), nav-justified, "nav-stackedRelated Tag Helpers:
To create a Bootstrap Navbar, add the following Tag Helper:
<bootstrap-nav-bar>
<bootstrap-nav-bar-header>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</bootstrap-nav-bar-header>
<bootstrap-nav-bar-collapse>
<p class="navbar-text">Signed in as Mark Otto</p>
</bootstrap-nav-bar-collapse>
</bootstrap-nav-bar>
Applicable classes:
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:
<bootstrap-breadcrumb>
<bootstrap-breadcrumb-item><a href="#">Home</a></bootstrap-breadcrumb-item>
<bootstrap-breadcrumb-item><a href="#">Library</a></bootstrap-breadcrumb-item>
<bootstrap-breadcrumb-item class="active">Data</bootstrap-breadcrumb-item>
</bootstrap-breadcrumb>
Related Tag Helpers:
<bootstrap-breadcrumb-item>
- denotes a Breadcrumb (item).To create a Bootstrap Pagination, add the following Tag Helper:
<bootstrap-pagination>
<bootstrap-pagination-item>
<a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
</bootstrap-pagination-item>
<bootstrap-pagination-item><a href="#">1</a></bootstrap-pagination-item>
<bootstrap-pagination-item><a href="#">2</a></bootstrap-pagination-item>
<bootstrap-pagination-item><a href="#">3</a></bootstrap-pagination-item>
<bootstrap-pagination-item><a href="#">4</a></bootstrap-pagination-item>
<bootstrap-pagination-item><a href="#">5</a></bootstrap-pagination-item>
<bootstrap-pagination-item>
<a href="#" aria-label="Next"><span aria-hidden="true">»</span></a>
</bootstrap-pagination-item>
</bootstrap-pagination>
Applicable classes:
Applicable attributes:
Related Tag Helpers:
<bootstrap-pagination-item
> - denotes a Pagination item.To create a Bootstrap Label, add the following Tag Helper:
<bootstrap-label class="label-default">New</bootstrap-label>
Applicable classes
To create a Bootstrap Badge, add the following Tag Helper:
<bootstrap-badge>42</bootstrap-badge>
To create a Bootstrap Jumbotron, add the following Tag Helper:
<bootstrap-jumbotron>
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</bootstrap-jumbotron>
To create a Bootstrap Page header, add the following Tag Helper:
<bootstrap-page-header>
<h1>Example page header <small>Subtext for header</small></h1>
</bootstrap-page-header>
To create a Bootstrap Thumbnail, add the following Tag Helper:
<bootstrap-thumbnail>
<img src="..." style="width: 100%;" alt="illustration" />
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>
<bootstrap-button element="a" href="#" type="button" class="btn btn-primary" autocomplete="off">Button</bootstrap-button>
<bootstrap-button element="a" href="#" type="button" class="btn btn-default" autocomplete="off">Button</bootstrap-button>
</p>
</div>
</bootstrap-thumbnail>
Applicable attributes:
To create a Bootstrap Progress bar, add the following Tag Helper:
<bootstrap-progress>
<bootstrap-progress-bar value="60">
60%
</bootstrap-progress-bar>
</bootstrap-progress>
Related Tag Helpers:
To create a Bootstrap Media object, add the following Tag Helper:
<bootstrap-media>
<bootstrap-media-left class="media-top">
<a href="#">
<img class="media-object" alt="64x64" style="width: 64px; height: 64px;" src="..." data-holder-rendered="true" />
</a>
</bootstrap-media-left>
<bootstrap-media-body>
<h4 class="media-heading">Top aligned media</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
</bootstrap-media-body>
</bootstrap-media>
Related Tag Helpers:
<bootstrap-media-left>
Applicable classes:
<bootstrap-media-body>
<bootstrap-media-right>
Applicable classes:
media-top, media-middle, media-middle * - wrap nested 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 . The class "media-object" should be applied to images inside and .
To create a Bootstrap List group, add the following Tag Helper:
<bootstrap-listgroup>
<bootstrap-listgroup-item>Cras justo odio</bootstrap-listgroup-item>
<bootstrap-listgroup-item>Dapibus ac facilisis in</bootstrap-listgroup-item>
<bootstrap-listgroup-item>Morbi leo risus</bootstrap-listgroup-item>
<bootstrap-listgroup-item>Porta ac consectetur ac</bootstrap-listgroup-item>
</bootstrap-listgroup>
Related Tag Helpers:
To create a Bootstrap Panel, add the following Tag Helper:
<bootstrap-panel class="panel-default">
<bootstrap-panel-header>
<h3 class="panel-title">Panel title</h3>
</bootstrap-panel-header>
<bootstrap-panel-body>
Panel content
</bootstrap-panel-body>
<bootstrap-panel-footer>Panel footer</bootstrap-panel-footer>
</bootstrap-panel>
Applicable classes:
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.To create a Bootstrap Responsive embed, add the class "bootstrap-embed-responsive" to an iframe, embed, object or video element:
<iframe bootstrap-embed-responsive="16by9" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
To create a Bootstrap Well, add the following Tag Helper:
<bootstrap-well>Look, I'm in a well!</bootstrap-well>
Applicable classes: