How to Add Bootstrap Navbar to Blogger
First download bootstrap3.0 files from getbootsrap.com; , Upload the bootstrap files to a hosting site like open drive or drop box., Go to your blogger account>>Template>>Edit html and below add code which is in step5
Step-by-Step Guide
-
Step 1: First download bootstrap3.0 files from getbootsrap.com;
These files are bootstrap.min.css,bootstrap.min.js and get direct link or streaming link. jQuery is necessary for Bootstrap's JavaScript plugins which helps for dropdown in navbar. <script src='http:<script src='http: ,, <nav class="navbar navbar-default" role="navigation"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> Toggle navigation</button> <a class="navbar-brand" href="#">Brand</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown </a> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> <a href="#">One more separated link</a> <form class="navbar-form navbar-left" role="search"> <input type="text" class="form-control" placeholder="Search" /> <button type="submit" class="btn btn-default">Submit</button> </form> <a href="#">Link</a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown </a> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> </nav> -
Step 2: Upload the bootstrap files to a hosting site like open drive or drop box.
-
Step 3: Go to your blogger account>>Template>>Edit html and below <head> add code which is in step5 <meta content='width=device-width
-
Step 4: initial-scale=1.0' name='viewport'/><link href=’your direct link or streaming link url (min.css’media='screen' rel='stylesheet'/><script src='http:<script src='http:<script src=’your direct link or streaming link url url(min.js) ‘/>
-
Step 5: In between <body> ---- </body>
-
Step 6: add code where you want.
Detailed Guide
These files are bootstrap.min.css,bootstrap.min.js and get direct link or streaming link. jQuery is necessary for Bootstrap's JavaScript plugins which helps for dropdown in navbar. <script src='http:<script src='http: ,, <nav class="navbar navbar-default" role="navigation"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> Toggle navigation</button> <a class="navbar-brand" href="#">Brand</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown </a> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> <a href="#">One more separated link</a> <form class="navbar-form navbar-left" role="search"> <input type="text" class="form-control" placeholder="Search" /> <button type="submit" class="btn btn-default">Submit</button> </form> <a href="#">Link</a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown </a> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <a href="#">Separated link</a> </nav>
About the Author
Jeffrey Lopez
Professional writer focused on creating easy-to-follow DIY projects tutorials.
Rate This Guide
How helpful was this guide? Click to rate: