Foundation CSS Forms Label Positioning
Last Updated :
22 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.
Forms are the way to take input from the user which is uploaded to the server for processing. The input provided by the user can be of different types, such as password, text, email, etc.
The Label Positioning can be used to position the label with the form inputs. These labels can be put inside the different cells or columns to the inputs. Wrapping the label tag with a div tag, under the influence of a grid, can act as a column. We can also realign the label by specifying the different available classes like .text-right, .text-left, .text-center, .float-left, .float-right etc. This way, we can simply position the label tag using various classes.
Foundation CSS Label Positioning Classes:
- grid-x: This class creates the grid structure in the horizontal direction.
- text-right: It positions the label text to the inner right side of the container.
- text-left: It positions the label text to the inner left side of the container.
- text-center: It positions the label text to the center horizontally.
- float-left: It is used to float the element to the left.
- float-right: It is used to float the element to the right.
- middle: It positions the label text to the center vertically.
Note: The text classes are analogous to the float classes and can be interchanged.
Syntax:
<form>
<div class="grid-x">
<div class="cell">
<label for="input-label" class="position-class">
Name of Label
</label>
</div>
<div class="cell">
<input type="text" id="input-label"
placeholder="Input element">
</div>
</div>
</form>
We will explore the various positions of a label & its implementation through the examples.
Example 1: In the below example, we have positioned the label to the left-most corner.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<title>Label Positioning</title>
</head>
<body>
<div>
<div class="float-center">
<h2 style="color:green">GeeksforGeeks</h2>
<h4>
Foundation CSS Label Positioning
</h4>
</div>
<form>
<div class="grid-x"
style="width: 40%;
margin-top: 20px;">
<div class="small-4 cell">
<label for="input-label"
class="text-left">Age
</label>
</div>
<div class="small-7 cell">
<input type="number"
id="input-label"
placeholder="Enter your Age">
</div>
</div>
</form>
</div>
</body>
</html>
|
Output:
Label Positioned to the leftmost corner
Example 2: In the below example, we have positioned the label to the right-most corner, near the input tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<title>Label Positioning</title>
</head>
<body>
<div>
<div class="float-center">
<h2 style="color:green">GeeksforGeeks</h2>
<h4>Foundation CSS Label Positioning</h4>
</div>
<form>
<div class="grid-x grid-padding-x"
style="width: 40%;
margin-top: 20px;">
<div class="small-4 cell">
<label for="input-label"
class="text-right">Age
</label>
</div>
<div class="small-7 cell">
<input type="number"
id="input-label"
placeholder="Enter your Age">
</div>
</div>
</form>
</div>
</body>
</html>
|
Output:
Label Positioned to the rightmost corner
Example 3: In the below example, we have centered the label vertically in its container.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<title>Label Positioning</title>
</head>
<body>
<div>
<div class="float-center">
<h2 style="color:green">GeeksforGeeks</h2>
<h4>Foundation CSS Label Positioning</h4>
</div>
<form>
<div class="grid-x grid-padding-x"
style="width: 40%;
margin-top: 20px;">
<div class="small-4 cell">
<label for="input-label"
class="text-right middle">Age
</label>
</div>
<div class="small-7 cell">
<input type="number"
id="input-label"
placeholder="Enter your Age">
</div>
</div>
</form>
</div>
</body>
</html>
|
Output:
Label Centered Vertically
Example 4: In the below example, we have centered the label horizontally and vertically.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<title>Label Positioning</title>
</head>
<body>
<div>
<div class="float-center">
<h2 style="color:green">GeeksforGeeks</h2>
<h4>Foundation CSS Label Positioning</h4>
</div>
<form>
<div class="grid-x grid-padding-x"
style="width: 40%;
margin-top: 20px;">
<div class="small-4 cell">
<label for="input-label"
class="text-center middle">Age
</label>
</div>
<div class="small-7 cell">
<input type="number"
id="input-label"
placeholder="Enter your Age">
</div>
</div>
</form>
</div>
</body>
</html>
|
Output:
Label Centered Horizontally and Vertically
References: https://get.foundation/sites/docs/forms.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...