{"id":3247,"date":"2017-12-21T08:19:17","date_gmt":"2017-12-21T13:19:17","guid":{"rendered":"https:\/\/www.pair.com\/support\/kb\/?p=3247"},"modified":"2020-02-26T09:20:54","modified_gmt":"2020-02-26T14:20:54","slug":"types-of-bootstrap-forms","status":"publish","type":"ht_kb","link":"https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/","title":{"rendered":"How to Customize Bootstrap Form Layouts"},"content":{"rendered":"

Bootstrap has templates for many basic website components, such as forms. You can use these templates as a springboard into creating a custom form. Bootstrap also supplies preformatted form elements that you can easily swap in or out of your form. We\u2019ll go over the basics for customizing your\u00a0form's layout here. To see all of the available form templates and elements, see the <\/span>Forms<\/b> section<\/span><\/a> of the Bootstrap CSS page.<\/span><\/p>\n \t\t

\r\n \t\t\t \t\t\t \t\t\t\t

\r\n \t\t\t\t\tThese instructions are for Bootstrap version\u00a04.2.1 \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t\n

If you are looking for instructions on how to add items to a Bootstrap form, see our How to Add Items to a Bootstrap Form article<\/a>.<\/p>\n

Form Customizations<\/h3>\n

There are several types of form customizations: groups<\/a>, controls<\/a>, grids<\/a>, rows and columns<\/a>, horizontal<\/a>,\u00a0 auto-sizing<\/a>, and inline<\/a>. Each will style your form in a different way. In some instances, you can use different types of customization within the same form.<\/span>
\n<\/a><\/p>\n

Form Groups<\/h4>\n

Using form-group classes in your form will automatically add spacing for labels and controls<\/a> (a type of form item).\u00a0<\/span><\/p>\n

You can add the form-group class to your form by encasing each label and\u00a0control\u00a0<\/a><\/span>in a div class with the form-group class:<\/p>\n

<div class =\"form-group\"> <!-- Bootstrap Label or Control code here --> <\/div><\/pre>\n
Each form element and label needs to be in its own <\/span>form-group<\/span> class. If they are not, the spacing style will not be applied. <\/span><\/p>\n
As you can see in the example below, the form that uses class=\"form-group\"<\/span> has applied spacing, while the form without class=\"form-group\"<\/span> doesn't apply much space between the form items.\"formgroup<\/a><\/p>\n
In a large form, using the form-group class may be applied like this:<\/span><\/p>\n
<form> <\/span>\r\n<div class=\u201dform-group\u201d><\/span>\r\n \u00a0<label for=\"example\">Email Address<\/label><\/span>\r\n \u00a0<input type=\"email\" class=\"form-control\" placeholder=\"Enter your email\"><\/span>\r\n<\/div>\r\n\r\n<div class=\u201dform-group\u201d><\/span>\r\n \u00a0<label for=\"example\">Password<\/label><\/span>\r\n \u00a0<input type=\"password\" class=\"form-control\" placeholder=\"Enter your password\"><\/span>\r\n<\/div><\/span>\r\n\r\n<button type=\"submit\" class=\"btn btn-default\">Login<\/button><\/span>\r\n<\/form><\/span><\/pre>\n
The example above will show the automatic spacing of the form-group<\/span> class:\"form<\/a>
\n<\/a><\/p>\n
Form Controls<\/h4>\n
The <\/span>form-control<\/span> class is different from the form-group class. While <\/span>form-group sets up the spacing between form elements, <\/span>form-control sets the width of the form element to 100%, causing it to span the width of the form and resize with the window.\u00a0<\/span><\/p>\n
<\/a><\/p>\n
Form-Control in a Selection<\/h5>\n
For example, if you wanted to add a selection form element with <\/span>form-control, the code would look like this:<\/span><\/p>\n
<select <\/span>class=\"form-control\"<\/span>><\/span>\r\n \u00a0<option>Option 1<\/option><\/span>\r\n \u00a0<option>Option 2<\/option><\/span>\r\n \u00a0<option>Option 3<\/option><\/span>\r\n \u00a0<option>Option 4<\/option><\/span>\r\n \u00a0<option>Option 5<\/option><\/span>\r\n<\/select><\/span><\/pre>\n
Below, you can see the difference between the code above with the form-control class and without the form-control class.\"form<\/a>
\n<\/a><\/p>\n
Form Grids<\/h4>\n
You can use the Bootstrap grid system<\/a> to organize your form. You can organize your form controls<\/a>\u00a0into columns and rows.\u00a0<\/span><\/p>\n
If you aren't familiar with the Bootstrap grid system, check out our article,\u00a0Understanding Bootstrap's Grid System<\/a>.\u00a0<\/span><\/p>\n
You can add columns and rows by adding <div class=\"row\"><\/span> and <div class=\"col\"><\/span> to your form.<\/p>\n
Here's an example of how you can use rows and columns in form code:<\/p>\n
<form> \r\n  <div class=\"row\"><\/span>\r\n    <div class=\"col\"><\/span>\r\n \u00a0    <label for=\"exampleEmail\">Email Address<\/label>\r\n \u00a0    <input type=\"email\" class=\"form-control\" placeholder=\"Enter your email\">\r\n    <\/div><\/span>\r\n    <div class=\"col\"><\/span>\r\n \u00a0    <label for=\"examplePassword\">Password<\/label>\r\n \u00a0    <input type=\"password\" class=\"form-control\" placeholder=\"Enter your password\">\r\n    <\/div><\/span>\r\n  <\/div><\/span>\r\n  <div class=\"form-group\">\r\n      <input type=\"checkbox\" class=\"form-check-input\" id=\"exampleCheckbox\">\r\n      <label for=\"exampleCheckbox\">Sign me up to receive special promotions!<\/label>\r\n  <\/div>\r\n  <button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\r\n<\/form><\/pre>\n
In the example above, the email and password fields are separated into two columns within a row. This is why they are displayed side by side on a webpage. Because the checkbox is not in the row, it is placed beneath both the email and password fields. If another row came after this, it would also be placed underneath the previous section.<\/p>\n
\"row<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
The same rules that apply to Bootstrap's grid system<\/a> apply to the grid forms. Keep in mind that columns go inside rows and that you can have up to twelve columns in a row.<\/p>\n
You can specify how many columns you want a form control to take up by using <div class=\"col-prefix-#\"><\/span> instead of <div class=\"col\"><\/span>. To learn more about column prefixes and numbers, see our Bootstrap grid system article<\/a>.<\/p>\n
<\/a><\/p>\n
Form Row<\/h4>\n
Like form grids<\/a>, form rows use the same grid structure of columns and rows to style the form. However, using the form row class implements a tighter spacing style for columns within a row. So, instead of using <div class=\"row\"><\/span>, you would use <div class=\"form-row\"><\/span> in its place. The below code is an example of how the form-row class may be used:<\/p>\n
<form> \r\n  <div class=\"form-row\"><\/span>\r\n    <div class=\"col\">\r\n\u00a0     <label for=\"example\">Email Address<\/label>\r\n\u00a0     <input type=\"email\" class=\"form-control\" placeholder=\"Enter your email\">\r\n    <\/div>\r\n    <div class=\"col\">\r\n\u00a0     <label for=\"example\">Password<\/label>\r\n\u00a0     <input type=\"password\" class=\"form-control\" placeholder=\"Enter your password\">\r\n    <\/div>\r\n  <\/div><\/span>\r\n  <div class=\"form-group\">\r\n    <div class=\"col\">\r\n     <input type=\"checkbox\" class=\"form-check-input\" id=\"exampleCheckbox\">\r\n     <label for=\"exampleCheckbox\">Sign me up to receive special promotions!<\/label>\r\n    <\/div>\r\n  <\/div>\r\n <button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\r\n<\/form><\/pre>\n
The above code is displayed with a smaller gap of space between the two columns:<\/p>\n
\"form<\/a><\/p>\n
Now compare the above image (that uses the form-row class) to the image below (that uses just the row class). The amount of spacing between the two columns in the above image is smaller than the below image.
\n\"row<\/a><\/p>\n
<\/a><\/p>\n
Form Auto-sizing<\/h4>\n
It is possible to set up forms that will automatically size themselves based on the form's content. While it still operates on a grid<\/a>, all that is needed to implement an automatic sizing layout is to swap out the class=\"col\"<\/span> for class=\"col-auto\"<\/span><\/p>\n
For example, the code below uses auto-sizing class:<\/p>\n
<form>\r\n  <div class=\"row\">\r\n    <label for=\"exampleEmail\" class=\"col-sm-2 col-form-label\">Email<\/label>\r\n      <div class=\"col-auto\"><\/span>\r\n        <input type=\"email\" class=\"form-control\" placeholder=\"Email\">\r\n      <\/div><\/span>\r\n  <\/div>\r\n  <div class=\"row\">\r\n     <label for=\"examplePassword\" class=\"col-sm-2 col-form-label\">Password<\/label>\r\n       <div class=\"col-auto\"><\/span>\r\n          <input type=\"password\" class=\"form-control\" id=\"examplePassword\" placeholder=\"Password\">\r\n       <\/div><\/span>\r\n  <\/div>\r\n  <div class=\"row\">\r\n    <div class=\"col-auto\"><\/span>\r\n      <div class=\"form-check\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" id=\"exampleCheckbox\">\r\n        <label class=\"form-check-label\" for=\"exampleCheckbox\">\r\n        Sign me up to receive special promotions!\r\n        <\/label>\r\n      <\/div><\/span>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"row\">\r\n    <div class=\"col-auto\"><\/span>\r\n      <button type=\"submit\" class=\"btn btn-primary\">Login<\/button>\r\n    <\/div><\/span>\r\n  <\/div>\r\n<\/form><\/pre>\n
This will result in a form that automatically sizes itself based on the fields and labels:<\/p>\n
\"auto<\/a><\/p>\n
<\/a><\/p>\n
Horizontal Form<\/h4>\n
The horizontal form uses a combination of grid<\/a> and form grouping<\/a>. It uses both columns and rows, as well as the form-group class. The form will list labels and form controls horizontally, depending on the column layout.<\/p>\n
Here is an example of what the code for a horizontal form would be like:<\/p>\n
<form>\r\n  <div class=\"form-group row\"><\/span>\r\n     <label for=\"exampleEmail\" class=\"col-sm-2 col-form-label<\/span>\">Email<\/label>\r\n       <div class=\"col-sm-10\">\r\n         <input type=\"email\" class=\"form-control\" placeholder=\"Email\">\r\n       <\/div>\r\n  <\/div><\/span>\r\n  <div class=\"form-group row\"><\/span>\r\n    <label for=\"examplePassword\" class=\"col-sm-2 col-form-label<\/span>\">Password<\/label>\r\n       <div class=\"col-sm-10\">\r\n         <input type=\"password\" class=\"form-control\" id=\"examplePassword\" placeholder=\"Password\">\r\n       <\/div>\r\n  <\/div><\/span>\r\n  <div class=\"form-group row\"><\/span>\r\n    <div class=\"col-sm-2\"><\/div>\r\n      <div class=\"col-sm-10\">\r\n        <div class=\"form-check\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" id=\"exampleCheckbox\">\r\n          <label class=\"form-check-label\" for=\"exampleCheckbox\">\r\n          Sign me up to receive special promotions!\r\n          <\/label>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div><\/span>\r\n  <div class=\"form-group row\"><\/span>\r\n    <div class=\"col-sm-10\">\r\n      <button type=\"submit\" class=\"btn btn-primary\">Login<\/button>\r\n    <\/div>\r\n  <\/div><\/span>\r\n<\/form><\/pre>\n
The above code will align the labels and controls horizontally:<\/p>\n
\"horizontal<\/a><\/p>\n
With the horizontal form, it is important to include a special class with some control labels. This class is:<\/p>\n
<label class=\"col-sm-2 col-form-label<\/span>\">Password<\/label><\/pre>\n
This class arranges the labels on the form, so forgetting it could result in strange label positions.<\/p>\n
<\/a><\/p>\n
Inline Forms<\/h4>\n
You can create an inline form by adding a form-inline<\/span> class to the <form> element at the beginning of your form. This will align controls and labels in the same row in a horizontal line.<\/p>\n
Here is an example of a form using the inline format:<\/p>\n
<form class=\"form-inline\"><\/span>\r\n  <label class=\"<\/span>my-1 mr-2\"<\/span> for=\"exampleEmail\">Email<\/label>\r\n  <input type=\"text\" class=\"form-control mb-2 mr-sm-2<\/span>\" id=\"exampleEmail\" placeholder=\"email\">\r\n\r\n  <label class=\"my-1 mr-2<\/span>\" for=\"examplePassword\">Password<\/label>\r\n  <div class=\"input-group mb-2 mr-sm-2<\/span>\">\r\n    <input type=\"text\" class=\"form-control\" id=\"examplePassword\" placeholder=\"password\">\r\n  <\/div>\r\n\r\n  <div class=\"form-check mb-2 mr-sm-2<\/span>\">\r\n    <input class=\"form-check-input\" type=\"checkbox\" id=\"inlineFormCheck\">\r\n    <label class=\"form-check-label\" for=\"inlineFormCheck\">\r\n     Sign me up to receive special promotions!\r\n    <\/label>\r\n  <\/div>\r\n\r\n  <button type=\"submit\" class=\"btn btn-primary mb-2<\/span>\">Submit<\/button>\r\n<\/form><\/span><\/pre>\n
The above code will create a form that is displayed inline:<\/p>\n
\"inline<\/a><\/p>\n
Notice that in this example, the labels and controls have different classes that we have not used in previous examples. These new classes are responsible for adding new spacing guidelines for this example. Inline forms can disturb the default spacing layout, so it may be necessary to use classes, like above.<\/p>\n
You can go to the Bootstrap official documentation Spacing page<\/a> to find out more about these classes.<\/p>\n
If you want more information about Bootstrap forms, check out our How to Add Items to a Bootstrap Form article<\/a>.<\/p>\n    \t\t
\r\n    \t\t\t    \t\t\t    \t\t\t\t
\r\n    \t\t\t\t\tBootstrap is an open-source CSS framework permissive under an MIT license. Bootstrap is not a product of Pair Networks, Inc., and Pair Networks provides no warranty for Bootstrap. Please note that there are many levels of CSS frameworks available. Please consult with your IT professional for advice and guidance on an appropriate CSS framework. This specific product may or may not meet your needs. Pair Networks, Inc. is providing support for this tutorial for your convenience and is not responsible for Bootstrap's performance. Please read carefully the terms and scope of services for any online service or product you are considering purchasing or using.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div>\r\n    \t\t\n","protected":false},"excerpt":{"rendered":"
Bootstrap has templates for many basic website components, such as forms. You can use these templates as a springboard into creating a custom form. Bootstrap also supplies preformatted form elements that you can easily swap in or out of your form. We\u2019ll go over the basics for customizing your\u00a0form’s layout…<\/p>\n","protected":false},"author":11,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[33],"ht-kb-tag":[187],"yoast_head":"\nHow to Customize Bootstrap Form Layouts - Knowledge Base - Pair Networks<\/title>\n<meta name=\"description\" content=\"Bootstrap has templates for many basic website components, such as forms. You can use these templates as a springboard into creating a custom form. Bootstrap also supplies preformatted form elements that you can easily swap in or out of your form. We\u2019ll go over the basics of Bootstrap form types here.\" \/>\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.pair.com\/support\/kb\/types-of-bootstrap-forms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Customize Bootstrap Form Layouts - Knowledge Base - Pair Networks\" \/>\n<meta property=\"og:description\" content=\"Bootstrap has templates for many basic website components, such as forms. You can use these templates as a springboard into creating a custom form. Bootstrap also supplies preformatted form elements that you can easily swap in or out of your form. We\u2019ll go over the basics of Bootstrap form types here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowledge Base - Pair Networks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pairnetworks\/\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-26T14:20:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2019\/02\/formgroup-image-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@pairNetworks\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/\",\"name\":\"How to Customize Bootstrap Form Layouts - Knowledge Base - Pair Networks\",\"isPartOf\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\"},\"datePublished\":\"2017-12-21T13:19:17+00:00\",\"dateModified\":\"2020-02-26T14:20:54+00:00\",\"description\":\"Bootstrap has templates for many basic website components, such as forms. You can use these templates as a springboard into creating a custom form. Bootstrap also supplies preformatted form elements that you can easily swap in or out of your form. We\u2019ll go over the basics of Bootstrap form types here.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pair.com\/support\/kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Customize Bootstrap Form Layouts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"name\":\"Knowledge Base - Pair Networks\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\",\"name\":\"Pair Networks\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"contentUrl\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"width\":360,\"height\":360,\"caption\":\"Pair Networks\"},\"image\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pairnetworks\/\",\"https:\/\/twitter.com\/pairNetworks\",\"https:\/\/www.instagram.com\/pairnetworks\/\",\"https:\/\/www.linkedin.com\/company\/2269676\/\",\"https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/\",\"https:\/\/www.youtube.com\/user\/pairnetworks\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Customize Bootstrap Form Layouts - Knowledge Base - Pair Networks","description":"Bootstrap has templates for many basic website components, such as forms. You can use these templates as a springboard into creating a custom form. Bootstrap also supplies preformatted form elements that you can easily swap in or out of your form. We\u2019ll go over the basics of Bootstrap form types here.","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.pair.com\/support\/kb\/types-of-bootstrap-forms\/","og_locale":"en_US","og_type":"article","og_title":"How to Customize Bootstrap Form Layouts - Knowledge Base - Pair Networks","og_description":"Bootstrap has templates for many basic website components, such as forms. You can use these templates as a springboard into creating a custom form. Bootstrap also supplies preformatted form elements that you can easily swap in or out of your form. We\u2019ll go over the basics of Bootstrap form types here.","og_url":"https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/","og_site_name":"Knowledge Base - Pair Networks","article_publisher":"https:\/\/www.facebook.com\/pairnetworks\/","article_modified_time":"2020-02-26T14:20:54+00:00","og_image":[{"url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2019\/02\/formgroup-image-1.png"}],"twitter_card":"summary_large_image","twitter_site":"@pairNetworks","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/","url":"https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/","name":"How to Customize Bootstrap Form Layouts - Knowledge Base - Pair Networks","isPartOf":{"@id":"https:\/\/www.pair.com\/support\/kb\/#website"},"datePublished":"2017-12-21T13:19:17+00:00","dateModified":"2020-02-26T14:20:54+00:00","description":"Bootstrap has templates for many basic website components, such as forms. You can use these templates as a springboard into creating a custom form. Bootstrap also supplies preformatted form elements that you can easily swap in or out of your form. We\u2019ll go over the basics of Bootstrap form types here.","breadcrumb":{"@id":"https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pair.com\/support\/kb\/types-of-bootstrap-forms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pair.com\/support\/kb\/"},{"@type":"ListItem","position":2,"name":"How to Customize Bootstrap Form Layouts"}]},{"@type":"WebSite","@id":"https:\/\/www.pair.com\/support\/kb\/#website","url":"https:\/\/www.pair.com\/support\/kb\/","name":"Knowledge Base - Pair Networks","description":"","publisher":{"@id":"https:\/\/www.pair.com\/support\/kb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.pair.com\/support\/kb\/#organization","name":"Pair Networks","url":"https:\/\/www.pair.com\/support\/kb\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/","url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","contentUrl":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","width":360,"height":360,"caption":"Pair Networks"},"image":{"@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pairnetworks\/","https:\/\/twitter.com\/pairNetworks","https:\/\/www.instagram.com\/pairnetworks\/","https:\/\/www.linkedin.com\/company\/2269676\/","https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/","https:\/\/www.youtube.com\/user\/pairnetworks"]}]}},"_links":{"self":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3247"}],"collection":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/comments?post=3247"}],"version-history":[{"count":23,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3247\/revisions"}],"predecessor-version":[{"id":7427,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3247\/revisions\/7427"}],"wp:attachment":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/media?parent=3247"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=3247"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=3247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}