<h4>Tabs with nav and using links (with fade)</h4>
<nav>
- <div class="nav nav-pills" id="nav-tab" role="tablist">
+ <div class="nav nav-pills" id="nav-tab" role="tablist">
<a class="nav-link nav-item active" role="tab" data-bs-toggle="tab" href="#home5">Home</a>
<a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#profile5">Profile</a>
<a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#fat5">@fat</a>
<a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#mdo5">@mdo</a>
- <a class="nav-link nav-item disabled" role="tab" href="#">Disabled</a>
+ <a class="nav-link nav-item disabled" role="tab" href="#" aria-disabled="true">Disabled</a>
</div>
</nav>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
{{< example >}}
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
- <li><a class="dropdown-item disabled">Disabled link</a></li>
+ <li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
{{< /example >}}
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
- <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
+ <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>
{{< /example >}}
</ul>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</ul>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Link</a>
+ <a class="nav-link disabled" aria-disabled="true">Link</a>
</li>
</ul>
<form class="d-flex" role="search">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
- <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
+ <a class="flex-sm-fill text-sm-center nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
- <a class="btn btn-primary disabled placeholder col-6"></a>
+ <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>
</div>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
- <a class="btn btn-primary disabled placeholder col-6"></a>
+ <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>
```
<span class="placeholder col-6"></span>
</p>
-<a class="btn btn-primary disabled placeholder col-4"></a>
+<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>
{{< /example >}}
{{< callout info >}}
<nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary rounded-pill" href="#">تدوينات أقدم</a>
- <a class="btn btn-outline-secondary rounded-pill disabled">تدوينات أحدث</a>
+ <a class="btn btn-outline-secondary rounded-pill disabled" aria-disabled="true">تدوينات أحدث</a>
</nav>
</div>
<nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary rounded-pill" href="#">Older</a>
- <a class="btn btn-outline-secondary rounded-pill disabled">Newer</a>
+ <a class="btn btn-outline-secondary rounded-pill disabled" aria-disabled="true">Newer</a>
</nav>
</div>
<a class="nav-link" href="#">حلقة الوصل</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">رابط غير مفعل</a>
+ <a class="nav-link disabled" aria-disabled="true">رابط غير مفعل</a>
</li>
</ul>
<form class="d-flex" role="search">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<a class="nav-link active" aria-current="page" href="#">نشط</a>
<a class="nav-link" href="#">رابط</a>
<a class="nav-link" href="#">رابط</a>
- <a class="nav-link disabled">معطل</a>
+ <a class="nav-link disabled" aria-disabled="true">معطل</a>
</nav>
{{< /example >}}
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">معطل</a>
+ <a class="nav-link disabled" aria-disabled="true">معطل</a>
</li>
</ul>
{{< /example >}}
</ul>
</li>
<li class="nav-item">
- <a class="nav-link disabled">معطل</a>
+ <a class="nav-link disabled" aria-disabled="true">معطل</a>
</li>
</ul>
<form class="d-flex" role="search">
</ul>
</li>
<li class="nav-item">
- <a class="nav-link disabled">معطل</a>
+ <a class="nav-link disabled" aria-disabled="true">معطل</a>
</li>
</ul>
<form class="d-flex" role="search">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
</ul>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
</ul>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropup">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled">Disabled</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">