html – How one can use the info goal in bootstrap?

<button id="btn-id" class="navbar-toggler" kind="button" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
    <span class="navbar-toggler-icon"></span>
     <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">MyBrand</a>
                <!-- Gather the nav hyperlinks, types, and different contents for toggling -->
                <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                <li class="nav-item"><a category="nav-link" href="#">Sports activities</a></li>
                <li class="nav-item"><a category="nav-link" href="#">Actions</a></li>
                <li class="nav-item"><a category="nav-link" href="#">Contact Us</a></li>
            </ul>
</div>

I can get this error:

The ‘data-target’ attribute worth needs to be the id of the tag for toggling components like navigation hyperlinks, types, and different contents

I want an answer for this error.