MediaWiki/Foundation/Button Groups

Foundation CSS Framework for MediaWiki: Button Groups

Button Groups are useful for navigation and can be placed anywhere on a page.

The styles are easy to change. And a button group can expand to the width of its container.

Button Groups can be combined to form Button Bars.

Note: To use components from the Zurb Foundation CSS Framework in MediaWiki, first install a custom skin such as the Foreground Skin or the Pivot Skin, which are built upon the Foundation CSS Framework.

Example 1: Button Group - default style

• Button 1
• Button 2
• Button 3
• Button 4

Sample Code for Default Button Group

---

Example 2: Button Group - secondary radius

• Button 1
• Button 2
• Button 3
• Button 4

Sample Code for Button Group (Secondary Radius)

---

Example 3: Button Group - medium alert round - Evenly Expanded

• Button 1
• Button 2
• Button 3

Sample Code for a Button Group using evenly-spaced round alert buttons

This example uses the class 'even'. The number, in this example 'even-3', corresponds to the number of buttons in the group. You can use up to even-8. Each button expands so that the button group fits within the container. In this example, the container is 5 columns wide.

---

Open source wiki