                    <div class="c-content-title-1">
                        <h3 class="c-center c-font-dark c-font-uppercase">Bootstrap Buttons</h3>
                        <div class="c-line-center c-theme-bg"></div>
                        <p class="c-center">Customized Bootstrap Base Buttons</p>
                    </div>
                    <div class="c-content-panel">
                        <div class="c-label">button tags</div>
                        <div class="c-body">
                            <p>
                                <a class="btn btn-default" href="#" role="button">Link</a>
                                <button class="btn btn-default" type="submit">Button</button>
                                <input class="btn btn-default" type="button" value="Input">
                                <input class="btn btn-default" type="submit" value="Submit"> </p>
                            <p>
                                <a class="btn btn-default c-btn-uppercase" href="#" role="button">Link</a>
                                <button class="btn btn-default c-btn-uppercase" type="submit">Button</button>
                                <input class="btn btn-default c-btn-uppercase" type="button" value="Input">
                                <input class="btn btn-default c-btn-uppercase" type="submit" value="Submit"> </p>
                            <p>
                                <a class="btn btn-default c-btn-uppercase c-btn-bold" href="#" role="button">Link</a>
                                <button class="btn btn-default c-btn-uppercase c-btn-bold" type="submit">Button</button>
                                <input class="btn btn-default c-btn-uppercase c-btn-bold" type="button" value="Input">
                                <input class="btn btn-default c-btn-uppercase c-btn-bold" type="submit" value="Submit"> </p>
                        </div>
                    </div>
                    <div class="c-content-panel">
                        <div class="c-label">button variants</div>
                        <div class="c-body">
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default c-btn-uppercase">Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary">Primary</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success">Success</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info">Info</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning">Warning</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger">Danger</button>
                                <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                                <button type="button" class="btn btn-link">Link</button>
                            </p>
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default c-btn-uppercase">Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary c-btn-uppercase">Primary</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success c-btn-uppercase">Success</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info c-btn-uppercase">Info</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning c-btn-uppercase">Warning</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger c-btn-uppercase">Danger</button>
                                <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                                <button type="button" class="btn btn-link c-btn-uppercase">Link</button>
                            </p>
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default c-btn-uppercase c-btn-bold">Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary c-btn-uppercase c-btn-bold">Primary</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success c-btn-uppercase c-btn-bold">Success</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info c-btn-uppercase c-btn-bold">Info</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning c-btn-uppercase c-btn-bold">Warning</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger c-btn-uppercase c-btn-bold">Danger</button>
                                <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                                <button type="button" class="btn btn-link c-btn-uppercase c-btn-bold">Link</button>
                            </p>
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default c-btn-uppercase c-btn-bold">
                                    <i class="fa fa-cubes"></i> Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary c-btn-uppercase c-btn-bold">
                                    <i class="fa fa-crop"></i> Primary</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success c-btn-uppercase c-btn-bold">
                                    <i class="fa fa-diamond"></i> Success</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info c-btn-uppercase c-btn-bold">
                                    <i class="fa fa-filter"></i> Info</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning c-btn-uppercase c-btn-bold">
                                    <i class="fa fa-search"></i> Warning</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger c-btn-uppercase c-btn-bold">
                                    <i class="fa fa-plug"></i> Danger</button>
                            </p>
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default c-btn-uppercase c-btn-bold">
                                    <i class="icon-direction"></i> Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary c-btn-uppercase c-btn-bold">
                                    <i class="icon-drop"></i> Primary</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success c-btn-uppercase c-btn-bold">
                                    <i class="icon-pin"></i> Success</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info c-btn-uppercase c-btn-bold">
                                    <i class="icon-puzzle"></i> Info</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning c-btn-uppercase c-btn-bold">
                                    <i class="icon-layers"></i> Warning</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger c-btn-uppercase c-btn-bold">
                                    <i class="icon-docs"></i> Danger</button>
                            </p>
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default c-btn-uppercase c-btn-bold">
                                    <i class="glyphicon glyphicon-question-sign"></i> Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary c-btn-uppercase c-btn-bold">
                                    <i class="glyphicon glyphicon-exclamation-sign"></i> Primary</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success c-btn-uppercase c-btn-bold">
                                    <i class="glyphicon glyphicon-gift"></i> Success</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info c-btn-uppercase c-btn-bold">
                                    <i class="glyphicon glyphicon-hand-down"></i> Info</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning c-btn-uppercase c-btn-bold">
                                    <i class="glyphicon glyphicon-save"></i> Warning</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger c-btn-uppercase c-btn-bold">
                                    <i class="glyphicon glyphicon-cloud-download"></i> Danger</button>
                            </p>
                        </div>
                    </div>
                    <div class="c-content-panel">
                        <div class="c-label">button sizes</div>
                        <div class="c-body">
                            <p>
                                <button type="button" class="btn btn-primary btn-lg">Large button</button>
                                <button type="button" class="btn btn-success">Default button</button>
                                <button type="button" class="btn btn-danger btn-sm">Small button</button>
                                <button type="button" class="btn btn-warning btn-xs">Extra small</button>
                            </p>
                            <p>
                                <button type="button" class="btn btn-primary btn-lg c-btn-uppercase">Large button</button>
                                <button type="button" class="btn btn-success c-btn-uppercase">Default button</button>
                                <button type="button" class="btn btn-danger btn-sm c-btn-uppercase">Small button</button>
                                <button type="button" class="btn btn-warning btn-xs c-btn-uppercase">Extra small</button>
                            </p>
                            <p>
                                <button type="button" class="btn btn-primary btn-lg c-btn-uppercase c-btn-bold">Large button</button>
                                <button type="button" class="btn btn-success c-btn-uppercase c-btn-bold">Default button</button>
                                <button type="button" class="btn btn-danger btn-sm  c-btn-uppercase c-btn-bold">Small button</button>
                                <button type="button" class="btn btn-warning btn-xs c-btn-uppercase c-btn-bold">Extra small</button>
                            </p>
                            <p>
                                <button type="button" class="btn btn-primary btn-lg">
                                    <i class="fa fa-user"></i> Large button</button>
                                <button type="button" class="btn btn-success">
                                    <i class="fa fa-comment-o"></i> Default button</button>
                                <button type="button" class="btn btn-danger btn-sm">
                                    <i class="fa fa-code"></i> Small button</button>
                                <button type="button" class="btn btn-warning btn-xs">
                                    <i class="fa fa-code-fork"></i> Extra small</button>
                            </p>
                            <p>
                                <button type="button" class="btn btn-primary btn-lg">
                                    <i class="icon-user"></i> Large button</button>
                                <button type="button" class="btn btn-success">
                                    <i class="icon-bubbles"></i> Default button</button>
                                <button type="button" class="btn btn-danger btn-sm">
                                    <i class="icon-pin"></i> Small button</button>
                                <button type="button" class="btn btn-warning btn-xs">
                                    <i class="icon-present"></i> Extra small</button>
                            </p>
                            <p>
                                <button type="button" class="btn btn-primary btn-lg">
                                    <i class="glyphicon glyphicon-star-empty"></i> Large button</button>
                                <button type="button" class="btn btn-success">
                                    <i class="glyphicon glyphicon-cog"></i> Default button</button>
                                <button type="button" class="btn btn-danger btn-sm">
                                    <i class="glyphicon glyphicon-gift"></i> Small button</button>
                                <button type="button" class="btn btn-warning btn-xs">
                                    <i class="glyphicon glyphicon-calendar"></i> Extra small</button>
                            </p>
                        </div>
                    </div>
                    <div class="c-content-panel">
                        <div class="c-label">block buttons</div>
                        <div class="c-body">
                            <button type="button" class="btn btn-primary btn-block">Block level button</button>
                            <button type="button" class="btn btn-default btn-block">Block level button</button>
                            <button type="button" class="btn btn-danger btn-block c-btn-uppercase c-btn-bold">Block level button</button>
                            <button type="button" class="btn btn-primary btn-block">
                                <i class="fa fa-code"></i> Block level button</button>
                            <button type="button" class="btn btn-info btn-block">
                                <i class="icon-pin"></i> Block level button</button>
                            <button type="button" class="btn btn-warning btn-block c-btn-uppercase c-btn-bold">
                                <i class="glyphicon glyphicon-calendar"></i> Block level button</button>
                        </div>
                    </div>
                    <div class="c-content-panel">
                        <div class="c-label">button states</div>
                        <div class="c-body">
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default">Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary">Default</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success">Default</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info">Default</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning">
                                    <i class="fa fa-star-o"></i> Default</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger">
                                    <i class="fa fa-support"></i> Default</button>
                                <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                                <button type="button" class="btn btn-link">
                                    <i class="fa fa-trash-o"></i> Default</button>
                            </p>
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default active">Active</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary active">Active</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success active">Active</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info active">Active</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning active">
                                    <i class="icon-bubble"></i> Active</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger active">
                                    <i class="icon-clock"></i> Active</button>
                                <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                                <button type="button" class="btn btn-link active">
                                    <i class="icon-power"></i> Active</button>
                            </p>
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default disabled">Disabled</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary disabled">Disabled</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success disabled">Disabled</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info disabled">Disabled</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning disabled">
                                    <i class="glyphicon glyphicon-pushpin"></i> Disabled</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger disabled">
                                    <i class="glyphicon glyphicon-usd"></i> Disabled</button>
                                <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                                <button type="button" class="btn btn-link disabled">
                                    <i class="glyphicon glyphicon-unchecked"></i> Disabled</button>
                            </p>
                        </div>
                    </div>
                    <div class="c-content-panel">
                        <div class="c-label">square buttons</div>
                        <div class="c-body">
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default c-btn-uppercase c-btn-square">Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary c-btn-square">Primary</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success c-btn-square">Success</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info c-btn-square">
                                    <i class="fa fa-pencil"></i> Info</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning c-btn-square">
                                    <i class="fa fa-phone"></i> Warning</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger c-btn-square">
                                    <i class="fa fa-share-alt"></i> Danger</button>
                            </p>
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default c-btn-uppercase c-btn-square c-btn-uppercase">Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary c-btn-square c-btn-uppercase">Primary</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success c-btn-square c-btn-uppercase">Success</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info c-btn-square c-btn-uppercase">
                                    <i class="icon-globe-alt"></i> Info</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning c-btn-square c-btn-uppercase">
                                    <i class="icon-pin"></i> Warning</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger c-btn-square c-btn-uppercase">
                                    <i class="icon-speech"></i> Danger</button>
                            </p>
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default c-btn-uppercase c-btn-square c-btn-uppercase c-btn-bold">Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary c-btn-square c-btn-uppercase c-btn-bold">Primary</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success c-btn-square c-btn-uppercase c-btn-bold">Success</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info c-btn-square c-btn-uppercase c-btn-bold">
                                    <i class="glyphicon glyphicon-paperclip"></i> Info</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning c-btn-square c-btn-uppercase c-btn-bold">
                                    <i class="glyphicon glyphicon-bell"></i> Warning</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger c-btn-square c-btn-uppercase c-btn-bold">
                                    <i class="glyphicon glyphicon-wrench"></i> Danger</button>
                            </p>
                        </div>
                    </div>
                    <div class="c-content-panel">
                        <div class="c-label">circle buttons</div>
                        <div class="c-body">
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default c-btn-uppercase c-btn-circle">Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary c-btn-circle">Primary</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success c-btn-circle">Success</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info c-btn-circle">
                                    <i class="fa fa-rss"></i> Info</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning c-btn-circle">
                                    <i class="fa fa-power-off"></i> Warning</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger c-btn-circle">
                                    <i class="fa fa-gear"></i> Danger</button>
                            </p>
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default c-btn-uppercase c-btn-circle c-btn-uppercase">Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary c-btn-circle c-btn-uppercase">Primary</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success c-btn-circle c-btn-uppercase">Success</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info c-btn-circle c-btn-uppercase">
                                    <i class="icon-like"></i> Info</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning c-btn-circle c-btn-uppercase">
                                    <i class="icon-size-actual"></i> Warning</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger c-btn-circle c-btn-uppercase">
                                    <i class="icon-trash"></i> Danger</button>
                            </p>
                            <p>
                                <!-- Standard button -->
                                <button type="button" class="btn btn-default c-btn-uppercase c-btn-circle c-btn-uppercase c-btn-bold">Default</button>
                                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <button type="button" class="btn btn-primary c-btn-circle c-btn-uppercase c-btn-bold">Primary</button>
                                <!-- Indicates a successful or positive action -->
                                <button type="button" class="btn btn-success c-btn-circle c-btn-uppercase c-btn-bold">Success</button>
                                <!-- Contextual button for informational alert messages -->
                                <button type="button" class="btn btn-info c-btn-circle c-btn-uppercase c-btn-bold">
                                    <i class="glyphicon glyphicon-flash"></i> Info</button>
                                <!-- Indicates caution should be taken with this action -->
                                <button type="button" class="btn btn-warning c-btn-circle c-btn-uppercase c-btn-bold">
                                    <i class="glyphicon glyphicon-cloud-download"></i> Warning</button>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button type="button" class="btn btn-danger c-btn-circle c-btn-uppercase c-btn-bold">
                                    <i class="glyphicon glyphicon-heart-empty"></i> Danger</button>
                        </p></div>
                    </div>