Bootstrap Tutorial With Proetct Part 1 | Bootstrap template

Bootstrap Tutorial With Project Part 1 | Bootstrap Template

  

 

Bootstrap tutorial 2018 

If you want to develop the responsive theme by using the theme you see the total series of youtube

videos.Also If you want new version bootstrap class subscribe the channel.

There are best tutorial for the bootstrap

Code for nav bar for bootstarp 4.0 version :

HTML Tag

<nav class="navbar navbar-dark navbar-expand-sm navbar-custom fixed-top ">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#nav1">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="nabvar-brand"><h1 class="text-white">Theme</h1></a>
<div id="nav1" class="collapse navbar-collapse">
<span class="mr-auto"></span>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="">Home</a></li>
<li class="nav-item"><a class="nav-link text-white" href="">About</a></li>
<li class="nav-item"><a class="nav-link text-white" href="">Register</a></li>
<li class="nav-item"><a class="nav-link text-white" href="">Login</a></li>
<li class="nav-item"><a class="nav-link text-white" href="">Setting</a></li>
</ul>
</div>
</div>
</nav>

CSS:

.col-content{
border: 1px solid #c9c9c9;
padding: 10px;
}
.navbar-custom{
background-color: #282e3e !important;
}
.nav-item>.active{
background-color: blue;
border-radius: none;
}
.nav-item:hover{
background-color: blue;
border-radius: none;
color: white;
}
.navbar-toggler{
background-color: brown;
}

Mrtech