Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Foundation CSS offers us a Button Group where buttons of identical nature can be grouped together. Foundation CSS allows the buttons in the button group to be stacked upon each vertically using the .stacked class. Let’s have a look at how to achieve it.
Foundation CSS Button Group Stacking Classes:
- stacked: Stacks the buttons in the button group vertically.
- stacked-for-small: Only stacks the buttons in the button group vertically for smaller screens.
- stacked-for-medium: Only stack the buttons in the button group vertically for smaller and medium-sized screens.
Syntax:
<div class="Button-Group-Stacking-Classes button-group"> <a class="button">Button1</a> <a class="button">Button2</a> ... </div>
Example 1: In the below example, we have made a simple button group stacked upon each other vertically for standard screens.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Button Group Stacking</title>
<link rel="stylesheet"
href=
crossorigin="anonymous"/>
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body class="grid-x align-middle
align-center grid-container"
style="height: 95vh; width: 95vw">
<div>
<h2 style="color: green">GeekforGeeks</h2>
<h4>Foundation CSS Button Group Stacking</h4>
<div class="stacked button-group">
<a class="button">Geeks</a>
<a class="button">For</a>
<a class="button">Geeks</a>
<a class="button">Is</a>
<a class="button">Awesome</a>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Foundation CSS Button Group Stacking
Example 2: In the below example, we have made a simple button group stacked upon each other vertically for medium screens.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Button Group Stacking</title>
<link rel="stylesheet"
href=
crossorigin="anonymous"/>
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body class="grid-x align-middle
align-center grid-container"
style="height: 95vh; width: 95vw;">
<div>
<h2 style="color: green">GeekforGeeks</h2>
<h4>Foundation CSS Button Group Stacking</h4>
<div class="stacked-for-medium button-group">
<a class="button">Geeks</a>
<a class="button">For</a>
<a class="button">Geeks</a>
<a class="button">Is</a>
<a class="button">Awesome</a>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Button Group Stacking
Example 3: In the below example, we have made a simple button group stacked upon each other vertically for smaller screens.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Button Group Stacking</title>
<link rel="stylesheet"
href=
crossorigin="anonymous"/>
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body class="grid-x align-middle
align-center grid-container"
style="height: 95vh; width: 95vw">
<div>
<h2 style="color: green">GeekforGeeks</h2>
<h4>Foundation CSS Button Group Stacking</h4>
<div class="stacked-for-small button-group">
<a class="button">Geeks</a>
<a class="button">For</a>
<a class="button">Geeks</a>
<a class="button">Is</a>
<a class="button">Awesome</a>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Foundation CSS Button Group Stacking
Reference: https://get.foundation/sites/docs/button-group.html#stacking