Accessibility: sr-only or aria-label

In the MDN example, a screen reader will just speak just the word "close" since aria-label overrides the text in the button. This will work even if you re-use the code without Bootstrap.

In your example, a screen reader will speak "close x" since you are doing nothing to hide the "x" from screen readers. You are also adding a text node to then hiding it with a class.

I would use the example from MDN.

The class sr-only class is for whole blocks of text content which are only useful to those using a screen reader and should be hidden from others.

An example from and app I'm working on provides instructions for using an accessible controller with the web app:

<div class="sr-only">
  When voting with the text-to-speech audio, use the accessible
  controller to navigate your ballot. To navigate through the
  contests, use the left and right buttons. To navigate through
  contest choices, use the up and down buttons. To select or
  unselect a contest choice as your vote, use the select button.
</div>

In your example, you simply want to provide different text content for a screen reader. To answer your specific question, use the MDN example.

I've use aria-labels to hint to a screen reader when to add pauses by suffixing titles with periods or commas as necessary (More about Pausing in a screen reader for accessibility):

<h1 aria-label="Hello World.">
  Hello World
</h1>