Button groups

Button group styles for buttons, inputs and link buttons.

Source file: src/css/button-groups.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/button-groups.css

Included with:

ming.css
ming.min.css
ming.mono.css
ming.mono.min.css

Default (anchor)

Link

Example HTML

<div class="btn-group">
  <button>Button</button>
  <a href="#" class="btn">Link</a>
</div>

<div class="btn-group">
  <input type="button" value="Type">
  <input type="reset" value="Reset">
  <input type="submit" value="Submit">
</div>

Example HTML

<ul class="btn-group">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ul>

<ol class="btn-group">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ol>

Example HTML

<ul class="btn-group-column">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ul>

<div class="btn-group-column">
  <button>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</div>

Light & dark (anchor)

Fixed color-scheme utilities included with the backgrounds.

Link

Example HTML

<div class="btn-group light">
  <button>Button</button>
  <a href="#" class="btn">Link</a>
</div>

<div class="btn-group dark">
  <button>Button</button>
  <a href="#" class="btn">Link</a>
</div>

<div class="btn-group">
  <button class="light">Light</button>
  <button class="dark">Dark</button>
</div>

Primary colors (anchor)

The button groups don't include color classes but can use the color buttons modifiers on group containers or on individual buttons.

Source file: src/css/colors/color-buttons.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/colors/color-buttons.css

Included with:

ming.css
ming.min.css

Example HTML

<ul class="btn-group btn-primary">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ul>

<ul class="btn-group btn-success">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ul>

<ul class="btn-group btn-danger">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ul>

<ul class="btn-group btn-info">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ul>

<ul class="btn-group btn-warning">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ul>

<ul class="btn-group btn-secondary">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ul>

Previous: Badges

Next: Cards