Foundation CSS Button Group Flexbox
Last Updated :
07 Mar, 2022
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. 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. In a Button Group Flexbox, the buttons are positioned using the Flexbox Utility classes in Foundation CSS.
Foundation CSS Button Group Flexbox Classes:
- align-center: This class gives the center alignment to all the child elements inside this element.
- align-right: This class gives the right alignment to all the child elements inside the element.
- align-spaced: This class evenly distributes the space between each column with the first and the last column pinning to the edge.
- align-justify: This class evenly distributes the space between each column with the first and the last column may not be pinning to the edge.
Syntax of Hollow and Clear Button group:
<div class="button-group Flexbox-Class">
<a class="button">...</a>
....
</div>
Example 1: This is a basic example illustrating the Hollow and Clear Button group using Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Button Group Flexbox</title>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<strong>Foundation CSS Button Group Flexbox</strong>
<div class="button-group">
<a class="secondary button hollow">
View
</a>
<a class="success button hollow">
Edit
</a>
<a class="warning button hollow">
Share
</a>
<a class="alert button hollow">
Delete
</a>
</div>
<div class="button-group">
<a class="secondary button clear">
View
</a>
<a class="success button clear">
Edit
</a>
<a class="warning button clear">
Share
</a>
<a class="alert button clear">
Delete
</a>
</div>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Button Group Flexbox
Example 2: This is a basic example illustrating the Even-Width Button group using Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Button Group Flexbox</title>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<strong>Foundation CSS Button Group Flexbox</strong>
<div class="expanded button-group">
<a class="button">
Expanded
</a>
<a class="button">
Button
</a>
<a class="button">
Group
</a>
</div>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Button Group Flexbox
Example 3: This is a basic example illustrating the Flexbox Button group using Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Button Group Flexbox</title>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<strong>Foundation CSS Button Group Flexbox</strong>
<div class="button-group align-center">
<a class="button">Center</a>
<a class="button">Center</a>
<a class="button">Center</a>
</div>
<div class="button-group align-right">
<a class="button">Right</a>
<a class="button">Right</a>
<a class="button">Right</a>
</div>
<div class="button-group align-spaced">
<a class="button">Spaced</a>
<a class="button">Spaced</a>
<a class="button">Spaced</a>
</div>
<div class="button-group align-justify">
<a class="button">Justify</a>
<a class="button">Justify</a>
<a class="button">Justify</a>
</div>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Button Group Flexbox
Reference: https://get.foundation/sites/docs/button-group.html#flexbox-button-group
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...