<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

<div role="tabpanel">            
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#home" data-toggle="tab" aria-controls="home" role="tab">
                Home
            </a>
        </li>
        <li role="presentation">
            <a href="#profile" data-toggle="tab" aria-controls="profile" role="tab" >
                Profile
            </a>
        </li>
        <li role="presentation">
            <a href="#messages" data-toggle="tab" aria-controls="messages" role="tab" >
                Messages
            </a>
        </li>
        <li role="presentation">
            <a href="#settings" data-toggle="tab" aria-controls="settings" role="tab" >
                Settings
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="home" role="tabpanel">
            Lorem ipsum dolor sit
            amet, consectetur adipiscing elit. In iaculis volutpat quam, non
            suscipit arcu accumsan at. Aliquam pellentesque.<a href="#">test focus 4</a>
        </div>
        <div class="tab-pane" id="profile" role="tabpanel">
            Sed ut perspiciatis unde omnis iste natus error sit 
            voluptatem accusantium doloremque laudantium, totam rem aperiam, 
            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
            sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
            adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore 
            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem 
            ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
            Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil 
            molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        </div>
        <div class="tab-pane" id="messages" role="tabpanel">
            At vero eos et accusamus et iusto odio dignissimos ducimus 
            qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas 
            molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa 
            qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem 
            rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est 
            eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, 
            omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et 
            aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae 
            sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, 
            ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
        </div>
        <div class="tab-pane" id="settings" role="tabpanel">
            Lorem ipsum dolor sit
            amet, consectetur adipiscing elit. In iaculis volutpat quam, non
            suscipit arcu accumsan at. Aliquam pellentesque.
        </div>
    </div>
</div>              

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

<ul class="nav nav-pills" role="tablist">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

<ul class="nav nav-tabs" role="tablist">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

<ul class="nav nav-pills" role="tablist">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand"><img src="../dist/images/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"/></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
        <span class="navbar-brand-text">News</span>
      </a>
    </div>
  </div>
