TagHelperSamples
TagHelperSamples copied to clipboard
Bootstrap 4 +
The nav-link Tag Helper does not work correctly with Bootstrap 4 beta 3. The selected navigation is the same as the rest of the navigation.
My Bad I had to overwrite active to see any difference. Below is what I added to my custum css to get the results I was looking for.
.navbar-nav > .active > a { color: black; font-weight: bold; }
.nav-item > a:hover { color: black; font-weight: bold; }
I would expect most of the bootstrap tag helpers do not work correctly with Bootstrap 4. Bootstrap 4 is not backwards compatible with Bootstrap 3 and would require a new set of tag helpers.
Hi @dpaquette,
I have created a simple tag helper for creating a bootstrap 4 card. Below is the simple structure that i have created:
<card style="width: 18rem;" background="Success">
<card-header>Header For Card</card-header>
<card-body>
<p class="card-text">Card Text</p>
</card-body>
<card-footer>Footer For Card</card-footer>
</card>
Card tag helper contains properties for setting the background and border color also. Also created a card image tag helper for inserting image in card.
Can i contribute this tag helper ? Is there any suggestion to improve the structure
Bootstrap 4 requires the a tag to have the class nav-item e.g.
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>