{"id":2256,"date":"2016-08-11T07:49:42","date_gmt":"2016-08-11T07:49:42","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2256"},"modified":"2023-11-15T13:01:05","modified_gmt":"2023-11-15T13:01:05","slug":"simple-and-floating-bootstrap-labels-in-form-elements","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/","title":{"rendered":"Simple and Floating Bootstrap Labels in Form Elements"},"content":{"rendered":"

How to create labels in Bootstrap<\/strong><\/h3>\n

The labels are generally used with the form fields like textboxes, textarea, checkbox, etc. for showing the purpose of that field.<\/p>\n

While using the Bootstrap framework, the labels are styled automatically which you may customize as well.<\/p>\n

See the following section for learning how to create simple and floating labels while using the Bootstrap framework.<\/p>\n

A demo of simple labels in Bootstrap form<\/strong><\/h3>\n

In this demo, a few form fields are created based on Bootstrap CSS form related<\/a> classes. With each form field, a label is associated. For example, the textbox to enter the name is given the \u201cName\u201d label. The \u201cfor\u201d attribute is associated with the ID of the textbox. Similarly, other form fields are created like a select and checkbox with labels using Bootstrap framework:<\/p>\n

\"bootstrap<\/p>\n

The markup:<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\">\r\n   \r\n<\/head>\r\n\r\n<body>\r\n<div class=\"container\">\r\n<h1>Bootstrap labels demo<\/h1>\r\n<form>\r\n  <div class=\"form-group\">\r\n    <label for=\"Name-label\">Name<\/label>\r\n    <input type=\"name\" class=\"form-control\" id=\"Name-label\" placeholder=\"Name\">\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <label for=\"Email1-label\">Email<\/label>\r\n    <input type=\"email\" class=\"form-control\" id=\"Email1-label\" placeholder=\"Email\">\r\n  <\/div>  \r\n  <div class=\"form-group\">\r\n    <label for=\"Inputselect-label\">Select Number<\/label>\r\n    <select class=\"form-control\" >\r\n      <option>1<\/option>\r\n      <option>2<\/option>\r\n      <option>3<\/option>\r\n    <\/select>\r\n  <\/div>  \r\n  <div class=\"checkbox\">\r\n    <label>\r\n      <input type=\"checkbox\" id=\"yesno\"> Yes \/ No\r\n    <\/label>\r\n  <\/div>\r\n\r\n  <button type=\"submit\" class=\"btn btn-info\">Save<\/button>\r\n<\/form>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
A demo of creating inline labels<\/strong><\/h3>\n
In the above example, the labels Bootstrap were created above the form fields. In this demo, the labels are created inline. Basically, you may use the form-inline class which is built-in CSS class in Bootstrap framework. The labels are created as in above example:<\/p>\n
\"bootstrap<\/p>\n
The markup:<\/strong><\/p>\n
<form class=\"form-inline\">\r\n\r\n\u00a0 <div class=\"form-group\">\r\n\r\n\u00a0\u00a0\u00a0 <label for=\"Name-label\">Your Name<\/label>\r\n\r\n\u00a0\u00a0\u00a0 <input type=\"text\" class=\"form-control\" id=\"Name-label\" placeholder=\"Enter Name here\">\r\n\r\n\u00a0 <\/div>\r\n\r\n\u00a0 <div class=\"form-group\">\r\n\r\n\u00a0\u00a0\u00a0 <label for=\"Email-label\">Email<\/label>\r\n\r\n\u00a0\u00a0\u00a0 <input type=\"email\" class=\"form-control\" id=\"Email-label\" placeholder=\"Email here\">\r\n\r\n\u00a0 <\/div>\r\n\r\n\u00a0 <button type=\"submit\" class=\"btn btn-success\">Submit<\/button>\r\n\r\n<\/form><\/pre>\n
A demo of floating labels in text boxes<\/strong><\/h3>\n
In this demo, pure CSS is used for creating the floating labels in Bootstrap that are associated with the textbox fields. The CSS transition property is used for the labels whereas linear motion is used to float the labels.<\/p>\n
\"bootstrap<\/p>\n
The custom CSS used in the demo:<\/strong><\/p>\n
fieldset.form-group {\r\n\r\n\u00a0 position: relative;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\nlabel {\r\n\r\n\u00a0 position: absolute;\r\n\r\n\u00a0 top: .6rem;\r\n\r\n\u00a0 left: 1rem;\r\n\r\n\u00a0 transition: all .4s linear;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n:focus + label {\r\n\r\n\u00a0 color: #800040;\r\n\r\n\u00a0 top: -15px;\r\n\r\n\u00a0 background: #F2F2F2;\r\n\r\n}<\/pre>\n
The markup:<\/strong><\/p>\n
<form class=\"form-group\">\r\n\r\n\u00a0 <fieldset class=\"form-group\">\r\n\r\n\u00a0\u00a0\u00a0 <input type=\"email\" class=\"form-control\" id=\"email-label\" placeholder=\"\">\r\n\r\n\u00a0\u00a0\u00a0 <label for=\"email-label\">Your Email<\/label>\r\n\r\n\u00a0\u00a0\u00a0 <small class=\"text-muted\">A little description about the field<\/small>\r\n\r\n\u00a0 <\/fieldset>\r\n\r\n\u00a0 <fieldset class=\"form-group\">\r\n\r\n\u00a0\u00a0\u00a0 <input type=\"password\" class=\"form-control\" id=\"pass-label\" placeholder=\"\">\r\n\r\n\u00a0\u00a0\u00a0 <label for=\"pass-label\">Enter Password<\/label>\r\n\r\n\u00a0 <\/fieldset>\r\n\r\n\u00a0\r\n\r\n\u00a0 <button type=\"submit\" class=\"btn btn-success\">Proceed<\/button>\r\n\r\n<\/form><\/pre>\n
You may change the position by modifying the focus + label<\/strong> in the CSS section. Just change the value of the top and adjust as you want.<\/p>\n
Get the complete code from the demo page.<\/p>\n","protected":false},"excerpt":{"rendered":"
How to create labels in Bootstrap The labels are generally used with the form fields like textboxes, textarea, checkbox, etc. for showing the purpose of that field. While using the Bootstrap framework, the labels are styled automatically which you may customize as well. See the following section for learning how to create simple and floating … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2259,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[30],"yoast_head":"\nSimple and Floating Bootstrap Labels in Form Elements<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple and Floating Bootstrap Labels in Form Elements\" \/>\n<meta property=\"og:description\" content=\"How to create labels in Bootstrap The labels are generally used with the form fields like textboxes, textarea, checkbox, etc. for showing the purpose of that field. While using the Bootstrap framework, the labels are styled automatically which you may customize as well. See the following section for learning how to create simple and floating ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-11T07:49:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-15T13:01:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/52.0_3-bootstrap-label-floating.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"271\" \/>\n\t<meta property=\"og:image:height\" content=\"181\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/\",\"url\":\"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/\",\"name\":\"Simple and Floating Bootstrap Labels in Form Elements\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-08-11T07:49:42+00:00\",\"dateModified\":\"2023-11-15T13:01:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simple and Floating Bootstrap Labels in Form Elements\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple and Floating Bootstrap Labels in Form Elements","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/","og_locale":"en_US","og_type":"article","og_title":"Simple and Floating Bootstrap Labels in Form Elements","og_description":"How to create labels in Bootstrap The labels are generally used with the form fields like textboxes, textarea, checkbox, etc. for showing the purpose of that field. While using the Bootstrap framework, the labels are styled automatically which you may customize as well. See the following section for learning how to create simple and floating ... Read more","og_url":"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/","article_published_time":"2016-08-11T07:49:42+00:00","article_modified_time":"2023-11-15T13:01:05+00:00","og_image":[{"width":271,"height":181,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/52.0_3-bootstrap-label-floating.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/","url":"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/","name":"Simple and Floating Bootstrap Labels in Form Elements","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-08-11T07:49:42+00:00","dateModified":"2023-11-15T13:01:05+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/simple-and-floating-bootstrap-labels-in-form-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Simple and Floating Bootstrap Labels in Form Elements"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2256"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2256"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2256\/revisions"}],"predecessor-version":[{"id":11346,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2256\/revisions\/11346"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2259"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}