Jump to: navigation, search

Bootstrapskin Alerts

Alerts

success

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action
Or do this

info

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action
Or do this

danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action
Or do this

default

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action
Or do this

light

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action
Or do this

lighter

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action
Or do this

dark

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action
Or do this

darker

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action
Or do this

warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Take this action
Or do this

Using the example below, the main classes to take note of are "alert" which is the default css class for an alert i.e. border, padding and border-radius etc and "alert-success" which is the colour of the Alert, which in this case is green.

To change the colour simply replace "alert-success" with "alert-danger" (red) or "alert-info" (blue) or any of the available colour colurs - see tips for more info.

      <div class="col-md-4">
        <div class="alert alert-success fade in">
          <p>
            <strong>Well done!</strong>
          </p>
          <div class="btn btn-success">[[Take this action]]</div>
          <div class="btn btn-meadow">[[Or do this]]</div>
        </div>
      </div>
    </div>

As with all aspects of Bootstrap, Alerts are highly flexible, offering numerous opportunities to customise the look and feel.

In the examples section we have listed several colours, but you can in fact use any of the colours listed in the Colour Classes page and the same applies to the icons and buttons.

The width of an Alert is set by the column class.

Traditional "a class" links do not work with Mediawiki, use [[]] wiki syntax with buttons when linking to internal articles and [] wiki syntax for external links.

bootstrapskin-commercial-skin.png