{"id":367,"date":"2015-11-26T18:37:40","date_gmt":"2015-11-26T18:37:40","guid":{"rendered":"https:\/\/www.jquery-az.com\/?p=367"},"modified":"2023-09-25T11:02:38","modified_gmt":"2023-09-25T11:02:38","slug":"bootstrap-select-5-beautiful-styles","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/","title":{"rendered":"Bootstrap Select"},"content":{"rendered":"

The Bootstrap select – option<\/strong><\/h3>\n

The select\u2013option dropdown can be added along with other form controls in Bootstrap forms by using built-in classes. You may use simple Bootstrap classes, customized CSS, or third party add-ons to create beautiful looking select dropdowns. I am going to show you both.<\/p>\n

The simple select can be created by Bootstrap class in the select tag as follows:<\/p>\n

class=\"form-control\"<\/pre>\n
For example:<\/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\" integrity=\"sha512-dTfge\/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz\/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==\" crossorigin=\"anonymous\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    \r\n<\/head>\r\n\r\n\r\n<body>\r\n<div class=\"container\">\r\n<h1>A Bootstrap Select<\/h1>\r\n\r\n<div class=\"form-group\">\r\n        <label for=\"gender1\" class=\"col-sm-2 control-label\">Without Bootstrap:<\/label>\r\n        <div class=\"col-sm-2\">\r\n        <select id=\"gender1\">\r\n          <option>Male<\/option>\r\n          <option>Female<\/option>\r\n        <\/select>          \r\n          \r\n        <\/div>\r\n<\/div>          \r\n<div class=\"form-group\">\r\n        <label for=\"gender1\" class=\"col-sm-2 control-label\">With Bootstrap:<\/label>\r\n        <div class=\"col-sm-2\">\r\n        <select class=\"form-control\" id=\"gender1\">\r\n          <option>Male<\/option>\r\n          <option>Female<\/option>\r\n        <\/select>          \r\n          \r\n        <\/div>\r\n<\/div>          \r\n\r\n<\/div>\r\n\r\n \r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
Output:<\/strong><\/p>\n
\"6.1-Bootstrap-select-simple\"<\/p>\n
<\/h6>\n
You can see the figure and demo page, the first select is created without using any class while the second is assigned the\u00a0form-control<\/em> Bootstrap class.<\/p>\n
Adding custom style in Bootstrap select demo<\/strong><\/h3>\n
You may assign the Bootstrap class as well as a custom style to change the look and feel of the select dropdown.<\/p>\n
In the following example, I have created a custom class that is assigned in addition to the form-control <\/em>class in the select tag. See online demo and code:<\/p>\n
\"Bootstrap<\/p>\n
In the head section, a CSS class is created<\/p>\n
<style>\r\n.selcls { \r\n    padding: 9px; \r\n    border: solid 1px #517B97; \r\n    outline: 0; \r\n    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF)); \r\n    background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); \r\n    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; \r\n    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; \r\n    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; \r\n\r\n    } \r\n   \r\n<\/style><\/pre>\n
This is assigned to the select dropdown as follows:<\/p>\n
\n
<select class=\"form-control selcls\" id=\"gender1\">\r\n\r\n<option>Male<\/option>\r\n\r\n<option>Female<\/option>\r\n\r\n<\/select><\/pre>\n<\/blockquote>\n
Related:<\/strong> Dropdown as a multi-select button using Bootstrap<\/a><\/p>\n
Select in a Bootstrap form example<\/strong><\/h3>\n
Let me show an example of using the select in a Bootstrap form along with other controls. The controls like textboxes, button and select are using Bootstrap as well as a custom class. First have a look at demo and code:<\/p>\n
\"Bootstrap<\/p>\n
Two select tags are used that are assigned Bootstrap class, form-control<\/em>. Along with it, both are assigned inputstl<\/em> custom class to style along with other form fields.<\/p>\n
The Gender select is created to choose only one option.<\/p>\n
By using the multiple<\/em><\/strong> option in the Expertise select dropdown, you can choose multiple options:<\/p>\n
<div class=\"form-group\">\r\n\r\n<label for=\"expertise\" class=\"col-sm-2 control-label\">Expertise:<\/label>\r\n\r\n<div class=\"col-sm-3\">\r\n\r\n<select class=\"form-control inputstl\" id=\"expertise\" multiple>\r\n\r\n<option>PHP<\/option>\r\n\r\n<option>Java<\/option>\r\n\r\n<option>HTML<\/option>\r\n\r\n<option>CSS<\/option>\r\n\r\n<option>Bootstrap<\/option>\r\n\r\n<option>SQL<\/option>\r\n\r\n<\/select>\r\n\r\n<\/div><\/pre>\n
Complete code of the example<\/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\" integrity=\"sha512-dTfge\/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz\/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==\" crossorigin=\"anonymous\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n<style>\r\n.inputstl { \r\n    padding: 9px; \r\n    border: solid 1px #0077B0; \r\n    outline: 0; \r\n    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #C6ECFF), to(#FFFFFF)); \r\n    background: -moz-linear-gradient(top, #FFFFFF, #C6ECFF 1px, #FFFFFF 25px); \r\n    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; \r\n    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; \r\n    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; \r\n\r\n    } \r\n   \r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"container\">\r\n<h1>Bootstrap Select demo<\/h1>\r\n    <form class=\"form-horizontal\" role=\"form\">\r\n      <div class=\"form-group\">\r\n        <label for=\"name1\" class=\"col-sm-2 control-label\">Name:<\/label>\r\n        <div class=\"col-sm-4\">\r\n          <input type=\"email\" class=\"form-control inputstl\" id=\"name1\" placeholder=\"Enter Your Full Name\">\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"form-group\">\r\n        <label for=\"gender1\" class=\"col-sm-2 control-label\">Gender:<\/label>\r\n        <div class=\"col-sm-2\">\r\n        <select class=\"form-control inputstl\" id=\"gender1\">\r\n          <option>Male<\/option>\r\n          <option>Female<\/option>\r\n        <\/select>          \r\n          \r\n        <\/div>\r\n      <\/div>      \r\n      <div class=\"form-group\">\r\n        <label for=\"email1\" class=\"col-sm-2 control-label\">Email:<\/label>\r\n        <div class=\"col-sm-5\">\r\n          <input type=\"email\" class=\"form-control inputstl\" id=\"email1\" placeholder=\"Enter Email\">\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"form-group\">\r\n        <label for=\"password1\" class=\"col-sm-2 control-label\">Password:<\/label>\r\n        <div class=\"col-sm-3\">\r\n          <input type=\"password\" class=\"form-control inputstl\" id=\"password1\" placeholder=\"Password here\">\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"form-group\">\r\n        <label for=\"address1\" class=\"col-sm-2 control-label\">Address:<\/label>\r\n        <div class=\"col-sm-5\">\r\n          <input type=\"email\" class=\"form-control inputstl\" id=\"address1\" placeholder=\"Full Address\">\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"form-group\">\r\n        <label for=\"expertise\" class=\"col-sm-2 control-label\">Expertise:<\/label>\r\n        <div class=\"col-sm-3\">\r\n        <select class=\"form-control inputstl\" id=\"expertise\" multiple>\r\n          <option>PHP<\/option>\r\n          <option>Java<\/option>\r\n          <option>HTML<\/option>\r\n          <option>CSS<\/option>\r\n          <option>Bootstrap<\/option>\r\n          <option>SQL<\/option>\r\n        <\/select>          \r\n          \r\n        <\/div>\r\n                  \r\n      <div class=\"form-group\">\r\n        <div class=\"col-sm-offset-2 col-sm-10\">\r\n          <div class=\"checkbox\">\r\n            <label>\r\n              <input type=\"checkbox\" class=\"inputstl\"> Remember me\r\n            <\/label>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"form-group\">\r\n        <div class=\"col-sm-offset-2 col-sm-4\">\r\n          <button type=\"submit\" class=\"btn btn-lg btn-block btn-info\">Create Account<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/form>\r\n   <\/div> \r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
You should also read:\u00a0<\/strong>Bootstrap multi-select dropdown<\/a><\/p>\n
Using a plug-in for select\u00a0Bootstrap<\/strong><\/h3>\n
Now, I will show you creating pretty looking select dropdowns by using the Bootstrap-select<\/em><\/strong> add-on<\/em>. Not only the look and feel can be changed but it adds many useful features in select buttons. By using that, the user experience can be enhanced incredibly.<\/p>\n
First, let me show you a few select button examples followed by step by step guide to set up to use for your project.<\/p>\n
\"Bootstrap<\/p>\n
The code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.4\/css\/bootstrap.min.css\">\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-select\/1.7.5\/css\/bootstrap-select.min.css\">\r\n  <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\r\n  <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.4\/js\/bootstrap.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-select\/1.7.5\/js\/bootstrap-select.min.js\"><\/script>\r\n\r\n\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"container\">\r\n<h1>Bootstrap Select demo<\/h1>\r\n\r\n<select class=\"selectpicker\" data-style=\"btn-primary\" multiple data-max-options=\"2\">\r\n    <option>PHP<\/option>\r\n    <option>CSS<\/option>\r\n    <option>HTML<\/option>\r\n    <option>CSS 3<\/option>\r\n    <option>Bootstrap<\/option>\r\n    <option>JavaScript<\/option>\r\n  <\/select>\r\n \r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
The above select dropdown allows selecting multiple options\u00a0while it also slides down just like the normal (single option) dropdown. \u00a0However, you can see the demo page, how cool it is looking. It used the btn-primary<\/em> button style of Bootstrap add-on.<\/p>\n
The select tag is given the selectpicker<\/strong> <\/em>class, that you can use after setting up the plug-in (explained below).<\/p>\n
To give it a bluish look, the data-style<\/strong> <\/em>attribute is used i.e. data-style=”btn-primary”<\/em>. The user can make a maximum of two selection which is specified here:<\/p>\n
data-max-options=\"2\".<\/pre>\n
This is also the feature of this add-on.<\/p>\n
A select with option groups example<\/strong><\/h3>\n
You may add option groups<\/strong> while using this plug-in as well. That means\u00a0a separator will be added between groups. See below to better understand:<\/p>\n
\"Bootstrap<\/p>\n
Code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.4\/css\/bootstrap.min.css\">\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-select\/1.7.5\/css\/bootstrap-select.min.css\">\r\n  <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\r\n  <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.4\/js\/bootstrap.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-select\/1.7.5\/js\/bootstrap-select.min.js\"><\/script>\r\n\r\n\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"container\">\r\n<h1>Bootstrap Select demo<\/h1>\r\n\r\n\r\n<select class=\"selectpicker\" data-style=\"btn-danger\" multiple data-max-options=\"3\">\r\n    <optgroup label=\"Web\">\r\n        <option>PHP<\/option>\r\n        <option>CSS<\/option>\r\n        <option>HTML<\/option>\r\n        <option>CSS 3<\/option>\r\n        <option>Bootstrap<\/option>\r\n        <option>JavaScript<\/option>\r\n    <\/optgroup>\r\n    <optgroup label=\"Programming\">\r\n      <option>Java<\/option>\r\n      <option>C#<\/option>\r\n      <option>Python<\/option>\r\n    <\/optgroup>\r\n  <\/select>\r\n \r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
You can see in the demo, the \u201cWeb\u201d section is separated from the \u201cProgramming\u201d section in the dropdown. By removing the option data-max-options=”2″,<\/em><\/strong> you may allow to select only one option in the dropdown.<\/p>\n
Adding search facility in select<\/strong><\/h3>\n
Another great feature of this plug-in is the search box. If you have a\u00a0long list of options in the dropdown, for example, the \u201cselect country\u201d dropdown, this feature becomes really cool.<\/p>\n
By adding this attribute:<\/p>\n
data-live-search=”true”<\/p><\/blockquote>\n
in the select tag, a search textbox will be added in the dropdown. As a user enters a letter, it will filter the options accordingly.<\/p>\n
\"Bootstrap<\/p>\n
The code of the above example is changed slightly for the select tag as below:<\/p>\n
<select class=\"selectpicker\" data-style=\"btn-info\" multiple data-max-options=\"3\" data-live-search=\"true\">\r\n\r\n<optgroup label=\"Web\">\r\n\r\n<option>PHP<\/option>\r\n\r\n<option>CSS<\/option>\r\n\r\n<option>HTML<\/option>\r\n\r\n<option>CSS 3<\/option>\r\n\r\n<option>Bootstrap<\/option>\r\n\r\n<option>JavaScript<\/option>\r\n\r\n<\/optgroup>\r\n\r\n<optgroup label=\"Programming\">\r\n\r\n<option>Java<\/option>\r\n\r\n<option>C#<\/option>\r\n\r\n<option>Python<\/option>\r\n\r\n<\/optgroup>\r\n\r\n<\/select><\/pre>\n
There are many other features that you should go through if you intend to use this plug-in.<\/p>\n
Setting up Bootstrap-select plug-in<\/strong><\/h3>\n
To set up the Bootstrap-select plug-in, follow these steps:<\/p>\n
Step 1:<\/strong><\/p>\n
Add the Bootstrap CSS and JS libraries (That you should already have while working with the Bootstrap framework). If not these are CDN links:<\/p>\n
<link rel=”stylesheet” href=”https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.4\/css\/bootstrap.min.css”><\/p>\n
<script src=”https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.4\/js\/bootstrap.min.js”><\/script><\/p><\/blockquote>\n
Step 2:<\/strong><\/p>\n
You also have to include jQuery library for that (if not already using it):<\/p>\n
<script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js”><\/script><\/p><\/blockquote>\n
Step 3:<\/strong><\/p>\n
Include plug-in files in the head section of the page as well (available from CDN):<\/p>\n
The CSS file:<\/p>\n
<link rel=”stylesheet” href=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-select\/1.7.5\/css\/bootstrap-select.min.css”><\/p><\/blockquote>\n
The JS file:<\/p>\n
<script src=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-select\/1.7.5\/js\/bootstrap-select.min.js”><\/script><\/p><\/blockquote>\n
So basically you need these two additional files\u00a0if you are already using Bootstrap framework and jQuery. These are small in size, so worth trying it.<\/p>\n
Step 4:<\/strong><\/p>\n
Start adding select tags with plug-in classes like shown in the above examples.\u00a0For instance:<\/p>\n
A select with multi-select option code<\/strong><\/p>\n
<select class=\"selectpicker\" data-style=\"btn-primary\" multiple data-max-options=\"2\">\r\n\r\n<option>PHP<\/option>\r\n\r\n<option>CSS<\/option>\r\n\r\n<option>HTML<\/option>\r\n\r\n<option>CSS 3<\/option>\r\n\r\n<option>Bootstrap<\/option>\r\n\r\n<option>JavaScript<\/option>\r\n\r\n<\/select><\/pre>\n
Select with option groups<\/strong><\/p>\n
<select class=\"selectpicker\" data-style=\"btn-danger\" multiple data-max-options=\"3\">\r\n\r\n<optgroup label=\"Web\">\r\n\r\n<option>PHP<\/option>\r\n\r\n<option>CSS<\/option>\r\n\r\n<option>HTML<\/option>\r\n\r\n<option>CSS 3<\/option>\r\n\r\n<option>Bootstrap<\/option>\r\n\r\n<option>JavaScript<\/option>\r\n\r\n<\/optgroup>\r\n\r\n<optgroup label=\"Programming\">\r\n\r\n<option>Java<\/option>\r\n\r\n<option>C#<\/option>\r\n\r\n<option>Python<\/option>\r\n\r\n<\/optgroup>\r\n\r\n<\/select><\/pre>\n
Select with search<\/strong><\/p>\n
<select class=\"selectpicker\" data-style=\"btn-info\" multiple data-max-options=\"3\" data-live-search=\"true\">\r\n\r\n<optgroup label=\"Web\">\r\n\r\n<option>PHP<\/option>\r\n\r\n<option>CSS<\/option>\r\n\r\n<option>HTML<\/option>\r\n\r\n<option>CSS 3<\/option>\r\n\r\n<option>Bootstrap<\/option>\r\n\r\n<option>JavaScript<\/option>\r\n\r\n<\/optgroup>\r\n\r\n<optgroup label=\"Programming\">\r\n\r\n<option>Java<\/option>\r\n\r\n<option>C#<\/option>\r\n\r\n<option>Python<\/option>\r\n\r\n<\/optgroup>\r\n\r\n<\/select><\/pre>\n
For more info and documentation go to the following link:<\/p>\n
Credits and source: plug-in page in github<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
The select\u2013option dropdown can be added along with other form controls in Bootstrap forms by using built-in classes. You may use simple Bootstrap classes, customized CSS, or third party add-ons to create beautiful looking select dropdowns.<\/p>\n","protected":false},"author":1,"featured_media":371,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[30],"yoast_head":"\nBootstrap select \u2013 Learn to use with 5 Beautiful Styles<\/title>\n<meta name=\"description\" content=\"The select\u2013option dropdown can be added along with other form controls in Bootstrap forms by using built-in classes.\" \/>\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\/bootstrap-select-5-beautiful-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap select \u2013 Learn to use with 5 Beautiful Styles\" \/>\n<meta property=\"og:description\" content=\"The select\u2013option dropdown can be added along with other form controls in Bootstrap forms by using built-in classes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-26T18:37:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-25T11:02:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2015\/11\/6.4-Bootstrap-select.png\" \/>\n\t<meta property=\"og:image:width\" content=\"248\" \/>\n\t<meta property=\"og:image:height\" content=\"241\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/\",\"url\":\"https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/\",\"name\":\"Bootstrap select \u2013 Learn to use with 5 Beautiful Styles\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2015-11-26T18:37:40+00:00\",\"dateModified\":\"2023-09-25T11:02:38+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"description\":\"The select\u2013option dropdown can be added along with other form controls in Bootstrap forms by using built-in classes.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap Select\"}]},{\"@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":"Bootstrap select \u2013 Learn to use with 5 Beautiful Styles","description":"The select\u2013option dropdown can be added along with other form controls in Bootstrap forms by using built-in classes.","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\/bootstrap-select-5-beautiful-styles\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap select \u2013 Learn to use with 5 Beautiful Styles","og_description":"The select\u2013option dropdown can be added along with other form controls in Bootstrap forms by using built-in classes.","og_url":"https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/","article_published_time":"2015-11-26T18:37:40+00:00","article_modified_time":"2023-09-25T11:02:38+00:00","og_image":[{"width":248,"height":241,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2015\/11\/6.4-Bootstrap-select.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/","url":"https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/","name":"Bootstrap select \u2013 Learn to use with 5 Beautiful Styles","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2015-11-26T18:37:40+00:00","dateModified":"2023-09-25T11:02:38+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"description":"The select\u2013option dropdown can be added along with other form controls in Bootstrap forms by using built-in classes.","breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/bootstrap-select-5-beautiful-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap Select"}]},{"@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\/367"}],"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=367"}],"version-history":[{"count":14,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/367\/revisions"}],"predecessor-version":[{"id":9921,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/367\/revisions\/9921"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/371"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}