Bootstrap Headers:

Bootstrap Dynamic Header with Style Change

We all know how much the appearance of a website can affect its traffic. Many visitors judge the entire website on what they see first when they enter the site. For content-rich websites that tend to have a complex user interface, a drop-down navigation bar is a much more ideal option. You can include any important link in your navbar and don’t have to worry about running out of space as a drop-down navbar is hidden when the user does not need it. it only expands when you need to visit a link from the list which isn’t a problem. This is great because putting too many links in a horizontal header will make it look busy and clutters the page heavily.

A beautiful header has the ability to attract a lot of people to your website. Due to this reason, we have got a beautiful Bootstrap dynamic navbar for you. It is a drop-down menu type header so normally, only the home button and the toggle icon are visible. When you click this icon however, you can see the expanded version with all the pages you set for it as a list. The background and font can be changed to a range of gradient colours. The edges of the box can also be either squared or rounded. This Bootstrap navbar animation template offers great customization options. If you wish to use the animating navbar code, just scroll down to the code section under this post.

Animating Navbar Code

Bootstrap Navbar Animation

Bootstrap Dynamic Navbar

<!-- This script got from frontendfreecode.com -->
<div id="nav-colors">
    Navbar
    <button id="pink" class="btn"></button>
    <button id="red" class="btn"></button>
    <button id="purple" class="btn"></button>
    <button id="blue" class="btn"></button>
    <button id="green" class="btn"></button>
    <button id="yellow" class="btn"></button>
    <button id="orange" class="btn"></button>
</div>
<div id="font-colors">
    Font
    <button id="white" class="btn"></button>
    <button id="black" class="btn"></button>
</div>
<div id="edges">
    Edges
    <button id="rounded" class="btn">Rounded</button>
    <button id="square" class="btn">Square</button>
</div>
<h1> Bootstrap Navbar</h1>
<nav class="navbar">
    <div class="container-fluid">
        <!-- Nav Header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><span class="fa fa-home"></span><span class="link"> Home</span></a>
        </div>
        <!-- Nav Collapse -->
        <div class="navbar-collapse collapse" id="collapse-1">
            <!-- Nav Left -->
            <ul class="nav navbar-nav">
                <!-- Products -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="fa fa-tags"></span><span class="link"> Products</span> <span class="fa fa-caret-down"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="fa fa-tag"></span> Catalogue 1</a></li>
                        <li><a href="#"><span class="fa fa-tag"></span> Catalogue 2</a></li>
                    </ul>
                </li>
                <!-- Services -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="fa fa-gears"></span><span class="link"> Services</span> <span class="fa fa-caret-down"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="fa fa-gear" /></span> Service 1</a></li>
                        <li><a href="#"><span class="fa fa-gear" /></span> Service 2</a></li>
                        <li><a href="#"><span class="fa fa-gear" /></span> Service 3</a></li>
                    </ul>
                </li>
                <!-- About -->
                <li><a href="#"><span class="fa fa-info-circle"></span><span class="link"> About</span></a></li>
                <!-- Contact -->
                <li><a href="#"><span class="fa fa-phone"></span><span class="link"> Contact</span></a></li>
            </ul>
            <!-- Nav Right -->
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn"><span class="fa fa-search"></span></button>
            </form>
        </div>
    </div>
</nav><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@import url("https://fonts.googleapis.com/css?family=Roboto");

body {
    margin: 10%;
    color: white;
    background: #111111;
    font-family: "Roboto", sans-serif;
}

#nav-colors, #font-colors, #edges {
    margin-top: 10px;
}

    #nav-colors .btn, #font-colors .btn, #edges .btn {
        display: inline-block;
        padding: 10px;
        margin: 0 5px;
        border: 2px solid #111111;
        transition: 0.2s ease;
    }

        #nav-colors .btn:hover, #font-colors .btn:hover, #edges .btn:hover {
            border: 2px solid white;
        }

    #nav-colors #pink {
        background: linear-gradient(to right, #ff5858, #f857a6);
    }

    #nav-colors #red {
        background: linear-gradient(to right, #d31027, #ea384d);
    }

    #nav-colors #purple {
        background: linear-gradient(to right, #41295a, #2f0743);
    }

    #nav-colors #blue {
        background: linear-gradient(to right, #396afc, #2948ff);
    }

    #nav-colors #green {
        background: linear-gradient(to right, #add100, #7b920a);
    }

    #nav-colors #yellow {
        background: linear-gradient(to right, #f7971e, #ffd200);
    }

    #nav-colors #orange {
        background: linear-gradient(to right, #e43a15, #e65245);
    }

    #font-colors #white {
        background: white;
    }

    #font-colors #black {
        background: black;
    }

    #edges #rounded {
        background: black;
    }

    #edges #square {
        background: black;
        border-radius: 0px;
    }

        #edges #rounded:hover, #edges #square:hover {
            color: white;
        }

