These are the full width alerts you see stacked above.

<!-- This tag should be a child of the body -->
    <div class="alert-stack">
    
        <div class="alert alert-warning alert-dismissible fade in" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
            </button>
    
            <div class="container">
                <div class="row">
                    <div class="col-md-20">
                        <p>Alert example. If your playback didn’t start, it’s likely because you don’t have the Video app installed.</p>
                    </div>
                    <div class="col-md-4">
                        <p>
                            <a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
                            <a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    
        <!-- We can stack other alert components here -->
    </div>

The required JavaScript to initialize the Affix Boostrap component:

$(function () {
        var alertStack = $('.alert-stack');
    
        if (alertStack.length == 0) {
            return;
        }
    
        alertStack.affix({
            offset: {
                top: alertStack.offset().top
            }
        });
    });

Caption row uses two columns to ensure action link is right aligned at md viewport and up. It stacks at sm and below.

Action link needs to float right on large viewports and float left on small ones, hence the hiding and showing.

<div class="alert [alert-info] [alert-warning] [alert-danger] [with-glyph] alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">
                <i class="glyph glyph-cancel"></i>
            </span>
        </button>
        <span class="alert-glyph">
            <i class="glyph-info"></i>
        </span>
        <div class="alert-title">Danger alert with glyph example</div>
        <div class="row">
            <div class="col-md-20">
                <p>This is a danger inline alert with an glyph. Want to know more about what glyphs you can use?</p>
            </div>
            <div class="col-md-4">
                <p>
                    <a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
                    <a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
                </p>
            </div>
        </div>
    </div>