TagHelperSamples icon indicating copy to clipboard operation
TagHelperSamples copied to clipboard

Bootstrap 4 +

Open djjohnson-net opened this issue 7 years ago • 3 comments

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; }

djjohnson-net avatar Jan 16 '18 20:01 djjohnson-net

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.

dpaquette avatar Jan 17 '18 22:01 dpaquette

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

manojkulkarni30 avatar Dec 14 '19 10:12 manojkulkarni30

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>

spSlaine avatar Jun 16 '20 20:06 spSlaine