.navbar {
    border: 0;
    border-radius: 0;
    background: linear-gradient(to right, #ff5858, #f857a6);
}

    .navbar .nav li > a, .navbar .navbar-brand {
        max-height: 50px;
        width: auto;
        background: transparent !important;
        font-size: 18px;
        transition: 0.2s ease-in-out;
    }

        .navbar .nav li > a:hover, .navbar .navbar-brand:hover {
            background-color: rgba(255, 255, 255, 0.2);
            font-size: 14px;
        }

            .navbar .nav li > a:hover .link, .navbar .navbar-brand:hover .link {
                width: 100%;
                padding: 0 5px 0 5px;
                visibility: visible;
                font-size: 14px;
            }

    .navbar .link {
        width: 0;
        font-family: "Roboto", sans-serif;
        transition: 0.2s ease-in-out;
        visibility: hidden;
        font-size: 0px;
    }

    .navbar span {
        color: white;
    }

    .navbar .navbar-toggle {
        padding-right: 0;
    }

        .navbar .navbar-toggle .icon-bar {
            background: white;
        }

    .navbar .navbar-collapse {
        display: none;
    }

    .navbar button {
        background: transparent;
    }

        .navbar button[type=submit] {
            padding-right: 0;
        }

            .navbar button[type=submit] span {
                transition: 0.3s ease-in-out;
            }

            .navbar button[type=submit]:hover span {
                transform: scale(1.3) rotate(90deg);
            }

    .navbar form {
        padding: 0;
    }

        .navbar form .form-control {
            border: 0;
            border-radius: 0;
            color: black;
            font-weight: bold;
            background: rgba(255, 255, 255, 0.7);
            transition: 0.2s ease-in-out;
        }

            .navbar form .form-control:hover {
                background: white;
            }

    .navbar .dropdown .fa-caret-down {
        padding-left: 3px;
        font-size: 18px;
        transition: 0.4s ease;
    }

    .navbar .dropdown.open {
        background-color: rgba(255, 255, 255, 0.2);
        font-size: 14px;
    }

        .navbar .dropdown.open .link {
            width: 100%;
            visibility: visible;
            font-size: 14px;
            padding: 0 5px 0 5px;
        }

        .navbar .dropdown.open .dropdown-toggle {
            font-size: 14px;
        }

        .navbar .dropdown.open .fa-caret-down {
            transform: rotate(180deg);
        }

    .navbar .dropdown .dropdown-menu {
        min-width: 0px !important;
        width: 100%;
        background: #ff5858;
        text-align: center;
        border-radius: 0;
    }

        .navbar .dropdown .dropdown-menu li, .navbar .dropdown .dropdown-menu a {
            color: white;
            font-size: 14px;
            line-height: 30px;
        }

            .navbar .dropdown .dropdown-menu li:hover, .navbar .dropdown .dropdown-menu a:hover {
                color: white;
                letter-spacing: 1px;
                background: transparent;
            }

        .navbar .dropdown .dropdown-menu a {
            padding: 0 15px 0 15px;
        }

@media (max-width: 769px) {
    .navbar .link {
        padding-left: 10px;
        visibility: visible;
        width: 100%;
        font-size: 14px;
    }

    .navbar .navbar-brand .link {
        visibility: hidden;
    }

    .dropdown .dropdown-menu {
        text-align: left !important;
    }

    button[type=submit] {
        width: 50%;
        float: left;
    }

    .navbar-form {
        border: 0;
    }

    .form-group {
        padding: 0;
        margin: 0;
    }

        .form-group input {
            width: 50%;
            float: left;
        }
}

// Open close dropdown on click
$("li.dropdown").click(function () {
    if ($(this).hasClass("open")) {
        $(this).find(".dropdown-menu").slideUp("fast");
        $(this).removeClass("open");
    }
    else {
        $(this).find(".dropdown-menu").slideDown("fast");
        $(this).toggleClass("open");
    }
});

// Close dropdown on mouseleave
$("li.dropdown").mouseleave(function () {
    $(this).find(".dropdown-menu").slideUp("fast");
    $(this).removeClass("open");
});

// Navbar toggle
$(".navbar-toggle").click(function () {
    $(".navbar-collapse").toggleClass("collapse").slideToggle("fast");
});

// Navbar colors
$("#nav-colors > .btn").click(function () {
    if ($(this).is("#pink")) {
        $(".navbar").css("background", "linear-gradient(to right, #ff5858, #f857a6)");
        $(".dropdown-menu").css("background", "#ff5858");
    }
    else if ($(this).is("#red")) {
        $(".navbar").css("background", "linear-gradient(to right, #d31027, #ea384d)");
        $(".dropdown-menu").css("background", "#d31027");
    }
    else if ($(this).is("#purple")) {
        $(".navbar").css("background", "linear-gradient(to right, #41295a, #2f0743)");
        $(".dropdown-menu").css("background", "#41295a");
    }
    else if ($(this).is("#blue")) {
        $(".navbar").css("background", "linear-gradient(to right, #396afc, #2948ff)");
        $(".dropdown-menu").css("background", "#396afc");
    }
    else if ($(this).is("#green")) {
        $(".navbar").css("background", "linear-gradient(to right, #add100, #7b920a)");
        $(".dropdown-menu").css("background", "#add100");
    }
    else if ($(this).is("#yellow")) {
        $(".navbar").css("background", "linear-gradient(to right, #f7971e, #ffd200)");
        $(".dropdown-menu").css("background", "#f7971e");
    }
    else if ($(this).is("#orange")) {
        $(".navbar").css("background", "linear-gradient(to right, #e43a15, #e65245)");
        $(".dropdown-menu").css("background", "#e43a15");
    }
})

// Font colors
$("#font-colors > .btn").click(function () {
    if ($(this).is("#white")) {
        $(".navbar .fa, .link, a").css("color", "white");
        $(".icon-bar").css("background", "white");
    }
    else if ($(this).is("#black")) {
        $(".navbar .fa, .link, a").css("color", "black");
        $(".icon-bar").css("background", "black");
    }
})

// edges
$("#edges > .btn").click(function () {
    if ($(this).is("#rounded")) {
        $(".navbar, .form-control").css("border-radius", "8px");
        if ($(window).width() > 768) {
            $(".dropdown-menu").css({
                "border-bottom-right-radius": "8px",
                "border-bottom-left-radius": "8px"
            });
        }
    }
    else if ($(this).is("#square")) {
        $(".navbar, .form-control").css("border-radius", "0");
        $(".dropdown-menu").css({
            "border-bottom-right-radius": "0",
            "border-bottom-left-radius": "0"
        });
    }
})

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto");

body {
    margin: 10%;
    color: white;
    background: #111111;
    font-family: "Roboto", sans-serif;
}

#nav-colors, #font-colors, #edges {
    margin-top: 10px;
}

    #nav-colors .btn, #font-colors .btn, #edges .btn {
        display: inline-block;
        padding: 10px;
        margin: 0 5px;
        border: 2px solid #111111;
        transition: 0.2s ease;
    }

        #nav-colors .btn:hover, #font-colors .btn:hover, #edges .btn:hover {
            border: 2px solid white;
        }

    #nav-colors #pink {
        background: linear-gradient(to right, #ff5858, #f857a6);
    }

    #nav-colors #red {
        background: linear-gradient(to right, #d31027, #ea384d);
    }

    #nav-colors #purple {
        background: linear-gradient(to right, #41295a, #2f0743);
    }

    #nav-colors #blue {
        background: linear-gradient(to right, #396afc, #2948ff);
    }

    #nav-colors #green {
        background: linear-gradient(to right, #add100, #7b920a);
    }

    #nav-colors #yellow {
        background: linear-gradient(to right, #f7971e, #ffd200);
    }

    #nav-colors #orange {
        background: linear-gradient(to right, #e43a15, #e65245);
    }

    #font-colors #white {
        background: white;
    }

    #font-colors #black {
        background: black;
    }

    #edges #rounded {
        background: black;
    }

    #edges #square {
        background: black;
        border-radius: 0px;
    }

        #edges #rounded:hover, #edges #square:hover {
            color: white;
        }

