What is Verizon Bootstrap

Available icons

There are more than 250 icons in the form of a font from the Halflings glyphicons. Glyphicons Halflings aren't usually available for free, but their inventor made them available for free on Bootstrap. As a thank you, we only ask you to include a link to the glyphicons wherever possible.

use

For performance reasons, all icons require a basic class and an additional class for the respective icon. To use an icon, just put the following code almost anywhere you want. Make sure to leave a space between the icon and any text so that the icons have a reasonable spacing.

Do not mix with other components.

Icon classes cannot be combined directly with other components. They should never be applied to the same element with other classes. Instead, add a subordinate and apply the icon classes to it.

Use only with empty elements

Icon classes should only be applied to elements that do not contain text or child elements.

Change the location of the icon font files

Bootstrap expects the files for the icons to be in the directory relative to the compiled CSS files. Moving or renaming these font files means that you will need to update the CSS in one of three ways:

  • Change the variables and / or in the Less source files.
  • Use the relative URL option provided by the Less compiler.
  • Change the paths in the compiled CSS.

Use the option that best fits your specific wrapping facility.

Accessible icons

Modern versions of assistive technologies render CSS-generated content and specific Unicode characters. In order to avoid unwanted and confusing output in screen readers (especially if icons are only used for decoration), we hide them with the attribute.

If you use an icon to convey something (in contrast to a purely decorative use), make sure that the meaning is also conveyed via assistive technologies, e.g. you should add additional content that you can make invisible with the class.

If you create buttons with no other text (e.g. one that contains only an icon), you should always provide alternative content to identify the purpose of the button so that it makes sense for users of assistive technologies. In that case, you could add an attribute to the button itself.

Examples

You can use glyphicons in buttons, button groups for a toolbar, navigation or form fields with a prefix.

You can use an icon in an alert to convey that it is an error message. Use additional text to convey this fact to users of assistive technologies.

Error: Enter a valid email address

Show and hide context menus with which you can display lists of links. The dropdown JavaScript plug-in makes it interactive.

example

Pack the trigger of a dropdown and the actual menu in or some other item that is declared. Then you can add the actual menu items.

Dropdown menus can be changed so that they pop up (instead of down) by adding to the parent item.

Alignment

Each drop down menu is typically placed 100% from the top and along the left side of its parent. You can align it to the right instead by adding to one.

Additional positioning may be required

Dropdowns are automatically positioned in the normal document flow via CSS. This means that dropdowns can be cut off from their parents with certain properties, or they can appear outside of the displayed area. Address these issues yourself if they arise.

Alignment over out of date

With v3.1.0 we marked the use of dropdown menus as obsolete. To align a menu to the right, you should only use it from now on. If components are aligned to the right in the navbar, the menu is also automatically aligned via a mixin of this class. To override this you have to use.

Add a heading to group different actions in a drop-down menu.

Hyphen

Add a hyphen to separate a series of links in a drop-down menu.

Deactivated entries

Add to an item in the dropdown to disable the link.

Group a number of buttons together in a row with the help of button groups. Add optional selection box functionality with our buttons plugin.

Use the right one and provide a label

In order for assistive technologies such as screen readers to convey that a number of buttons are grouped, a suitable attribute must be provided. For button groups, this is what toolbars should have.

Exceptions are groups that contain only a single button (e.g. regular button groups with elements) or a drop-down menu.

In addition, groups and toolbars should be given a meaningful label, as most assistive technologies will otherwise not display them to the user, even if the correct attribute is present. In the examples below we use, but alternatives such as can also be used.

Simple example

Pack a bunch of buttons in one.

Button toolbar

Combine several into one for more complex components.

size

Instead of adding the button size classes to each button in a group, you can just add to each one, even if you are nesting multiple groups.

Nesting

Place one in another if you want to combine drop-down menus with a series of buttons.

Vertical alternative

You can also arrange a row of buttons vertically instead of horizontally. Split button dropdowns are not supported here.

Evenly distributed groups of buttons

Make a group of buttons take up the entire size of the parent element, with each button taking up an equal proportion of the button group. Also works with button dropdowns in the button group.

Dealing with frames

Due to the very specific HTML and CSS for evenly distributing the buttons (above all), the border between the buttons is doubled. This is fixed in normal button groups. Unfortunately does not work with. Depending on how much you have customized Bootstrap, you might want to remove the border lines at this point or give them a different color.

IE8 and frame limits

Internet Explorer 8 does not render frames for buttons in even button groups, regardless of the element used. To get around this, put each button in a separate group.

See # 12476 for more information.

With elements

Just wrap a bunch of s in.

Links that act as buttons

If elements are used as buttons, i.e. to activate functions on the same page instead of navigating to another document or area on the same page, these should also be given the appropriate one.

With elements

To use evenly spaced button groups with elements, you have to pack each button in a button group. Most browsers don't properly apply our CSS for equality to elements, but since we support button drop-down menus we can work around the problem.

You can also use each button to open and close a drop-down menu by placing it in one and adding the markup for the menu.

Plugin dependency

Button dropdowns require the dropdown plugin in your Bootstrap version.

Individual button dropdowns

Turn a button into a menu switch with a few simple markup changes.

Separate button dropdowns

Similarly, you can create button dropdowns where the menu switch is separated from an actual button.