Foundation - Label Positioning

You can place your labels to the left or right of your inputs.
You can place your labels to the left or right of your inputs.
To place label on right, use .text-right or .float-right class.
To place label on right, use .text-right or .float-right class.
To place label on left, use .text-left or .float-left class.
To place label on left, use .text-left or .float-left class.
You can add .middle class to align the label vertically middle with its input.
You can add .middle class to align the label vertically middle with its input.
The following example demonstrates the use of label positioning in Foundation.
<html>
   <head>
      <title>Form Label Positioning</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <form>
         <div class = "row">
            <div class = "small-6 columns">
               <label for = "right-label" class = "text-right">Label</label>
            </div>

            <div class = "small-6 columns">
               <input type = "text" id = "right-label" placeholder = "Right aligned">
            </div>
         </div>

         <div class = "row">
            <div class = "small-6 columns">
               <label for = "left-label" class = "text-left">Label</label>
            </div>

            <div class = "small-6 columns">
               <input type = "text" id = "left-label" placeholder = "Left aligned">
            </div>
         </div>

         <div class = "row">
            <div class = "small-6 columns">
               <label for = "middle-label" class = "text-right middle">Label</label>
            </div>

            <div class = "small-6 columns">
               <input type = "text" id = "middle-label" placeholder = "Right and middle aligned text input">
            </div>
         </div>
      </form>

      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>
Let us carry out the following steps to see how the above given code works −
Save the above given html code form_label_positioning.html file.
Save the above given html code form_label_positioning.html file.
Open this HTML file in a browser, an output is displayed as shown below.
Open this HTML file in a browser, an output is displayed as shown below.

    117 Lectures 
     5.5 hours 

 Shakthi Swaroop

    61 Lectures 
     1.5 hours 

 Hans Weemaes

    17 Lectures 
     4 hours 

 Stephen Kahuria

    8 Lectures 
     50 mins

 Zenva

    28 Lectures 
     2 hours 

 Sandra L

    16 Lectures 
     2.5 hours 

 GreyCampus Inc.
 Print
 Add Notes
 Bookmark this page