Let me start with a navbar example that contains different elements. This navbar example includes a brand text, a few links, and a dropdown menu with inner links. Besides, an inline form is also used for searching the website. Have a look at the output and complete code.<\/p>\n
I will recommend you copy the complete code of all examples in your IDE and run it locally to see how it looks.<\/p>\n
![\"Bootstrap](\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/23-1-Bootstrap-4-navbar.png\")
<\/p>\n
Complete code for this example:<\/strong><\/p>\n Note: <\/strong>As this menu uses a dropdown menu<\/a>, it also requires you to refer to the Bootstrap JS file along with jQuery.<\/p>\n The same menu will look like this on the smaller devices (smartphones etc.):<\/p>\n So, the navbar is created by using the <nav><\/strong> tag where .navbar<\/strong> class is assigned. There, the .navbar-light<\/strong><\/em> is also used for the theme of navbar. This is used in combination with the bg-[contextual color]<\/strong><\/em> that sets the theme of navbar. More examples coming up for theming the navbar.<\/p>\n For using the logo\/brand or slogan in the navbar, you may use the .navbar-brand<\/em><\/strong> class in an anchor tag. You may also apply this class to other elements, however, <a> works better.<\/p>\n For example, I used this in above example:<\/p>\n <nav class=”navbar navbar-expand-lg navbar-light bg-primary”><\/p>\n <a class=”navbar-brand text-light” href=”https:\/\/www.jquery-az.com\/” >Slogan\/Logo<\/a><\/p><\/blockquote>\n You may also use <span> with h1 as follows:<\/p>\n <span class=”navbar-brand text-light mb-0 h1″>Slogan\/Logo<\/span><\/p><\/blockquote>\n There, you may also set the logo image rather than using the text or text\/logo combination as well:<\/p>\n The sample code for the logo:<\/strong><\/p>\n See the complete code and output on the example page.<\/p>\n You may also include the dropdown menus in the navbar. Simply use the markup of dropdown menu (explained in its tutorial: Bootstrap 4 dropdowns<\/a>) in the ,<li> tag with .nav-item <\/em><\/strong>and .dropdown<\/em><\/strong> classes.<\/p>\n In the following example, I have used link and button dropdowns in the navbar with various classes. The navbar-light bg-warning<\/em><\/strong> combination is used for the theme of navbar. The dropdown colors are also set by using text utility classes. While the .btn-secondary<\/em><\/strong> is used for the button dropdown.<\/p>\n Have a look:<\/p>\n The markup:<\/strong><\/p>\n The navbar also supports inline forms. These may be useful for site search form with a textbox and search button. You may also use login form or subscription form there.<\/p>\n For including a form in the navbar, use the .form-inline<\/strong><\/em> class in the <form> tag and place form controls inside it.<\/p>\n Have a look at the navbar with only form controls and button (a login form):<\/p>\n The code of navbar with a form:<\/strong><\/p>\n See the sample code with the same form as in above example that is aligned right.<\/p>\n The markup:<\/strong><\/p>\n Until now you have seen various colored navbar examples. For coloring the navbar, you may use the built-in background classes or use the inline style tag and specify the background color there. You may also create a class in external CSS or under the <style> section.<\/p>\n You should use the .navbar-light<\/strong> <\/em>for light color backgrounds and .navbar-dark<\/strong><\/em> for the dark background colors.<\/p>\n See the example below where different background color classes are used for creating the navbar:<\/p>\n The complete code of info navbar:<\/strong><\/p>\n See the complete code for other navbars as well on the example page.<\/p>\n Note: <\/strong>The text color is set at link tags.<\/p>\n You may also use some other background color scheme for designing the navbar that is based on Bootstrap 4. You may use the style attribute inline or use in external or internal CSS (under style section).<\/p>\n See the following demo where eight different gradient backgrounds are used for theming the navbar. All classes are placed in the style section under the <head> tag. The complete code can be copied from the example page:<\/p>\n The CSS:<\/strong><\/p>\n One of the navbar markup:<\/strong><\/p>\n <\/p>\n Use the .fixed-top<\/strong><\/em> class in the <nav> tag for creating a navbar that is fixed on top of the page. Have a look at this demo where I used this class and some dummy text for scroll bar. Scroll down the demo page and see how the top bar is fixed:<\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.3\/css\/bootstrap.min.css\" integrity=\"sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy\" crossorigin=\"anonymous\">\r\n\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.2.1.slim.min.js\" integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr\/rE9\/Qpg6aAZGJwFDMVNA\/GpGFF93hXpG5KkN\" crossorigin=\"anonymous\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.9\/umd\/popper.min.js\" integrity=\"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K\/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q\" crossorigin=\"anonymous\"><\/script>\r\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/js\/bootstrap.min.js\" integrity=\"sha384-JZR6Spejh4U02d8jOt6vLEHfe\/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl\" crossorigin=\"anonymous\"><\/script>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n<h3>A demo of Bootstrap navbar<\/h3>\r\n<nav class=\"navbar navbar-expand-lg navbar-light bg-info\">\r\n <a class=\"navbar-brand text-light\" href=\"https:\/\/www.jquery-az.com\/\" >Slogan\/Logo<\/a>\r\n <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#demo-navbar\" aria-controls=\"demo-navbar\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n\r\n <div class=\"collapse navbar-collapse\" id=\"demo-navbar\">\r\n <ul class=\"navbar-nav mr-auto\">\r\n <li class=\"nav-item active\">\r\n <a class=\"nav-link text-light\" href=\"https:\/\/www.jquery-az.com\/\">Tutorials <span class=\"sr-only\">(current)<\/span><\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link text-light\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\">Bootstrap<\/a>\r\n <\/li>\r\n <li class=\"nav-item dropdown\">\r\n <a class=\"nav-link dropdown-toggle text-light\" href=\"#\" id=\"navbarDropdown\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n Web\r\n <\/a>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\">\r\n <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/jquery-tips\/\">jQuery Tutorials<\/a>\r\n <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/php-tutorials\/\">PHP Tutorials<\/a>\r\n <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/javascript-tutorials\/\">JavaScript Tutorials<\/a>\r\n <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/css-tutorials\/\">CSS Tutorials<\/a>\r\n <div class=\"dropdown-divider\"><\/div>\r\n <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/alerts-js-bootstrap-jquery\/\">Alerts<\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link disabled text-warning\" href=\"#\">Disabled<\/a>\r\n <\/li>\r\n <\/ul>\r\n <form class=\"form-inline my-2 my-lg-0\">\r\n <input class=\"form-control mr-sm-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\">\r\n <button class=\"btn btn-outline-warning my-2 my-sm-0\" type=\"submit\">Search<\/button>\r\n <\/form>\r\n <\/div>\r\n<\/nav>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
![\"Bootstrap](\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/23-2-Bootstrap-4-navbar-mobile.png\")
<\/p>\nExploring the components code in navbar<\/strong><\/h3>\n
![\"Bootstrap](\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/23-3-Bootstrap-4-navbar-logo.png\"){kind=logo}
<\/p>\n<nav class=\"navbar navbar-expand-lg navbar-light bg-success\">\r\n\r\n\u00a0 <a class=\"navbar-brand\" href=\"#\">\r\n\r\n\u00a0\u00a0\u00a0 <img src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/10\/logo.jpg\" width=\"60\" height=\"40\" alt=\"\">\r\n\r\n\u00a0 <\/a><\/pre>\n
How to include dropdown menu in navbar<\/strong><\/h3>\n
![\"Bootstrap](\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/23-4-Bootstrap-4-navbar-dropdown.png\")
<\/p>\n<div class=\"container\">\r\n\r\n<h3>A demo of Bootstrap navbar<\/h3>\r\n\r\n<nav class=\"navbar navbar-expand-lg navbar-light bg-warning\">\r\n\r\n\u00a0 <a class=\"navbar-brand\" href=\"#\">\r\n\r\n\u00a0\u00a0\u00a0 <img src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/10\/logo.jpg\" width=\"60\" height=\"40\" alt=\"\">\r\n\r\n\u00a0 <\/a>\r\n\r\n\u00a0 <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#demo-navbar\" aria-controls=\"demo-navbar\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n\r\n\u00a0\u00a0\u00a0 <span class=\"navbar-toggler-icon\"><\/span>\r\n\r\n\u00a0 <\/button>\r\n\r\n\r\n\r\n\u00a0 <div class=\"collapse navbar-collapse\" id=\"demo-navbar\">\r\n\r\n\u00a0\u00a0\u00a0 <ul class=\"navbar-nav mr-auto\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li class=\"nav-item active\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"nav-link text-dark\" href=\"https:\/\/www.jquery-az.com\/\">Tutorials <span class=\"sr-only\">(current)<\/span><\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li class=\"nav-item dropdown\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"nav-link dropdown-toggle text-dark\" href=\"#\" id=\"navbarDropdown\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Web\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/jquery-tips\/\">jQuery Tutorials<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/php-tutorials\/\">PHP Tutorials<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/javascript-tutorials\/\">JavaScript Tutorials<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/css-tutorials\/\">CSS Tutorials<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"dropdown-divider\"><\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/alerts-js-bootstrap-jquery\/\">Alerts<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li class=\"nav-item dropdown\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"nav-link dropdown-toggle text-dark\" href=\"#\" id=\"programmingDropdown\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Programming\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"dropdown-menu\" aria-labelledby=\"programmingDropdown\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/python-tutorials\/\">Python Tutorials<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/java-tutorials\/\">Java Tutorials<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/vba-excel-tutorials\/\">VBA Tutorials<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li class=\"nav-item dropdown\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"btnDropdownDemo\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Open Web Tutorials\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/button>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"dropdown-menu\" aria-labelledby=\"btnDropdownDemo\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/jquery-tips\/\">jQuery Tutorials<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/php-tutorials\/\">PHP Tutorials<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/javascript-tutorials\/\">JavaScript Tutorials<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/css-tutorials\/\">CSS Tutorials<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"dropdown-divider\"><\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"dropdown-item\" href=\"https:\/\/www.jquery-az.com\/alerts-js-bootstrap-jquery\/\">Alerts<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0\u00a0\u00a0 <\/ul>\r\n\r\n\u00a0 <\/div>\r\n\r\n<\/nav>\r\n\r\n<\/div><\/pre>\n
How to use forms in navbar<\/strong><\/h3>\n
![\"Bootstrap](\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/23-5-Bootstrap-4-navbar-form.png\")
<\/p>\n<nav class=\"navbar navbar-expand-lg navbar-light bg-info\">\r\n\r\n\u00a0 <a class=\"navbar-brand\" href=\"#\">\r\n\r\n\u00a0\u00a0\u00a0 Slogan\/Logo\r\n\r\n\u00a0 <\/a>\r\n\r\n\u00a0 <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#demo-navbar\" aria-controls=\"demo-navbar\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n\r\n\u00a0\u00a0\u00a0 <span class=\"navbar-toggler-icon\"><\/span>\r\n\r\n\u00a0 <\/button>\r\n\r\n\r\n\r\n\u00a0 <div class=\"collapse navbar-collapse\" id=\"demo-navbar\">\r\n\r\n\u00a0\u00a0\u00a0 <ul class=\"navbar-nav mr-auto\">\r\n\r\n\u00a0 \u00a0\u00a0<!--Form code starts here-->\r\n\r\n\u00a0\u00a0\u00a0 <form class=\"form-inline\">\r\n\r\n\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <label class=\"sr-only\" for=\"UsernameInlineFormInput\">Username<\/label>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"input-group\u00a0 mr-sm-2\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"input-group-prepend\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"input-group-text\">@<\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" class=\"form-control\" id=\"UsernameInlineFormInput\" placeholder=\"Enter User Name\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <label class=\"sr-only\" for=\"passwordInlineFormInputGroup\">Name<\/label>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"password\" class=\"form-control\u00a0 mr-sm-2\" id=\"passwordInlineFormInputGroup\" placeholder=\"Password\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"form-check\u00a0 mr-sm-2\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input class=\"form-check-input\" type=\"checkbox\" id=\"inlineFormCheck\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <label class=\"form-check-label\" for=\"inlineFormCheck\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Remember me\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/label>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <button type=\"submit\" class=\"btn btn-dark\">Submit<\/button>\r\n\r\n\u00a0\u00a0\u00a0 <\/form>\r\n\r\n<!--Form code ends here -->\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0 <\/ul>\r\n\r\n\u00a0 <\/div>\r\n\r\n<\/nav>\r\n\r\n<\/div><\/pre>\n
Justify the form right example<\/strong><\/h3>\n
![\"Bootstrap](\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/23-6-Bootstrap-4-navbar-form-right.png\")
<\/p>\nOnline demo and code<\/strong><\/a><\/h6>\n
<div class=\"container\">\r\n\r\n<h3>A demo of Bootstrap navbar<\/h3>\r\n\r\n<nav class=\"navbar navbar-light bg-warning\">\r\n\r\n\u00a0 <a class=\"navbar-brand\">Logo\/Slogan<\/a>\r\n\r\n\u00a0\u00a0\u00a0 <form class=\"form-inline\">\r\n\r\n\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <label class=\"sr-only\" for=\"usrname\">Username<\/label>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"input-group\u00a0 mr-sm-2\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"input-group-prepend\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"input-group-text \">@<\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" class=\"form-control\" id=\"usrname\" placeholder=\"Enter User Name\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <label class=\"sr-only\" for=\"pass\">Name<\/label>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"password\" class=\"form-control\u00a0 mr-sm-2\" id=\"pass\" placeholder=\"Password\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"form-check\u00a0 mr-sm-2\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input class=\"form-check-input\" type=\"checkbox\" id=\"inlineFormCheck\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <label class=\"form-check-label\" for=\"inlineFormCheck\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Remember me\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/label>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <button type=\"submit\" class=\"btn btn-primary\">Sign In<\/button>\r\n\r\n\u00a0\u00a0\u00a0 <\/form>\r\n\r\n<\/nav>\r\n\r\n<\/div><\/pre>\n
How to color navbar example<\/strong><\/h3>\n
![\"navbar](\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/23-7-navbar-colors.png\")
<\/p>\nSee online demo and code<\/strong><\/a><\/h6>\n
<nav class=\"navbar navbar-expand-lg navbar-dark bg-info \">\r\n\r\n\u00a0 <ul class=\"navbar-nav\">\r\n\r\n\u00a0\u00a0\u00a0 <li class=\"nav-item active\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"nav-link text-light\" href=\"https:\/\/www.jquery-az.com\/jquery-tips\/\">jQuery<\/a>\r\n\r\n\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0\u00a0\u00a0 <li class=\"nav-item\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"nav-link text-light\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\">Bootstrap<\/a>\r\n\r\n\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0\u00a0\u00a0 <li class=\"nav-item\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"nav-link text-light\" href=\"https:\/\/www.jquery-az.com\/javascript-tutorials\/\">JavaScript<\/a>\r\n\r\n\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0\u00a0\u00a0 <li class=\"nav-item\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"nav-link disabled text-light\" href=\"#\">Coming Up<\/a>\r\n\r\n\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0 <\/ul>\r\n\r\n<\/nav><\/pre>\n
Using custom background scheme in Bootstrap 4 navbar<\/strong><\/h3>\n
![\"navbar](\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/01\/23-8-navbar-colors-custom.png\")
<\/p>\n<style>\r\n\r\n.nav-bk{\r\n\r\nbackground: #40E0D0;\r\n\r\nbackground: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);\r\n\r\nbackground: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);\r\n\r\n}\r\n\r\n\r\n\r\n.nav-bk2{\r\n\r\nbackground: #23074d;\u00a0\r\n\r\nbackground: -webkit-linear-gradient(to right, #cc5333, #23074d);\u00a0\r\n\r\nbackground: linear-gradient(to right, #cc5333, #23074d);\r\n\r\n\r\n\r\n}\r\n\r\n.nav-bk3{\r\n\r\nbackground: #00F260;\u00a0\r\n\r\nbackground: -webkit-linear-gradient(to right, #0575E6, #00F260);\u00a0\r\n\r\nbackground: linear-gradient(to right, #0575E6, #00F260);\r\n\r\n\r\n\r\n}\r\n\r\n.nav-bk4{\r\n\r\nbackground: #070000;\u00a0\r\n\r\nbackground: -webkit-linear-gradient(to right, #070000, #4C0001, #070000);\u00a0\r\n\r\nbackground: linear-gradient(to right, #070000, #4C0001, #070000);\r\n\r\n\r\n\r\n}\r\n\r\n.nav-bk5{\r\n\r\nbackground: #0575E6;\u00a0\r\n\r\nbackground: -webkit-linear-gradient(to right, #021B79, #0575E6);\u00a0\r\n\r\nbackground: linear-gradient(to right, #021B79, #0575E6);\r\n\r\n\r\n\r\n}\r\n\r\n.nav-bk6{\r\n\r\nbackground: #2196f3;\u00a0\r\n\r\nbackground: -webkit-linear-gradient(to right, #f44336, #2196f3);\u00a0\r\n\r\nbackground: linear-gradient(to right, #f44336, #2196f3);\r\n\r\n\r\n\r\n}\r\n\r\n.nav-bk7{\r\n\r\nbackground: #c2e59c;\u00a0\r\n\r\nbackground: -webkit-linear-gradient(to right, #64b3f4, #c2e59c);\u00a0\r\n\r\nbackground: linear-gradient(to right, #64b3f4, #c2e59c);\r\n\r\n}\r\n\r\n.nav-bk8{\r\n\r\nbackground: #5f2c82;\u00a0\r\n\r\nbackground: -webkit-linear-gradient(to right, #49a09d, #5f2c82);\u00a0\r\n\r\nbackground: linear-gradient(to right, #49a09d, #5f2c82);\r\n\r\n}\r\n\r\n<\/style><\/pre>\n<nav class=\"navbar navbar-expand-lg navbar-dark nav-bk\">\r\n\r\n\u00a0 <ul class=\"navbar-nav\">\r\n\r\n\u00a0\u00a0\u00a0 <li class=\"nav-item active\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"nav-link text-light\" href=\"https:\/\/www.jquery-az.com\/jquery-tips\/\">jQuery<\/a>\r\n\r\n\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0\u00a0\u00a0 <li class=\"nav-item\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"nav-link text-light\" href=\"https:\/\/www.jquery-az.com\/bootstrap-4\/\">Bootstrap<\/a>\r\n\r\n\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0\u00a0\u00a0 <li class=\"nav-item\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"nav-link text-light\" href=\"https:\/\/www.jquery-az.com\/javascript-tutorials\/\">JavaScript<\/a>\r\n\r\n\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0\u00a0\u00a0 <li class=\"nav-item\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <a class=\"nav-link disabled text-light\" href=\"#\">Coming Up<\/a>\r\n\r\n\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0 <\/ul>\r\n\r\n<\/nav><\/pre>\n
Creating top fixed navbar demo<\/strong><\/h3>\n
See online demo and code<\/strong><\/a><\/h6>\n