htmltwitter-bootstrapbootstrap-4

Table caption displays at the bottom using Bootstrap

I am a declaring a table with a caption:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
    <caption>Why does this display below contents?</caption>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

Yet, even though the caption element is the table's first child, when I use a Bootstrap class, the caption displays under the table.

How do I move it above the table?

Solution

  • That's because since version 4, Bootstrap has default caption css style - caption-side: bottom

    When you change caption-side: top; you will have your caption on the top of the table.

    Update

    Since version 5, you can also put the <caption> on the top of the table with .caption-top:

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered caption-top">
    <caption>Caption displayed above contents</caption>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>