W3 Schools Bootstrap Part 2

Be sure to check out W3 Schools for the full tutorial, explanations, and examples.

Click here for part 1.

Collapsible Navbar

In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).

Only when the button is clicked, the navigation bar will be displayed.

Dropdowns

Use the Bootstrap dropdown class to indicate a dropdown menu.

To actually build the dropdown menu use the dropdown-menu class.

Use a button or a link with the class dropdown-toggle and also set data-toggle equal to "dropdown" in order to open the dropdown menu.

Notice the divider between the JavaScript and SQL and also the use of a Dropdown Header.

Bootstrap Collapsible

This feature lets you hide a large amount of content.

Click here to see more...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible List Group

  • One
  • Two
  • Three

Tabs

Bootstrap lets you display your navigation menu as tabs. Tabs can also have a dropdown menu.

Vertical Pills

These are Bootstrap's nav pills. The first pill has a submenu as well.

Dynamic Pills

Clicking on the pill changes the pane's content.

To make the pill toggable, add the data-toggle="pill" attribute to each link.

Next create a tab-pane class that has a unique ID for each tab. Wrap all of these tabs inside a div element with the class name tab-content.

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Inline form

Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.

Horizontal form

This form is aligned by using Bootstrap's grid layout system.

Form text area

This is a Bootstrap text area used for comments.

Form control: select

The form below contains two dropdown menus (select lists):


Inline form

Bootstrap has many cool options for forms and options for giving users feedback

Modal Example

Bootstrap has a modal which is like a pop up that must be responded to.

Tooltip Example

Bootstrap has tooltips which make use of JQuery's hover functionality.

Hover over me