YouTip- ` containing the dropdown menu list. Note that the `"pull-left"` class aligns the search form to the left. If you want right alignment, use the `"pull-right"` class.
Now, we want to insert interactive buttons on the right side of the navigation bar. We’ll insert Google Plus, Facebook Like, and Tweet buttons. Insert the following code after the search form.
The `"socials"` class is not part of `bootstrap.css`. Since we want all interactive buttons centered, we need to add some padding using this class. The code is as follows:
.socials { padding: 10px;}
You can write it directly in the page enclosed within `` tags, or add it to an external CSS file and reference it.
Finally, you need to insert two additional code blocks—one for the Facebook button and another for the Google Plus button. These are provided by Facebook and Google to dynamically inject buttons into your page.
So, insert the following code immediately after the opening `` tag—this is for Facebook:
(function(d, s, id) {var js, fjs = d.getElementsByTagName(s);if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
Then, insert the following code immediately before the closing `` tag—this is for Google Plus:
(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script'); s.parentNode.insertBefore(po, s);})();
Below is the final code.
## Example
Bootstrap V2 Navbar
With Bootstrap, you can create static navigation bars. This tutorial will teach you how to do this.
We will use an HTML5 page with content and see how to add a header navigation bar. Below is the final output:
Below is the HTML5 code for a page without any content.
Bootstrap Basic Tab Based Navigation
To create the basic structure containing navigation, insert the following code immediately after the `` tag in the HTML5 code shown above:
Now, replace `` with the following code to create the first set of navigation items. Note that the `"brand"` class is rendered differently, which can be used to display your company or organization name.
To create a dropdown menu, insert the following code immediately after the HTML code shown in the last code block.
However, since Bootstrap dropdown menus require JavaScript, you need to insert the following two lines of code into your HTML page. You may insert them just before the `` tag.
To insert a search form into the navigation bar, simply insert the following code after the `