.navbar {
    border: 0;
    border-radius: 0;
    background: linear-gradient(to right, #ff5858, #f857a6);
}

    .navbar .nav li > a, .navbar .navbar-brand {
        max-height: 50px;
        width: auto;
        background: transparent !important;
        font-size: 18px;
        transition: 0.2s ease-in-out;
    }

        .navbar .nav li > a:hover, .navbar .navbar-brand:hover {
            background-color: rgba(255, 255, 255, 0.2);
            font-size: 14px;
        }

            .navbar .nav li > a:hover .link, .navbar .navbar-brand:hover .link {
                width: 100%;
                padding: 0 5px 0 5px;
                visibility: visible;
                font-size: 14px;
            }

    .navbar .link {
        width: 0;
        font-family: "Roboto", sans-serif;
        transition: 0.2s ease-in-out;
        visibility: hidden;
        font-size: 0px;
    }

    .navbar span {
        color: white;
    }

    .navbar .navbar-toggle {
        padding-right: 0;
    }

        .navbar .navbar-toggle .icon-bar {
            background: white;
        }

    .navbar .navbar-collapse {
        display: none;
    }

    .navbar button {
        background: transparent;
    }

        .navbar button[type=submit] {
            padding-right: 0;
        }

            .navbar button[type=submit] span {
                transition: 0.3s ease-in-out;
            }

            .navbar button[type=submit]:hover span {
                transform: scale(1.3) rotate(90deg);
            }

    .navbar form {
        padding: 0;
    }

        .navbar form .form-control {
            border: 0;
            border-radius: 0;
            color: black;
            font-weight: bold;
            background: rgba(255, 255, 255, 0.7);
            transition: 0.2s ease-in-out;
        }

            .navbar form .form-control:hover {
                background: white;
            }

    .navbar .dropdown .fa-caret-down {
        padding-left: 3px;
        font-size: 18px;
        transition: 0.4s ease;
    }

    .navbar .dropdown.open {
        background-color: rgba(255, 255, 255, 0.2);
        font-size: 14px;
    }

        .navbar .dropdown.open .link {
            width: 100%;
            visibility: visible;
            font-size: 14px;
            padding: 0 5px 0 5px;
        }

        .navbar .dropdown.open .dropdown-toggle {
            font-size: 14px;
        }

        .navbar .dropdown.open .fa-caret-down {
            transform: rotate(180deg);
        }

    .navbar .dropdown .dropdown-menu {
        min-width: 0px !important;
        width: 100%;
        background: #ff5858;
        text-align: center;
        border-radius: 0;
    }

        .navbar .dropdown .dropdown-menu li, .navbar .dropdown .dropdown-menu a {
            color: white;
            font-size: 14px;
            line-height: 30px;
        }

            .navbar .dropdown .dropdown-menu li:hover, .navbar .dropdown .dropdown-menu a:hover {
                color: white;
                letter-spacing: 1px;
                background: transparent;
            }

        .navbar .dropdown .dropdown-menu a {
            padding: 0 15px 0 15px;
        }

@media (max-width: 769px) {
    .navbar .link {
        padding-left: 10px;
        visibility: visible;
        width: 100%;
        font-size: 14px;
    }

    .navbar .navbar-brand .link {
        visibility: hidden;
    }

    .dropdown .dropdown-menu {
        text-align: left !important;
    }

    button[type=submit] {
        width: 50%;
        float: left;
    }

    .navbar-form {
        border: 0;
    }

    .form-group {
        padding: 0;
        margin: 0;
    }

        .form-group input {
            width: 50%;
            float: left;
        }
}
</style>

</head>
<body>
<div id="nav-colors">
    Navbar
    <button id="pink" class="btn"></button>
    <button id="red" class="btn"></button>
    <button id="purple" class="btn"></button>
    <button id="blue" class="btn"></button>
    <button id="green" class="btn"></button>
    <button id="yellow" class="btn"></button>
    <button id="orange" class="btn"></button>
</div>
<div id="font-colors">
    Font
    <button id="white" class="btn"></button>
    <button id="black" class="btn"></button>
</div>
<div id="edges">
    Edges
    <button id="rounded" class="btn">Rounded</button>
    <button id="square" class="btn">Square</button>
</div>
<h1> Bootstrap Navbar</h1>
<nav class="navbar">
    <div class="container-fluid">
        <!-- Nav Header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><span class="fa fa-home"></span><span class="link"> Home</span></a>
        </div>
        <!-- Nav Collapse -->
        <div class="navbar-collapse collapse" id="collapse-1">
            <!-- Nav Left -->
            <ul class="nav navbar-nav">
                <!-- Products -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="fa fa-tags"></span><span class="link"> Products</span> <span class="fa fa-caret-down"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="fa fa-tag"></span> Catalogue 1</a></li>
                        <li><a href="#"><span class="fa fa-tag"></span> Catalogue 2</a></li>
                    </ul>
                </li>
                <!-- Services -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="fa fa-gears"></span><span class="link"> Services</span> <span class="fa fa-caret-down"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="fa fa-gear" /></span> Service 1</a></li>
                        <li><a href="#"><span class="fa fa-gear" /></span> Service 2</a></li>
                        <li><a href="#"><span class="fa fa-gear" /></span> Service 3</a></li>
                    </ul>
                </li>
                <!-- About -->
                <li><a href="#"><span class="fa fa-info-circle"></span><span class="link"> About</span></a></li>
                <!-- Contact -->
                <li><a href="#"><span class="fa fa-phone"></span><span class="link"> Contact</span></a></li>
            </ul>
            <!-- Nav Right -->
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn"><span class="fa fa-search"></span></button>
            </form>
        </div>
    </div>
</nav><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
// Open close dropdown on click
$("li.dropdown").click(function () {
    if ($(this).hasClass("open")) {
        $(this).find(".dropdown-menu").slideUp("fast");
        $(this).removeClass("open");
    }
    else {
        $(this).find(".dropdown-menu").slideDown("fast");
        $(this).toggleClass("open");
    }
});

// Close dropdown on mouseleave
$("li.dropdown").mouseleave(function () {
    $(this).find(".dropdown-menu").slideUp("fast");
    $(this).removeClass("open");
});

// Navbar toggle
$(".navbar-toggle").click(function () {
    $(".navbar-collapse").toggleClass("collapse").slideToggle("fast");
});

// Navbar colors
$("#nav-colors > .btn").click(function () {
    if ($(this).is("#pink")) {
        $(".navbar").css("background", "linear-gradient(to right, #ff5858, #f857a6)");
        $(".dropdown-menu").css("background", "#ff5858");
    }
    else if ($(this).is("#red")) {
        $(".navbar").css("background", "linear-gradient(to right, #d31027, #ea384d)");
        $(".dropdown-menu").css("background", "#d31027");
    }
    else if ($(this).is("#purple")) {
        $(".navbar").css("background", "linear-gradient(to right, #41295a, #2f0743)");
        $(".dropdown-menu").css("background", "#41295a");
    }
    else if ($(this).is("#blue")) {
        $(".navbar").css("background", "linear-gradient(to right, #396afc, #2948ff)");
        $(".dropdown-menu").css("background", "#396afc");
    }
    else if ($(this).is("#green")) {
        $(".navbar").css("background", "linear-gradient(to right, #add100, #7b920a)");
        $(".dropdown-menu").css("background", "#add100");
    }
    else if ($(this).is("#yellow")) {
        $(".navbar").css("background", "linear-gradient(to right, #f7971e, #ffd200)");
        $(".dropdown-menu").css("background", "#f7971e");
    }
    else if ($(this).is("#orange")) {
        $(".navbar").css("background", "linear-gradient(to right, #e43a15, #e65245)");
        $(".dropdown-menu").css("background", "#e43a15");
    }
})

// Font colors
$("#font-colors > .btn").click(function () {
    if ($(this).is("#white")) {
        $(".navbar .fa, .link, a").css("color", "white");
        $(".icon-bar").css("background", "white");
    }
    else if ($(this).is("#black")) {
        $(".navbar .fa, .link, a").css("color", "black");
        $(".icon-bar").css("background", "black");
    }
})

// edges
$("#edges > .btn").click(function () {
    if ($(this).is("#rounded")) {
        $(".navbar, .form-control").css("border-radius", "8px");
        if ($(window).width() > 768) {
            $(".dropdown-menu").css({
                "border-bottom-right-radius": "8px",
                "border-bottom-left-radius": "8px"
            });
        }
    }
    else if ($(this).is("#square")) {
        $(".navbar, .form-control").css("border-radius", "0");
        $(".dropdown-menu").css({
            "border-bottom-right-radius": "0",
            "border-bottom-left-radius": "0"
        });
    }
})
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars

Feel The Power

Bootstrap Headers:

Bootstrap Dynamic Header with Style Change

Animating Navbar Code

Bootstrap Navbar Animation

Bootstrap Dynamic Navbar