F1 Color Schemes

F1 comes with some predefined color schemes.
Off On

F1 Color Schemes

F1 comes with some predefined color schemes.

Alerts Style

Alerts Style

The default behaviour for the accordion is to allow users to open multiple panes by clicking on the title. Panes are closed by clicking again on the title.

    <div class="short_code_box ">
						    <div class="alert alert-info alert-dismissible" role="alert">
                                <i class="fa fa-check-circle-o"></i>
                                <span>
                                    <strong>Well done!</strong>
                                    You successfully read this important alert message.
                                </span>
                            </div>
                            <div class="alert alert-success alert-dismissible" role="alert">
                                <i class="fa fa-thumbs-o-up"></i>
                                <span>
                                    <strong>Well done!</strong>
                                    You successfully read this important alert message.
                                </span>
                            </div>
                            <div class="alert alert-warning alert-dismissible" role="alert">
                                <i class="fa fa-exclamation-triangle"></i>
                                <span>
                                    <strong>Well done!</strong>
                                    You successfully read this important alert message.
                                </span>
                            </div>
                            <div class="alert alert-danger alert-dismissible" role="alert">
                                <i class="fa fa-times-circle-o"></i>
                                <span>
                                    <strong>Well done!</strong>
                                    You successfully read this important alert message.
                                </span>
                            </div>
						</div>

Alerts Dismissable

Accordion Style

The default behaviour for the accordion is to allow users to open multiple panes by clicking on the title. Panes are closed by clicking again on the title.

    <div class="short_code_box">
						    <div class="alert alert-info alert-dismissible" role="alert">
                               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                   <i class="fa fa-close"></i>
                               </button>
                                <span>
                                <strong>Well done!</strong>
                                You successfully read this important alert message.
                                </span>
                            </div>
                            <div class="alert alert-success alert-dismissible" role="alert">
                               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                   <i class="fa fa-close"></i>
                               </button>
                                <strong>Well done!</strong>
                                You successfully read this important alert message.
                            </div>
                            <div class="alert alert-warning alert-dismissible" role="alert">
                               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                   <i class="fa fa-close"></i>
                               </button>
                                <strong>Well done!</strong>
                                You successfully read this important alert message.
                            </div>
                            <div class="alert alert-danger alert-dismissible" role="alert">
                               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                   <i class="fa fa-close"></i>
                               </button>
                                <strong>Well done!</strong>
                                You successfully read this important alert message.
                            </div>
						</div>

Alerts Style Bordered

Alerts Style Bordered

The default behaviour for the accordion is to allow users to open multiple panes by clicking on the title. Panes are closed by clicking again on the title.

    <div class="short_code_box">
						    <div class="alert alert-info alert-dismissible" role="alert">
    <i class="fa fa-check-circle-o"></i>
    <span>
    <strong>Well done!</strong>
    You successfully read this important alert message.
    </span>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
    <i class="fa fa-thumbs-o-up"></i>
    <span>
    <strong>Well done!</strong>
    You successfully read this important alert message.
    </span>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
    <i class="fa fa-exclamation-triangle"></i>
    <span>
    <strong>Well done!</strong>
    You successfully read this important alert message.
    </span>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
    <i class="fa fa-times-circle-o"></i>
    <span>
    <strong>Well done!</strong>
    You successfully read this important alert message.
    </span>
</div>
						</div>

Alerts Style Bordered Dismissable

Alerts Style Bordered

The default behaviour for the accordion is to allow users to open multiple panes by clicking on the title. Panes are closed by clicking again on the title.

<div class="short_code_box">
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
   <i class="fa fa-close"></i>
</button>
<strong>Well done!</strong>
Your Message
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
   <i class="fa fa-close"></i>
</button>
<strong>Well done!</strong>
Your Message
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
   <i class="fa fa-close"></i>
</button>
<strong>Well done!</strong>
Your Message
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
   <i class="fa fa-close"></i>
</button>
<strong>Well done!</strong>
Your Message
</div>
</div>