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

2 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

Powered by Blogger.