</nav>

 <nav id="main_nav" class="navbar navbar-inverse mega-menu" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-mega">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="../dist/images/ORANGE_LOGO_rgb.jpg" alt="Link to the homepage"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-mega">
            <ul class="nav navbar-nav nav-menu">
                <li class="nav-item dropdown">
                    <a href="#" title="open the news menu" class="dropdown-toggle active" data-toggle="dropdown"><span class="sr-only">open the </span>News <b class="caret" aria-hidden="true"></b><span class="sr-only"> menu</span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <div class="row">
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <ul>
                                        <li><a href="#">news type 1</a></li>
                                        <li><a href="#">news type 2</a></li>
                                        <li><a href="#">news type 3</a></li>
                                        <li><a href="#">news type 4</a></li>
                                        <li><a href="#">news type 5</a></li>
                                    </ul>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <ul>
                                        <li><a href="#">news type 6</a></li>
                                        <li><a href="#">news type 7</a></li>
                                        <li><a href="#">news type 8</a></li>
                                        <li><a href="#">news type 9</a></li>
                                        <li><a href="#">news type 10</a></li>
                                    </ul>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <ul>
                                        <li><a href="#">news type 11</a></li>
                                        <li><a href="#">news type 12</a></li>
                                        <li><a href="#">news type 13</a></li>
                                        <li><a href="#">news type 14</a></li>
                                        <li><a href="#">news type 15</a></li>
                                    </ul>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <img alt="" style="height: 180px; display: block;" src="../dist/images/index.svg">
                                </div>
                                <a role="button" class="pull-right" href="#" title="close the menu"> 
                                    <span class="sr-only">close the menu</span><span class="glyphicon glyphicon-remove"  aria-hidden="true"></span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>

                <li class="nav-item dropdown">
                    <a href="#" title="open the shop menu" class="dropdown-toggle active" data-toggle="dropdown"><span class="sr-only">open the </span>Shop <b class="caret" aria-hidden="true"></b><span class="sr-only"> menu</span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <div class="row">
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <ul>
                                        <li><a href="#">action type 1</a></li>
                                        <li><a href="#">action type 2</a></li>
                                        <li><a href="#">action type 3</a></li>
                                        <li><a href="#">action type 4</a></li>
                                        <li><a href="#">action type 5</a></li>
                                    </ul>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <ul>
                                        <li><a href="#">action type 6</a></li>
                                        <li><a href="#">action type 7</a></li>
                                        <li><a href="#">action type 8</a></li>
                                        <li><a href="#">action type 9</a></li>
                                        <li><a href="#">action type 10</a></li>
                                    </ul>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <ul>
                                        <li><a href="#">action type 11</a></li>
                                        <li><a href="#">action type 12</a></li>
                                        <li><a href="#">action type 13</a></li>
                                        <li><a href="#">action type 14</a></li>
                                        <li><a href="#">action type 15</a></li>
                                    </ul>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <img alt="" style="height: 180px; display: block;" src="../dist/images/index.svg">
                                </div>
                                <a role="button" class="pull-right" href="#" title="close the menu"> 
                                    <span class="sr-only">close the menu</span><span class="glyphicon glyphicon-remove"  aria-hidden="true"></span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>    
                <li><a href="#">Services</a></li>
                <li><a href="#">Support</a></li>
                <li><a href="#">Business</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <b class="caret" aria-hidden="true"></b></a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation"><a href="#" role="menuitem">Action</a></li>
                        <li role="presentation"><a href="#" role="menuitem">Another action</a></li>
                        <li role="presentation"><a href="#" role="menuitem">Something else here</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a href="#" role="menuitem">Separated link</a></li>
                    </ul>						
                </li>
                <li class="nav-item dropdown">
                    <a href="#" title="open the news menu" class="dropdown-toggle active" data-toggle="dropdown"><span class="sr-only">open the </span>News <b class="caret" aria-hidden="true"></b><span class="sr-only"> menu</span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <div class="row">
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <ul>
                                        <li><a href="#">news type 1</a></li>
                                        <li><a href="#">news type 2</a></li>
                                        <li><a href="#">news type 3</a></li>
                                        <li><a href="#">news type 4</a></li>
                                        <li><a href="#">news type 5</a></li>
                                    </ul>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <ul>
                                        <li><a href="#">news type 6</a></li>
                                        <li><a href="#">news type 7</a></li>
                                        <li><a href="#">news type 8</a></li>
                                        <li><a href="#">news type 9</a></li>
                                        <li><a href="#">news type 10</a></li>
                                    </ul>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <ul>
                                        <li><a href="#">news type 11</a></li>
                                        <li><a href="#">news type 12</a></li>
                                        <li><a href="#">news type 13</a></li>
                                        <li><a href="#">news type 14</a></li>
                                        <li><a href="#">news type 15</a></li>
                                    </ul>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <img alt="" style="height: 180px; display: block;" src="../dist/images/index.svg">
                                </div>
                                <a role="button" class="pull-right" href="#" title="close the menu"> 
                                    <span class="sr-only">close the menu</span><span class="glyphicon glyphicon-remove"  aria-hidden="true"></span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="nav-item" id="id_for_cdu_link"></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

    <div class="o-nav-local">
        <hr aria-hidden="true">
        <nav class="container">
            <a class="visible-xs-block local-select" data-toggle="collapse" href="#localNav1" aria-haspopup="true">target</a>
            <ul class="nav nav-local collapse" id="localNav1">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
                <li role="presentation"><a href="#">Messages</a></li>
            </ul>
        </nav>
        <hr aria-hidden="true">
    </div>

    <div class="o-nav-local inverse">
        <hr aria-hidden="true">
        <nav class="container">
            <a class="visible-xs-block local-select" data-toggle="collapse" href="#localNav2" aria-haspopup="true">target</a>
            <ul class="nav nav-local collapse" id="localNav2">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
                <li role="presentation"><a href="#">Messages</a></li>
            </ul>
        </nav>
        <hr aria-hidden="true">
    </div>

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

<p class="navbar-text">Signed in as Mark Otto</p>

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

<nav class="navbar navbar-inverse">
  ...
</nav>

<nav class="o-stepbar">
    <ol>
        <li class="done stepbar-item">
            <a class="stepbar-link" href="#" title="Step 1 : Voluptatem">
                <span class="step-number">1</span>
                <span class="step-title">Voluptatem</span>
            </a>
        </li>
        <li class="stepbar-item current">
            <a class="stepbar-link" href="#" title="Step 2 : Aperiam">
                <span class="step-number">2</span>
                <span class="step-title">Aperiam</span>
            </a>
        </li>
        <li class="stepbar-item next">
            <a class="stepbar-link" href="#" title="Step 3 : Accusantinum">
                <span class="step-number">3</span>
                <span class="step-title">Accusantinum</span>
            </a>
        </li>
        <li class="stepbar-item next">
            <a class="stepbar-link" href="#" title="Step 4 : Ipsam">
                <span class="step-number">4</span>
                <span class="step-title">Ipsam</span>
            </a>
        </li>
        <li class="stepbar-item next">
            <a class="stepbar-link" href="#" title="Step 5 : Aspernatur">
                <span class="step-number">5</span>
                <span class="step-title">Aspernatur</span>
            </a>
        </li>
    </ol>
