Launch your web browser and open index.html. This will be a ul element with Bootstrap’s “dropdown-menu” class: The following attributes are needed in order to transform the “More” option into a dropdown menu:Īdd these properties to the a element inside the li with the “dropdown” class: įinally, add dropdown menu items to appear when site visitors click the “More” option. Optionally, you can add a span with Bootstrap’s “caret” class to create a dropdown arrow icon: Update the third li item with Bootstrap’s “dropdown” class and change the content to read “More”. In index.html, replace the current nav option that reads “About” with a dropdown menu.įirst, locate the ul element that contains “Sign Up,” “Sign In” and “About”: The Codebrainery homepage would benefit from a dropdown to add additional menu options without significantly changing the CSS layout. Let’s use Bootstrap to implement these three common website features:ĭropdown menus are buttons that reveal menu options to users when clicked. If you don’t already have it, you can download codebrainery here before we dig into Bootstrap further below.

In the first Bootstrap article, we worked on the codebrainery web page, starting with a basic template for the project.

Bootstrap navbar open on resize