Design a beautiful responsive navbar in bootstrap | free source code

So Hello guys! What's up ! , I m back with this tutorial along with codes , if any doubt please comment and share this post, So lets start ,Design a beautiful responsive navbar in bootstrap, a website is incomplete without a navbar , so you can copy and read this simple code and apply in your own project, in this tutorial, we learn how we can design a beautiful attractive navbar. please download the source code below:

Must read: Designing bootstrap sign-up forms with floating label
Must read: How to protect your website from hackers? | 4 simple ways to protect your website.
Must read: Why Google is free? What did you think Google is free or not?
Must read: Bootstrap admin template free download 2019.
Must read: Do you need a top best smartphones under 5000?

Design a beautiful responsive navbar in bootstrap
Design a beautiful responsive navbar in bootstrap 

Paste the first box code in your HTML file & second box code in your style.css file. If
error gets please download the source code below.
<html>
  <head>
     <title>Bootstrap 4 Navbar</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" >
<link href="assets/css/custom.css" rel="stylesheet">

  </head>

   <body>
   
       <div class="container">
<div class="row">
<h2 class="mx-auto">Bootstrap 4 Navbar</h2>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-ui mt-2" style="border-radius:50px;">
        <a class="navbar-brand text-light font-weight-bold" href="https://myfreeadvise.com">MY FREE ADVISE</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto topnav ">
                <li class="nav-item active">
                    <a class="nav-link text-light" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" href="#">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" style="color: #fff;" href="#">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" style="color: #fff;" href="#">Our Services</a>
                </li>
<li class="nav-item">
                    <a class="nav-link text-light" style="color: #fff;" href="#">Gallery</a>
                </li>
          
                <li class="nav-item">
                    <a class="nav-link text-light"  style="color: #fff;"href="#">Contact Us</a>
                </li>
                <li class="">
                   <button type="button" class="btn btn-outline-warning">Sign in / Register</button>
                </li>
               
            </ul>
        </div>

            <!-- The Modal -->
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Customer Sign In</h4>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <form>
                        <label class="sr-only" for="usrname">Username</label>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1"><i class="fa fa-user"></i></span>
                            </div>
                            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        </div>


                        <label class="sr-only" for="Password">Name</label>
                        <div class="input-group mb-2">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon2"><i class="fa fa-key"></i></span>
                            </div>
                            <input id="Password" type="password" class="form-control" placeholder="Password" aria-label="Password" aria-describedby="basic-addon2">
                        </div>
                    </form>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" >Sign In</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>
            

    </nav>
</div>

<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
   </body>
</html>






Design a beautiful responsive navbar in bootstrap | free source code


 * {
      font-family: 'Dancing Script', cursive;
    }

.topnav a:hover {
    border-bottom: 3px solid #E100FF;
   
}

.bg-ui{
background: #7F00FF;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #E100FF, #7F00FF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #E100FF, #7F00FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}
.font-color-menu{
color: #fff;
}
.btn-primary {
  font-family: Raleway-SemiBold;
  font-size: 13px;
  color: rgba(58, 133, 191, 0.75);
  letter-spacing: 1px;
  line-height: 15px;
  border: 2px solid rgba(58, 133, 191, 0.75);
  border-radius: 40px;
  background: transparent;
  transition: all 0.3s ease 0s;
}

.btn-outline-warning
{
border-radius:50px;
color: #fff;
}



Design a beautiful responsive navbar in bootstrap | free source code Design a beautiful responsive navbar in bootstrap | free source code Reviewed by Ritesh Vishwakarma on July 05, 2019 Rating: 5

6 comments:

  1. The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
    website designing Service

    ReplyDelete
  2. I exactly got what you mean, thanks for posting. And, I am too much happy to find this website on the world of Google. bootstrap button with icon

    ReplyDelete
  3. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me. Source

    ReplyDelete

Powered by Blogger.