dpaquette / TagHelperSamples

A set of sample tag helpers for ASP.NET Core MVC
http://taghelpersamples.azurewebsites.net/
Other
378 stars 98 forks source link

Bootstrap 4 + #70

Open djjohnson-net opened 6 years ago

djjohnson-net commented 6 years ago

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

dpaquette commented 6 years ago

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.

manojkulkarni30 commented 4 years ago

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

spSlaine commented 4 years ago

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>