</nav>

<nav class="o-stepbar xs-numbers">
    <ol>
        <li class="current stepbar-item">
            <a class="stepbar-link" href="#" title="Step 1 : Sign in">
                <span class="step-number">1</span>
                <span class="step-title">Sign in</span>
            </a>
        </li>
        <li class="stepbar-item next">
            <div class="stepbar-link" title="Step 2 : Review">
                <span class="step-number">2</span>
                <span class="step-title">Review</span>
            </div>
        </li>
        <li class="stepbar-item next">
            <div class="stepbar-link" title="Step 3 : Delivery">
                <span class="step-number">3</span>
                <span class="step-title">Delivery</span>
            </div>
        </li>
        <li class="stepbar-item next">
            <div class="stepbar-link" title="Step 4 : Payment">
                <span class="step-number">4</span>
                <span class="step-title">Payment</span>
            </div>
        </li>
    </ol>
</nav>

<nav class="o-stepbar xs-labels">
    <ol>
        <li class="current stepbar-item">
            <a class="stepbar-link" href="#" title="Step 1 : Sign in">
                <span class="step-number">1</span>
                <span class="step-title">Sign in</span>
            </a>
        </li>
        <li class="stepbar-item next">
            <div class="stepbar-link" title="Step 2 : Review">
                <span class="step-number">2</span>
                <span class="step-title">Review</span>
            </div>
        </li>
        <li class="stepbar-item next">
            <div class="stepbar-link" title="Step 3 : Delivery">
                <span class="step-number">3</span>
                <span class="step-title">Delivery</span>
            </div>
        </li>
    </ol>
</nav>

<div class="form-group toggle row">
  <label for="checkbox1" class="col-md-3 col-xs-8">Default</label>
  <input class="checkbox sr-only checked" id="checkbox1" checked="" type="checkbox">
  <label for="checkbox1" class="checkbox-label col-xs-3" aria-hidden="true">
    <span class="on icon-checkbox_tick"></span>
    <span class="off icon-delete"></span>
  </label>
</div>

<div class="form-group toggle row">
  <label for="checkbox2" class="col-md-3 col-xs-8">Success</label>
  <input class="checkbox sr-only checked success" id="checkbox2" checked="" type="checkbox">
  <label for="checkbox2" class="checkbox-label col-xs-3" aria-hidden="true">
    <span class="on icon-checkbox_tick"></span>
    <span class="off icon-delete"></span>
  </label>
</div>

<div class="form-group toggle row">
  <label for="checkbox4" class="col-md-3 col-xs-8">Rounded</label>
  <input class="checkbox success sr-only checked" id="checkbox4" checked="" type="checkbox">
  <label for="checkbox4" class="checkbox-label rounded col-xs-3" aria-hidden="true" style="width: 78px;">
    <span class="on">On</span>
    <span class="off">Off</span>
  </label>
</div>

<div class="btn-group" data-toggle="buttons" role="group">
  <label class="btn btn-secondary active">
    <input name="options" id="option1" autocomplete="off" checked="" type="radio"> 1
  </label>
  <label class="btn btn-secondary">
    <input name="options" id="option2" autocomplete="off" type="radio"> 2
  </label>
  <label class="btn btn-secondary">
    <input name="options" id="option3" autocomplete="off" type="radio"> 3
  </label>
</div>

<div class="btn-group no-outline" data-toggle="buttons" role="group">
  <label class="btn btn-secondary active">
    <input name="options" id="option21" autocomplete="off" checked="" type="radio"> 1
  </label>
  <label class="btn btn-secondary">
    <input name="options" id="option22" autocomplete="off" type="radio"> 2
  </label>
  <label class="btn btn-secondary">
    <input name="options" id="option33" autocomplete="off" type="radio"> 3
  </label>
</div>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="bordered disabled">
      <a href="#">
        <span aria-hidden="true" class="icon-arrow-previous"></span>
        <span class="sr-only">previous</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="bordered">
      <a href="#">
        <span aria-hidden="true" class="icon-arrow-next"></span>
        <span class="sr-only">next</span>
      </a>
    </li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled bordered"><a href="#" aria-label="Previous"><span aria-hidden="true" class="icon-arrow-previous"></span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled bordered">
      <span>
        <span aria-hidden="true" class="icon-arrow-previous"></span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>