Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !30534

Improve table markup in Layout / Containers

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge master-fod-docs-layout-overview-table into master 4 years ago
  • Overview 1
  • Commits 5
  • Pipelines 0
  • Changes 1

Created by: ffoodd

  1. Drop useless .text-left on table
  2. Use scope="col" on th, and replace empty th with td
  3. Use th scope="row" on class names' column.

This is all for accessibility purpose —since class names being headers makes sense here. See WAI tutorials about tables.

@patrickhlauke Feel free to tell me if it's not helpful :) I made separate commits to ease reverting some.

Compare
  • master (base)

and
  • latest version
    1590ae0f
    5 commits, 1 year ago

1 file
+ 15
- 15

    Preferences

    File browser
    Compare changes
site/content/docs/5.0/layout/containers.md
+ 15
- 15
  • View file @ 1590ae0f

  • Edit in single-file editor

  • Open in Web IDE


@@ -20,31 +20,31 @@ The table below illustrates how each container's `max-width` compares to the ori
See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}).
<table class="table text-left">
<table class="table">
<thead>
<tr>
<th></th>
<th>
<td class="border-dark"></td>
<th scope="col">
Extra small<br>
<span class="font-weight-normal">&lt;576px</span>
</th>
<th>
<th scope="col">
Small<br>
<span class="font-weight-normal">&ge;576px</span>
</th>
<th>
<th scope="col">
Medium<br>
<span class="font-weight-normal">&ge;768px</span>
</th>
<th>
<th scope="col">
Large<br>
<span class="font-weight-normal">&ge;992px</span>
</th>
<th>
<th scope="col">
X-Large<br>
<span class="font-weight-normal">&ge;1200px</span>
</th>
<th>
<th scope="col">
XX-Large<br>
<span class="font-weight-normal">&ge;1400px</span>
</th>
@@ -52,7 +52,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
</thead>
<tbody>
<tr>
<td><code>.container</code></td>
<th scope="row" class="font-weight-normal"><code>.container</code></th>
<td class="text-muted">100%</td>
<td>540px</td>
<td>720px</td>
@@ -61,7 +61,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td>1320px</td>
</tr>
<tr>
<td><code>.container-sm</code></td>
<th scope="row" class="font-weight-normal"><code>.container-sm</code></th>
<td class="text-muted">100%</td>
<td>540px</td>
<td>720px</td>
@@ -70,7 +70,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td>1320px</td>
</tr>
<tr>
<td><code>.container-md</code></td>
<th scope="row" class="font-weight-normal"><code>.container-md</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>720px</td>
@@ -79,7 +79,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td>1320px</td>
</tr>
<tr>
<td><code>.container-lg</code></td>
<th scope="row" class="font-weight-normal"><code>.container-lg</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
@@ -88,7 +88,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td>1320px</td>
</tr>
<tr>
<td><code>.container-xl</code></td>
<th scope="row" class="font-weight-normal"><code>.container-xl</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
@@ -97,7 +97,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td>1320px</td>
</tr>
<tr>
<td><code>.container-xxl</code></td>
<th scope="row" class="font-weight-normal"><code>.container-xxl</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
@@ -106,7 +106,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td>1320px</td>
</tr>
<tr>
<td><code>.container-fluid</code></td>
<th scope="row" class="font-weight-normal"><code>.container-fluid</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
1
post
1
post
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
0
0 participants
Reference: a11yproject/a11yproject.com!1172
Source branch: master-fod-docs-layout-overview-table

Menu

Explore Projects Groups Snippets