The labels do not show in the browser

Question

I am trying to create two forms where each line of the form has a submit button in the end. The idea that I want to create is as the image below.

However, by writing the following code

<div class="form widget widget-medium">
    <div class="widget-header title-only">
        <h2 class="widget-title">Queue View</h2>
    </div>
    <form method="POST">
        

        <div>
            <label for="Queue 1" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>

        <div>
            <label for="Queue 2" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>

        <div>
            <label for="Queue 3" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>

        <div>
            <label for="Queue 4" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>


    </form>
</div>

<div class="form widget widget-medium">
    <div class="widget-header title-only">
        <h2 class="widget-title">Booking View</h2>
    </div>
    <form method="POST">
        

        <div>
            <label for="Booking 1" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>

        <div>
            <label for="Booking 2" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>

        <div>
            <label for="Booking 3" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>

        <div>
            <label for="Booking 4" class="col-md-4 col-form-label text-md-right"></label><br />
            <button type="submit" class="btn medium">
                <span>View</span>
            </button>
        </div>


    </form>
</div>

I got this result:

Does anybody may know what is the problem that the labels do not show? Regarding the styling I still have not fix it, but my main problem are the labels that are not showing.

Thank you in advance.

Answer 1

You don't have any text in your <label> tags.

And secondly, your <label> are linked with the for attribute to a non-existent id. You should put an id on the buttons (with the same value as the for attribute)