開発メモ

開発用のメモです。

Bootstrap チートシート

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="UTF-8" />
        <title>Twig Page</title>
        <link rel="stylesheet" href="/bootstrap/3.3.4/css/bootstrap.min.css" />
        <link rel="stylesheet" href="/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="/bootstrap/3.3.4/js/bootstrap.min.js" ></script>
        <style>
            div.row > div
            {
                border : 1px solid black;
                color : blue;
            }
            div.row > div:nth-child(2n+1)
            {
                background-color : #FFCCCC;
            }
        </style>
        <script>
            $ ( document ).ready ( function ( ) {
                $ ( '.dropdown-toggle' ).dropdown ( );
            } );
        </script>
    </head>
    <body style="min-height: 100%">
        <div class="container">
            <div class="col-md-12">
                <div class="page-header">
                    PC(WIDE)
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        col-lg-12
                    </div>
                    <div class="col-lg-1">
                        col-lg-1
                    </div>
                    <div class="col-lg-11">
                        col-lg-11
                    </div>
                    <div class="col-lg-2">
                        col-lg-2
                    </div>
                    <div class="col-lg-10">
                        col-lg-10
                    </div>
                    <div class="col-lg-3">
                        col-lg-3
                    </div>
                    <div class="col-lg-9">
                        col-lg-9
                    </div>
                    <div class="col-lg-4">
                        col-lg-4
                    </div>
                    <div class="col-lg-8">
                        col-lg-8
                    </div>
                    <div class="col-lg-5">
                        col-lg-5
                    </div>
                    <div class="col-lg-7">
                        col-lg-7
                    </div>
                    <div class="col-lg-6">
                        col-lg-6
                    </div>
                    <div class="col-lg-6">
                        col-lg-6
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    PC
                </div>
                <div class="row">
                    <div class="col-md-12">
                        col-md-12
                    </div>
                    <div class="col-md-1">
                        col-md-1
                    </div>
                    <div class="col-md-11">
                        col-md-11
                    </div>
                    <div class="col-md-2">
                        col-md-2
                    </div>
                    <div class="col-md-10">
                        col-md-10
                    </div>
                    <div class="col-md-3">
                        col-md-3
                    </div>
                    <div class="col-md-9">
                        col-md-9
                    </div>
                    <div class="col-md-4">
                        col-md-4
                    </div>
                    <div class="col-md-8">
                        col-md-8
                    </div>
                    <div class="col-md-5">
                        col-md-5
                    </div>
                    <div class="col-md-7">
                        col-md-7
                    </div>
                    <div class="col-md-6">
                        col-md-6
                    </div>
                    <div class="col-md-6">
                        col-md-6
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Tablet
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        col-sm-12
                    </div>
                    <div class="col-sm-1">
                        col-sm-1
                    </div>
                    <div class="col-sm-11">
                        col-sm-11
                    </div>
                    <div class="col-sm-2">
                        col-sm-2
                    </div>
                    <div class="col-sm-10">
                        col-sm-10
                    </div>
                    <div class="col-sm-3">
                        col-sm-3
                    </div>
                    <div class="col-sm-9">
                        col-sm-9
                    </div>
                    <div class="col-sm-4">
                        col-sm-4
                    </div>
                    <div class="col-sm-8">
                        col-sm-8
                    </div>
                    <div class="col-sm-5">
                        col-sm-5
                    </div>
                    <div class="col-sm-7">
                        col-sm-7
                    </div>
                    <div class="col-sm-6">
                        col-sm-6
                    </div>
                    <div class="col-sm-6">
                        col-sm-6
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    SmartPhone
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        col-xs-12
                    </div>
                    <div class="col-xs-1">
                        col-xs-1
                    </div>
                    <div class="col-xs-11">
                        col-xs-11
                    </div>
                    <div class="col-xs-2">
                        col-xs-2
                    </div>
                    <div class="col-xs-10">
                        col-xs-10
                    </div>
                    <div class="col-xs-3">
                        col-xs-3
                    </div>
                    <div class="col-xs-9">
                        col-xs-9
                    </div>
                    <div class="col-xs-4">
                        col-xs-4
                    </div>
                    <div class="col-xs-8">
                        col-xs-8
                    </div>
                    <div class="col-xs-5">
                        col-xs-5
                    </div>
                    <div class="col-xs-7">
                        col-xs-7
                    </div>
                    <div class="col-xs-6">
                        col-xs-6
                    </div>
                    <div class="col-xs-6">
                        col-xs-6
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    PC 6 COL / Tab 4 / SPhone 3 COL
                </div>
                <div class="row">
                    <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
                        col-lg-1 col-md-2 col-sm-4 col-xs-6
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
                        col-lg-1 col-md-2 col-sm-4 col-xs-6
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
                        col-lg-1 col-md-2 col-sm-4 col-xs-6
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
                        col-lg-1 col-md-2 col-sm-4 col-xs-6
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
                        col-lg-1 col-md-2 col-sm-4 col-xs-6
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
                        col-lg-1 col-md-2 col-sm-4 col-xs-6
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
                        col-lg-1 col-md-2 col-sm-4 col-xs-6
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
                        col-lg-1 col-md-2 col-sm-4 col-xs-6
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
                        col-lg-1 col-md-2 col-sm-4 col-xs-6
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
                        col-lg-1 col-md-2 col-sm-4 col-xs-6
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
                        col-lg-1 col-md-2 col-sm-4 col-xs-6
                    </div>
                    <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
                        col-lg-1 col-md-2 col-sm-4 col-xs-6
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    PC OFFSET
                </div>
                <div class="row">
                    <div class="col-md-offset-11 col-md-1">
                        col-md-offset-11 col-md-1
                    </div>
                    <div class="col-md-offset-10 col-md-2">
                        col-md-offset-10 col-md-2
                    </div>
                    <div class="col-md-offset-9 col-md-3">
                        col-md-offset-9 col-md-3
                    </div>
                    <div class="col-md-offset-8 col-md-4">
                        col-md-offset-8 col-md-4
                    </div>
                    <div class="col-md-offset-7 col-md-5">
                        col-md-offset-7 col-md-5
                    </div>
                    <div class="col-md-offset-6 col-md-6">
                        col-md-offset-6 col-md-6
                    </div>
                    <div class="col-md-offset-5 col-md-7">
                        col-md-offset-5 col-md-7
                    </div>
                    <div class="col-md-offset-4 col-md-8">
                        col-md-offset-4 col-md-8
                    </div>
                    <div class="col-md-offset-3 col-md-9">
                        col-md-offset-3 col-md-9
                    </div>
                    <div class="col-md-offset-2 col-md-10">
                        col-md-offset-2 col-md-10
                    </div>
                    <div class="col-md-offset-1 col-md-11">
                        col-md-offset-1 col-md-11
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button Large
                </div>
                <div>
                    <!-- -->
                    <a href="#" class="btn btn-default btn-lg" >Button Default</a>
                    <!-- -->
                    <a href="#" class="btn btn-primary btn-lg" >Button Primary</a>
                    <!-- -->
                    <a href="#" class="btn btn-info btn-lg" >Button Info</a>
                    <!-- -->
                    <a href="#" class="btn btn-success btn-lg" >Button Success</a>
                    <!-- -->
                    <a href="#" class="btn btn-warning btn-lg" >Button Warning</a>
                    <!-- -->
                    <a href="#" class="btn btn-danger btn-lg" >Button Danger</a>
                    <!-- -->
                    <a href="#" class="btn btn-link btn-lg" >Button Link</a>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button
                </div>
                <div>
                    <!-- -->
                    <a href="#" class="btn btn-default" >Button Default</a>
                    <!-- -->
                    <a href="#" class="btn btn-primary" >Button Primary</a>
                    <!-- -->
                    <a href="#" class="btn btn-info" >Button Info</a>
                    <!-- -->
                    <a href="#" class="btn btn-success" >Button Success</a>
                    <!-- -->
                    <a href="#" class="btn btn-warning" >Button Warning</a>
                    <!-- -->
                    <a href="#" class="btn btn-danger" >Button Danger</a>
                    <!-- -->
                    <a href="#" class="btn btn-link" >Button Link</a>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button Small
                </div>
                <div>
                    <!-- -->
                    <a href="#" class="btn btn-default btn-sm" >Button Default</a>
                    <!-- -->
                    <a href="#" class="btn btn-primary btn-sm" >Button Primary</a>
                    <!-- -->
                    <a href="#" class="btn btn-info btn-sm" >Button Info</a>
                    <!-- -->
                    <a href="#" class="btn btn-success btn-sm" >Button Success</a>
                    <!-- -->
                    <a href="#" class="btn btn-warning btn-sm" >Button Warning</a>
                    <!-- -->
                    <a href="#" class="btn btn-danger btn-sm" >Button Danger</a>
                    <!-- -->
                    <a href="#" class="btn btn-link btn-sm" >Button Link</a>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button XSmall
                </div>
                <div>
                    <!-- -->
                    <a href="#" class="btn btn-default btn-xs" >Button Default</a>
                    <!-- -->
                    <a href="#" class="btn btn-primary btn-xs" >Button Primary</a>
                    <!-- -->
                    <a href="#" class="btn btn-info btn-xs" >Button Info</a>
                    <!-- -->
                    <a href="#" class="btn btn-success btn-xs" >Button Success</a>
                    <!-- -->
                    <a href="#" class="btn btn-warning btn-xs" >Button Warning</a>
                    <!-- -->
                    <a href="#" class="btn btn-danger btn-xs" >Button Danger</a>
                    <!-- -->
                    <a href="#" class="btn btn-link btn-xs" >Button Link</a>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button Block
                </div>
                <div>
                    <div  class="col-md-2">
                        <a href="#" class="btn btn-default btn-block" >Button Default</a>
                    </div>
                    <div  class="col-md-2">
                        <a href="#" class="btn btn-primary btn-block" >Button Primary</a>
                    </div>
                    <div  class="col-md-2">
                        <a href="#" class="btn btn-info btn-block" >Button Info</a>
                    </div>
                    <div  class="col-md-2">
                        <a href="#" class="btn btn-success btn-block" >Button Success</a>
                    </div>
                    <div  class="col-md-2">
                        <a href="#" class="btn btn-warning btn-block" >Button Warning</a>
                    </div>
                    <div  class="col-md-2">
                        <a href="#" class="btn btn-danger btn-block" >Button Danger</a>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button Active
                </div>
                <div>
                    <!-- -->
                    <a href="#" class="btn btn-default active" >Button Default</a>
                    <!-- -->
                    <a href="#" class="btn btn-primary active" >Button Primary</a>
                    <!-- -->
                    <a href="#" class="btn btn-info active" >Button Info</a>
                    <!-- -->
                    <a href="#" class="btn btn-success active" >Button Success</a>
                    <!-- -->
                    <a href="#" class="btn btn-warning active" >Button Warning</a>
                    <!-- -->
                    <a href="#" class="btn btn-danger active" >Button Danger</a>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button Disabled
                </div>
                <div>
                    <!-- -->
                    <a href="#" class="btn btn-default disabled" >Button Default</a>
                    <!-- -->
                    <a href="#" class="btn btn-primary disabled" >Button Primary</a>
                    <!-- -->
                    <a href="#" class="btn btn-info disabled" >Button Info</a>
                    <!-- -->
                    <a href="#" class="btn btn-success disabled" >Button Success</a>
                    <!-- -->
                    <a href="#" class="btn btn-warning disabled" >Button Warning</a>
                    <!-- -->
                    <a href="#" class="btn btn-danger disabled" >Button Danger</a>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button Group Large
                </div>
                <div>
                    <div class="btn-group btn-group-lg">
                        <!-- -->
                        <a href="#" class="btn btn-default " >Button Default</a>
                        <!-- -->
                        <a href="#" class="btn btn-primary " >Button Primary</a>
                        <!-- -->
                        <a href="#" class="btn btn-info " >Button Info</a>
                        <!-- -->
                        <a href="#" class="btn btn-success " >Button Success</a>
                        <!-- -->
                        <a href="#" class="btn btn-warning " >Button Warning</a>
                        <!-- -->
                        <a href="#" class="btn btn-danger " >Button Danger</a>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button Group
                </div>
                <div>
                    <div class="btn-group">
                        <!-- -->
                        <a href="#" class="btn btn-default " >Button Default</a>
                        <!-- -->
                        <a href="#" class="btn btn-primary " >Button Primary</a>
                        <!-- -->
                        <a href="#" class="btn btn-info " >Button Info</a>
                        <!-- -->
                        <a href="#" class="btn btn-success " >Button Success</a>
                        <!-- -->
                        <a href="#" class="btn btn-warning " >Button Warning</a>
                        <!-- -->
                        <a href="#" class="btn btn-danger " >Button Danger</a>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button Group Small
                </div>
                <div>
                    <div class="btn-group btn-group-sm">
                        <!-- -->
                        <a href="#" class="btn btn-default " >Button Default</a>
                        <!-- -->
                        <a href="#" class="btn btn-primary " >Button Primary</a>
                        <!-- -->
                        <a href="#" class="btn btn-info " >Button Info</a>
                        <!-- -->
                        <a href="#" class="btn btn-success " >Button Success</a>
                        <!-- -->
                        <a href="#" class="btn btn-warning " >Button Warning</a>
                        <!-- -->
                        <a href="#" class="btn btn-danger " >Button Danger</a>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button Group XSmall
                </div>
                <div>
                    <div class="btn-group btn-group-xs">
                        <!-- -->
                        <a href="#" class="btn btn-default " >Button Default</a>
                        <!-- -->
                        <a href="#" class="btn btn-primary " >Button Primary</a>
                        <!-- -->
                        <a href="#" class="btn btn-info " >Button Info</a>
                        <!-- -->
                        <a href="#" class="btn btn-success " >Button Success</a>
                        <!-- -->
                        <a href="#" class="btn btn-warning " >Button Warning</a>
                        <!-- -->
                        <a href="#" class="btn btn-danger " >Button Danger</a>
                    </div>
                </div>
                <div class="page-header">
                    Button Toolbar
                </div>
                <div>
                    <div class="btn-toolbar">
                        <div class="btn-group">
                            <a href="#" class="btn btn-default " >Button Default</a>
                            <!-- -->
                            <a href="#" class="btn btn-primary " >Button Primary</a>
                            <!-- -->
                            <a href="#" class="btn btn-info " >Button Info</a>
                        </div>
                        <div class="btn-group">
                            <a href="#" class="btn btn-success " >Button Success</a>
                            <!-- -->
                            <a href="#" class="btn btn-warning " >Button Warning</a>
                            <!-- -->
                            <a href="#" class="btn btn-danger " >Button Danger</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button Group Dropdown
                </div>
                <div>
                    <div class="btn-group">
                        <div class="btn-group">
                            <button class="btn btn-default dropdown-toggle" type="button">
                                <span>Default Dropdown</span><span class="caret">
                                    <!-- -->
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Item 1</a></li>
                                <li><a href="javascript:void(0);">Item 2</a></li>
                                <li><a href="javascript:void(0);">Item 3</a></li>
                                <li><a href="javascript:void(0);">Item 4</a></li>
                                <li><a href="javascript:void(0);">Item 5</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-primary dropdown-toggle" type="button">
                                <span>Primary Dropdown</span><span class="caret">
                                    <!-- -->
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Item 1</a></li>
                                <li><a href="javascript:void(0);">Item 2</a></li>
                                <li><a href="javascript:void(0);">Item 3</a></li>
                                <li><a href="javascript:void(0);">Item 4</a></li>
                                <li><a href="javascript:void(0);">Item 5</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-info dropdown-toggle" type="button">
                                <span>Info Dropdown</span><span class="caret">
                                    <!-- -->
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Item 1</a></li>
                                <li><a href="javascript:void(0);">Item 2</a></li>
                                <li><a href="javascript:void(0);">Item 3</a></li>
                                <li><a href="javascript:void(0);">Item 4</a></li>
                                <li><a href="javascript:void(0);">Item 5</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-success dropdown-toggle" type="button">
                                <span>Success Dropdown</span><span class="caret">
                                    <!-- -->
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Item 1</a></li>
                                <li><a href="javascript:void(0);">Item 2</a></li>
                                <li><a href="javascript:void(0);">Item 3</a></li>
                                <li><a href="javascript:void(0);">Item 4</a></li>
                                <li><a href="javascript:void(0);">Item 5</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-warning dropdown-toggle" type="button">
                                <span>Warning Dropdown</span><span class="caret">
                                    <!-- -->
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Item 1</a></li>
                                <li><a href="javascript:void(0);">Item 2</a></li>
                                <li><a href="javascript:void(0);">Item 3</a></li>
                                <li><a href="javascript:void(0);">Item 4</a></li>
                                <li><a href="javascript:void(0);">Item 5</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-danger dropdown-toggle" type="button">
                                <span>Danger Dropdown</span><span class="caret">
                                    <!-- -->
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Item 1</a></li>
                                <li><a href="javascript:void(0);">Item 2</a></li>
                                <li><a href="javascript:void(0);">Item 3</a></li>
                                <li><a href="javascript:void(0);">Item 4</a></li>
                                <li><a href="javascript:void(0);">Item 5</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Button Dropdown
                </div>
                <div>
                    <div>
                        <div class="btn-group">
                            <button class="btn btn-default dropdown-toggle" type="button">
                                <span>Default Dropdown</span><span class="caret">
                                    <!-- -->
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Item 1</a></li>
                                <li><a href="javascript:void(0);">Item 2</a></li>
                                <li><a href="javascript:void(0);">Item 3</a></li>
                                <li><a href="javascript:void(0);">Item 4</a></li>
                                <li><a href="javascript:void(0);">Item 5</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-primary dropdown-toggle" type="button">
                                <span>Primary Dropdown</span><span class="caret">
                                    <!-- -->
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Item 1</a></li>
                                <li><a href="javascript:void(0);">Item 2</a></li>
                                <li><a href="javascript:void(0);">Item 3</a></li>
                                <li><a href="javascript:void(0);">Item 4</a></li>
                                <li><a href="javascript:void(0);">Item 5</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-info dropdown-toggle" type="button">
                                <span>Info Dropdown</span><span class="caret">
                                    <!-- -->
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Item 1</a></li>
                                <li><a href="javascript:void(0);">Item 2</a></li>
                                <li><a href="javascript:void(0);">Item 3</a></li>
                                <li><a href="javascript:void(0);">Item 4</a></li>
                                <li><a href="javascript:void(0);">Item 5</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-success dropdown-toggle" type="button">
                                <span>Success Dropdown</span><span class="caret">
                                    <!-- -->
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Item 1</a></li>
                                <li><a href="javascript:void(0);">Item 2</a></li>
                                <li><a href="javascript:void(0);">Item 3</a></li>
                                <li><a href="javascript:void(0);">Item 4</a></li>
                                <li><a href="javascript:void(0);">Item 5</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-warning dropdown-toggle" type="button">
                                <span>Warning Dropdown</span><span class="caret">
                                    <!-- -->
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Item 1</a></li>
                                <li><a href="javascript:void(0);">Item 2</a></li>
                                <li><a href="javascript:void(0);">Item 3</a></li>
                                <li><a href="javascript:void(0);">Item 4</a></li>
                                <li><a href="javascript:void(0);">Item 5</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-danger dropdown-toggle" type="button">
                                <span>Danger Dropdown</span><span class="caret">
                                    <!-- -->
                                </span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Item 1</a></li>
                                <li><a href="javascript:void(0);">Item 2</a></li>
                                <li><a href="javascript:void(0);">Item 3</a></li>
                                <li><a href="javascript:void(0);">Item 4</a></li>
                                <li><a href="javascript:void(0);">Item 5</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Text Color
                </div>
                <div>
                    <p class="text-muted">
                        Text Muted
                    </p>
                    <p class="text-primary">
                        Text Primary
                    </p>
                    <p class="text-success">
                        Text Success
                    </p>
                    <p class="text-info">
                        Text Info
                    </p>
                    <p class="text-warning">
                        Text Warning
                    </p>
                    <p class="text-danger">
                        Text Danger
                    </p>
                </div>
            </div>
            <div class="col-md-12">
                <div class="page-header">
                    Background Color
                </div>
                <div>
                    <p class="bg-primary">
                        Text Primary
                    </p>
                    <p class="bg-success">
                        Text Success
                    </p>
                    <p class="bg-info">
                        Text Info
                    </p>
                    <p class="bg-warning">
                        Text Warning
                    </p>
                    <p class="bg-danger">
                        Text Danger
                    </p>
                </div>
            </div>
            <div class="col-md-12"></div>
        </div>
    </body>
</html>
Twitter: @asahina_alice