Bootstrap Modal with Danger State Class?

Question

Bootstrap offer Contextual Alternatives for Panels that make it easy to style the panel by adding any of the contextual state classes such as panel-warning or panel-danger.

Does bootstrap offer a similar mechanism for Modals? Or is there an easy way to apply the "panel-warning" class to a modal?

I tried using <div class="modal modal-warning"> and even <div class="modal panel-warning">, but neither worked.

Thanks!

Answer 1

You can but it might be dangerous.
I've applied panel-warning and panel-heading to the class modal-content and modal-header

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content panel-warning">
        <div class="modal-header panel-heading">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

@pimlottc has noticed the top border-radius is slightly different. Here is the fix:

.panel-heading
{
    border-top-left-radius: inherit; 
    border-top-right-radius: inherit;
}

Check the fiddle.

Answer 2

.alert-[context]

As .alerts are a fairly simplistic component, it may mean a lesser likelihood of side-effects.

My approach in the past has been adding the alert-danger (or whatever context) class to modal-header & sometimes modal-footer. You can go a step further and add it to modal-body. To me it seems more elegant to only put it on the header -- but I won't tell you how to style your markup ;)