Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster. It offers the Fastclick.js tool for faster rendering on mobile devices.
Buttons are one of the most common UI elements. We can create a button using the button class and use button-group class to make a button group element. Button Group No Gaps is used to remove the 1px spacing between the buttons. When we want to use the single class button group then we might want to use the button group without spacing between the buttons. To remove the 1px spacing between the buttons, we use the no-gaps class. In this article, we will discuss how to remove gaps between the buttons in Foundation CSS.
Foundation CSS Button Group No Gaps class:
- no-gaps: This class is used to remove the 1px gap between the buttons.
Syntax:
<div class="button-group no-gaps">
.....
</div>Example 1: The following code demonstrates Button Group No Gaps when using primary class.
<!DOCTYPE html> <html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Button Group No Gaps</h3>
<div class="primary button-group no-gaps">
<a class="button">
Button 1
</a>
<a class="button">
Button 2
</a>
<a class="button">
Button 3
</a>
<a class="button">
Button 4
</a>
<a class="button">
Button 5
</a>
</div>
</body>
</html>
|
Output:
Example 2: The following code demonstrates Button Group No Gaps when using hollow and individual styles.
<!DOCTYPE html> <html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Button Group No Gaps</h3>
<strong>
When using <i>hollow</i> style
</strong>
<div class="primary button-group no-gaps hollow">
<a class="button">
Button 1
</a>
<a class="button">
Button 2
</a>
<a class="button">
Button 3
</a>
<a class="button">
Button 4
</a>
<a class="button">
Button 5
</a>
</div>
<strong>
When using <i>individual</i> styles
</strong>
<div class="button-group no-gaps">
<a class="primary button">
Primary
</a>
<a class="secondary button">
Secondary
</a>
<a class="success button">
Success
</a>
<a class="warning button">
Warning
</a>
<a class="alert button">
Alert
</a>
</div>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/button-group.html#no-gaps