Bootstrap Snippet Bootstrap Growl Styled Navbar using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="[ navbar ][ animate navbar-pink ]" role="navigation">
        <div class="[ container ]">
            <div class="[ navbar-header ]">
                <button type="button" class="[ navbar-toggle ]" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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 ][ animate ]" href="#home">Bootstrap Growl</a>
            </div>
            <div class="[ collapse navbar-collapse ]" id="bs-example-navbar-collapse-1">
                <ul class="[ nav navbar-nav navbar-right ]">
                    <li class="[ aniamte animate-2s ]"><a href="#growl-builder" class="[ aniamte animate-2s ]">Growl Builder</a></li>
                    <li class="[ dropdown ]">
                        <a href="#growl-documentation" class="[ aniamte animate-2s ]">Documentation</a>
                        <a href="#growl-documentation-dropdown" class="[ dropdown-toggle ][ aniamte animate-2s ]" data-toggle="dropdown"><span class="caret"></span></a>
                        <ul class="[ dropdown-menu ]" role="menu">
                            <li><a href="#growl-documentation-options" class="[ aniamte animate-2s ]" tabindex="-1">Options</a></li>
                            <li><a href="#growl-documentation-settings" class="[ aniamte animate-2s ]" tabindex="-1">Settings</a></li>
                            <li><a href="#growl-documentation-methods" class="[ aniamte animate-2s ]" tabindex="-1">Methods</a></li>
                        </ul>
                    </li>
                    <li class="[ aniamte animate-2s ]"><a href="#growl-examples" class="[ aniamte animate-2s ]">Examples</a></li>
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="[ container ]">
        <div class="[ row ]">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(//fonts.googleapis.com/css?family=Roboto:500,700);
.animate {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.animate-2s {
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
.navbar-pink {
    background-color: rgb(255, 121, 185);
    border-color: rgb(194, 97, 135);
    border-radius: 0;
    border-top-width: 0;
    color: rgb(255, 255, 255);
    font-family: Roboto,sans-serif;
    font-weight: 500;
    margin-bottom: 0;
}
.navbar-pink .navbar-toggle .icon-bar {
    background-color: rgb(255, 255, 255);   
}
.navbar-pink a.navbar-brand {
    color: rgb(255, 255, 255);    
    font-weight: 700;
}
.navbar-pink .navbar-nav > li > a,
.navbar-pink .navbar-nav > li > .dropdown-menu > li > a {
    color: rgb(255, 255, 255);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Growl Styled Navbar"
Bootstrap 3.2.0 Snippet by mouse0270

Related: See More

Questions / Comments:

"Bootstrap Growl Styled Navbar" Bootstrap 3.2.0 Snippet by mouse0270

Related: See More

Questions / Comments:

"Bootstrap Growl Styled Navbar"
Bootstrap 3.2.0 Snippet by mouse0270