Merge branch 'v4-dev' into dropdown-keyboard

docs/.htmlhintrc

 {
+  "alt-require": true,
   "attr-lowercase": true,
   "attr-no-duplication": true,
-  "alt-require": true,
   "attr-unsafe-chars": true,
   "attr-value-double-quotes": true,
   "doctype-first": true,
   "doctype-html5": true,
+  "id-class-value": true,
   "id-unique": true,
+  "space-tab-mixed-disabled": true,
   "spec-char-escape": true,
   "src-not-empty": true,
   "tag-pair": true,

docs/.htmllintrc

@@ -5,7 +5,7 @@
   "class-style": "dash",
   "doctype-first": true,
   "doctype-html5": true,
-  "fig-req-figcaption": true,
+  "fig-req-figcaption": false,
   "html-valid-content-model": false,
   "id-class-ignore-regex": "(onclick|content|[a-z]+([A-Z][a-z])+)",
   "id-class-style": "dash",

docs/_data/nav.yml

@@ -15,7 +15,7 @@
     - title: Overview
     - title: Grid
     - title: Media object
-    - title: Responsive utilities
+    - title: Utilities for layout
 
 - title: Content
   pages:
@@ -56,10 +56,9 @@
     - title: Clearfix
     - title: Close icon
     - title: Colors
+    - title: Display
     - title: Flexbox
-    - title: Display property
     - title: Image replacement
-    - title: Invisible content
     - title: Position
     - title: Responsive helpers
     - title: Screenreaders
@@ -67,6 +66,7 @@
     - title: Spacing
     - title: Typography
     - title: Vertical align
+    - title: Visibility
 
 - title: Extend
   pages:

docs/_includes/callout-danger-async-methods.md

+{% callout danger %}
+#### Asynchronous methods and transitions
+
+All API methods are **asynchronous** and start a **transition**. They returns to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
+
+[See our Javascript documentation for more informations.]({{ site.baseurl }}/getting-started/javascript/#content)
+{% endcallout %}

docs/_includes/footer.html

@@ -25,9 +25,10 @@
 {% if site.github %}
   <script src="{{ site.baseurl }}/assets/js/docs.min.js"></script>
 {% else %}
-  {% for file in site.data.configBridge.paths.docsJs %}
-    <script src="{{ site.baseurl }}/{{ file }}"></script>
-  {% endfor %}
+  <script src="{{ site.baseurl }}/assets/js/vendor/anchor.min.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/vendor/clipboard.min.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/vendor/holder.min.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/src/application.js"></script>
 {% endif %}
 
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

docs/_includes/nav-docs.html

-<form class="bd-search hidden-sm-down">
+<form class="bd-search d-none d-sm-block">
   <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
   <div class="dropdown-menu bd-search-results" id="search-results"></div>
 </form>

docs/_includes/nav-home.html

-<header class="navbar navbar-light navbar-toggleable-md bd-navbar">
+<header class="navbar navbar-light navbar-expand-md bd-navbar">
   <nav class="container">
     {% comment %}
     <nav class="nav navbar-nav float-right">
@@ -25,7 +25,7 @@
     </nav>
     {% endcomment %}
 
-    <div class="d-flex justify-content-between hidden-lg-up">
+    <div class="d-flex justify-content-between d-lg-none">
       <a class="navbar-brand" href="{{ site.baseurl }}/">
         Bootstrap
       </a>

docs/_plugins/bridge.rb

-require 'yaml'
-
-module Bridge
-  class Generator < Jekyll::Generator
-    def generate(site)
-      path = File.join(site.source, "../grunt/configBridge.json")
-      site.data["configBridge"] = YAML.load_file(path)
-    end
-  end
-end

docs/assets/js/vendor/jekyll-search.min.js

-!function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";function fuzzysearch(needle,haystack){var tlen=haystack.length,qlen=needle.length;if(qlen>tlen)return!1;if(qlen===tlen)return needle===haystack;outer:for(var i=0,j=0;i<qlen;i++){for(var nch=needle.charCodeAt(i);j<tlen;)if(haystack.charCodeAt(j++)===nch)continue outer;return!1}return!0}module.exports=fuzzysearch},{}],2:[function(require,module,exports){"use strict";function load(location,callback){var xhr=getXHR();xhr.open("GET",location,!0),xhr.onreadystatechange=createStateChangeListener(xhr,callback),xhr.send()}function createStateChangeListener(xhr,callback){return function(){if(4===xhr.readyState&&200===xhr.status)try{callback(null,JSON.parse(xhr.responseText))}catch(err){callback(err,null)}}}function getXHR(){return window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP")}module.exports={load:load}},{}],3:[function(require,module,exports){"use strict";module.exports=function OptionsValidator(params){function validateParams(params){return!!params&&(void 0!==params.required&&params.required instanceof Array)}if(!validateParams(params))throw new Error("-- OptionsValidator: required options missing");if(!(this instanceof OptionsValidator))return new OptionsValidator(params);var requiredOptions=params.required;this.getRequiredOptions=function(){return requiredOptions},this.validate=function(parameters){var errors=[];return requiredOptions.forEach(function(requiredOptionName){void 0===parameters[requiredOptionName]&&errors.push(requiredOptionName)}),errors}}},{}],4:[function(require,module,exports){"use strict";function put(data){return isObject(data)?addObject(data):isArray(data)?addArray(data):void 0}function clear(){return data.length=0,data}function get(){return data}function isObject(obj){return!!obj&&"[object Object]"===Object.prototype.toString.call(obj)}function isArray(obj){return!!obj&&"[object Array]"===Object.prototype.toString.call(obj)}function addObject(_data){return data.push(_data),data}function addArray(_data){for(var added=[],i=0;i<_data.length;i++)isObject(_data[i])&&added.push(addObject(_data[i]));return added}function search(crit){return crit?findMatches(data,crit,opt.searchStrategy,opt):[]}function setOptions(_opt){opt=_opt||{},opt.fuzzy=_opt.fuzzy||!1,opt.limit=_opt.limit||10,opt.searchStrategy=_opt.fuzzy?FuzzySearchStrategy:LiteralSearchStrategy}function findMatches(data,crit,strategy,opt){for(var matches=[],i=0;i<data.length&&matches.length<opt.limit;i++){var match=findMatchesInObject(data[i],crit,strategy,opt);match&&matches.push(match)}return matches}function findMatchesInObject(obj,crit,strategy,opt){for(var key in obj)if(!isExcluded(obj[key],opt.exclude)&&strategy.matches(obj[key],crit))return obj}function isExcluded(term,excludedTerms){var excluded=!1;excludedTerms=excludedTerms||[];for(var i=0;i<excludedTerms.length;i++){var excludedTerm=excludedTerms[i];!excluded&&new RegExp(term).test(excludedTerm)&&(excluded=!0)}return excluded}module.exports={put:put,clear:clear,get:get,search:search,setOptions:setOptions};var FuzzySearchStrategy=require("./SearchStrategies/FuzzySearchStrategy"),LiteralSearchStrategy=require("./SearchStrategies/LiteralSearchStrategy"),data=[],opt={};opt.fuzzy=!1,opt.limit=10,opt.searchStrategy=opt.fuzzy?FuzzySearchStrategy:LiteralSearchStrategy},{"./SearchStrategies/FuzzySearchStrategy":5,"./SearchStrategies/LiteralSearchStrategy":6}],5:[function(require,module,exports){"use strict";function FuzzySearchStrategy(){this.matches=function(string,crit){return fuzzysearch(crit,string)}}var fuzzysearch=require("fuzzysearch");module.exports=new FuzzySearchStrategy},{fuzzysearch:1}],6:[function(require,module,exports){"use strict";function LiteralSearchStrategy(){this.matches=function(string,crit){return"string"==typeof string&&(string=string.trim(),string.toLowerCase().indexOf(crit.toLowerCase())>=0)}}module.exports=new LiteralSearchStrategy},{}],7:[function(require,module,exports){"use strict";function setOptions(_options){options.pattern=_options.pattern||options.pattern,options.template=_options.template||options.template,"function"==typeof _options.middleware&&(options.middleware=_options.middleware)}function compile(data){return options.template.replace(options.pattern,function(match,prop){var value=options.middleware(prop,data[prop],options.template);return void 0!==value?value:data[prop]||match})}module.exports={compile:compile,setOptions:setOptions};var options={};options.pattern=/\{(.*?)\}/g,options.template="",options.middleware=function(){}},{}],8:[function(require,module,exports){!function(window,document,undefined){"use strict";function initWithJSON(json){repository.put(json),registerInput()}function initWithURL(url){jsonLoader.load(url,function(err,json){err&&throwError("failed to get JSON ("+url+")"),initWithJSON(json)})}function emptyResultsContainer(){options.resultsContainer.innerHTML=""}function appendToResultsContainer(text){options.resultsContainer.innerHTML+=text}function registerInput(){options.searchInput.addEventListener("keyup",function(e){emptyResultsContainer();var key=e.which,query=e.target.value;isWhitelistedKey(key)&&isValidQuery(query)&&render(repository.search(query))})}function render(results){if(0===results.length)return appendToResultsContainer(options.noResultsText);for(var i=0;i<results.length;i++)appendToResultsContainer(templater.compile(results[i]))}function isValidQuery(query){return query&&query.length>0}function isWhitelistedKey(key){return[13,16,20,37,38,39,40,91].indexOf(key)===-1}function throwError(message){throw new Error("SimpleJekyllSearch --- "+message)}var options={searchInput:null,resultsContainer:null,json:[],searchResultTemplate:'<li><a href="{url}" title="{desc}">{title}</a></li>',templateMiddleware:function(){},noResultsText:"No results found",limit:10,fuzzy:!1,exclude:[]},requiredOptions=["searchInput","resultsContainer","json"],templater=require("./Templater"),repository=require("./Repository"),jsonLoader=require("./JSONLoader"),optionsValidator=require("./OptionsValidator")({required:requiredOptions}),utils=require("./utils");window.SimpleJekyllSearch=function(_options){var errors=optionsValidator.validate(_options);errors.length>0&&throwError("You must specify the following required options: "+requiredOptions),options=utils.merge(options,_options),templater.setOptions({template:options.searchResultTemplate,middleware:options.templateMiddleware}),repository.setOptions({fuzzy:options.fuzzy,limit:options.limit}),utils.isJSON(options.json)?initWithJSON(options.json):initWithURL(options.json)},window.SimpleJekyllSearch.init=window.SimpleJekyllSearch,"function"==typeof window.SimpleJekyllSearchInit&&window.SimpleJekyllSearchInit.call(this,window.SimpleJekyllSearch)}(window,document)},{"./JSONLoader":2,"./OptionsValidator":3,"./Repository":4,"./Templater":7,"./utils":9}],9:[function(require,module,exports){"use strict";function merge(defaultParams,mergeParams){var mergedOptions={};for(var option in defaultParams)mergedOptions[option]=defaultParams[option],void 0!==mergeParams[option]&&(mergedOptions[option]=mergeParams[option]);return mergedOptions}function isJSON(json){try{return!!(json instanceof Object&&JSON.parse(JSON.stringify(json)))}catch(e){return!1}}module.exports={merge:merge,isJSON:isJSON}},{}]},{},[8]);
+!function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";function fuzzysearch(needle,haystack){var tlen=haystack.length,qlen=needle.length;if(qlen>tlen)return!1;if(qlen===tlen)return needle===haystack;outer:for(var i=0,j=0;i<qlen;i++){for(var nch=needle.charCodeAt(i);j<tlen;)if(haystack.charCodeAt(j++)===nch)continue outer;return!1}return!0}module.exports=fuzzysearch},{}],2:[function(require,module,exports){"use strict";function load(location,callback){var xhr=getXHR();xhr.open("GET",location,!0),xhr.onreadystatechange=createStateChangeListener(xhr,callback),xhr.send()}function createStateChangeListener(xhr,callback){return function(){if(4===xhr.readyState&&200===xhr.status)try{callback(null,JSON.parse(xhr.responseText))}catch(err){callback(err,null)}}}function getXHR(){return window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP")}module.exports={load:load}},{}],3:[function(require,module,exports){"use strict";module.exports=function OptionsValidator(params){function validateParams(params){return!!params&&(void 0!==params.required&&params.required instanceof Array)}if(!validateParams(params))throw new Error("-- OptionsValidator: required options missing");if(!(this instanceof OptionsValidator))return new OptionsValidator(params);var requiredOptions=params.required;this.getRequiredOptions=function(){return requiredOptions},this.validate=function(parameters){var errors=[];return requiredOptions.forEach(function(requiredOptionName){void 0===parameters[requiredOptionName]&&errors.push(requiredOptionName)}),errors}}},{}],4:[function(require,module,exports){"use strict";function put(data){return isObject(data)?addObject(data):isArray(data)?addArray(data):void 0}function clear(){return data.length=0,data}function get(){return data}function isObject(obj){return!!obj&&"[object Object]"===Object.prototype.toString.call(obj)}function isArray(obj){return!!obj&&"[object Array]"===Object.prototype.toString.call(obj)}function addObject(_data){return data.push(_data),data}function addArray(_data){for(var added=[],i=0;i<_data.length;i++)isObject(_data[i])&&added.push(addObject(_data[i]));return added}function search(crit){return crit?findMatches(data,crit,opt.searchStrategy,opt):[]}function setOptions(_opt){opt=_opt||{},opt.fuzzy=_opt.fuzzy||!1,opt.limit=_opt.limit||10,opt.searchStrategy=_opt.fuzzy?FuzzySearchStrategy:LiteralSearchStrategy}function findMatches(data,crit,strategy,opt){for(var matches=[],i=0;i<data.length&&matches.length<opt.limit;i++){var match=findMatchesInObject(data[i],crit,strategy,opt);match&&matches.push(match)}return matches}function findMatchesInObject(obj,crit,strategy,opt){for(var key in obj)if(!isExcluded(obj[key],opt.exclude)&&strategy.matches(obj[key],crit))return obj}function isExcluded(term,excludedTerms){var excluded=!1;excludedTerms=excludedTerms||[];for(var i=0;i<excludedTerms.length;i++){var excludedTerm=excludedTerms[i];!excluded&&new RegExp(term).test(excludedTerm)&&(excluded=!0)}return excluded}module.exports={put:put,clear:clear,get:get,search:search,setOptions:setOptions};var FuzzySearchStrategy=require("./SearchStrategies/FuzzySearchStrategy"),LiteralSearchStrategy=require("./SearchStrategies/LiteralSearchStrategy"),data=[],opt={};opt.fuzzy=!1,opt.limit=10,opt.searchStrategy=opt.fuzzy?FuzzySearchStrategy:LiteralSearchStrategy},{"./SearchStrategies/FuzzySearchStrategy":5,"./SearchStrategies/LiteralSearchStrategy":6}],5:[function(require,module,exports){"use strict";function FuzzySearchStrategy(){this.matches=function(string,crit){return fuzzysearch(crit,string)}}var fuzzysearch=require("fuzzysearch");module.exports=new FuzzySearchStrategy},{fuzzysearch:1}],6:[function(require,module,exports){"use strict";function LiteralSearchStrategy(){this.matches=function(string,crit){return"string"==typeof string&&(string=string.trim(),string.toLowerCase().indexOf(crit.toLowerCase())>=0)}}module.exports=new LiteralSearchStrategy},{}],7:[function(require,module,exports){"use strict";function setOptions(_options){options.pattern=_options.pattern||options.pattern,options.template=_options.template||options.template,"function"==typeof _options.middleware&&(options.middleware=_options.middleware)}function compile(data){return options.template.replace(options.pattern,function(match,prop){var value=options.middleware(prop,data[prop],options.template);return void 0!==value?value:data[prop]||match})}module.exports={compile:compile,setOptions:setOptions};var options={};options.pattern=/\{(.*?)\}/g,options.template="",options.middleware=function(){}},{}],8:[function(require,module,exports){!function(window,document,undefined){"use strict";function initWithJSON(json){repository.put(json),registerInput()}function initWithURL(url){jsonLoader.load(url,function(err,json){err&&throwError("failed to get JSON ("+url+")"),initWithJSON(json)})}function emptyResultsContainer(){options.resultsContainer.innerHTML=""}function appendToResultsContainer(text){options.resultsContainer.innerHTML+=text}function registerInput(){options.searchInput.addEventListener("keyup",function(e){var key=e.which;if(isWhitelistedKey(key)){emptyResultsContainer();var query=e.target.value;isValidQuery(query)&&render(repository.search(query))}})}function render(results){if(0===results.length)return appendToResultsContainer(options.noResultsText);for(var i=0;i<results.length;i++)appendToResultsContainer(templater.compile(results[i]))}function isValidQuery(query){return query&&query.length>0}function isWhitelistedKey(key){return[13,16,20,37,38,39,40,91].indexOf(key)===-1}function throwError(message){throw new Error("SimpleJekyllSearch --- "+message)}var options={searchInput:null,resultsContainer:null,json:[],searchResultTemplate:'<li><a href="{url}" title="{desc}">{title}</a></li>',templateMiddleware:function(){},noResultsText:"No results found",limit:10,fuzzy:!1,exclude:[]},requiredOptions=["searchInput","resultsContainer","json"],templater=require("./Templater"),repository=require("./Repository"),jsonLoader=require("./JSONLoader"),optionsValidator=require("./OptionsValidator")({required:requiredOptions}),utils=require("./utils");window.SimpleJekyllSearch=function(_options){var errors=optionsValidator.validate(_options);errors.length>0&&throwError("You must specify the following required options: "+requiredOptions),options=utils.merge(options,_options),templater.setOptions({template:options.searchResultTemplate,middleware:options.templateMiddleware}),repository.setOptions({fuzzy:options.fuzzy,limit:options.limit}),utils.isJSON(options.json)?initWithJSON(options.json):initWithURL(options.json)},window.SimpleJekyllSearch.init=window.SimpleJekyllSearch,"function"==typeof window.SimpleJekyllSearchInit&&window.SimpleJekyllSearchInit.call(this,window.SimpleJekyllSearch)}(window,document)},{"./JSONLoader":2,"./OptionsValidator":3,"./Repository":4,"./Templater":7,"./utils":9}],9:[function(require,module,exports){"use strict";function merge(defaultParams,mergeParams){var mergedOptions={};for(var option in defaultParams)mergedOptions[option]=defaultParams[option],void 0!==mergeParams[option]&&(mergedOptions[option]=mergeParams[option]);return mergedOptions}function isJSON(json){try{return!!(json instanceof Object&&JSON.parse(JSON.stringify(json)))}catch(e){return!1}}module.exports={merge:merge,isJSON:isJSON}},{}]},{},[8]);
\ No newline at end of file

docs/assets/scss/_component-examples.scss

@@ -37,6 +37,40 @@
   border: 1px solid rgba($bd-purple, .15);
 }
 
+// Grid mixins
+.example-container {
+  width: 800px;
+  @include make-container();
+}
+
+.example-row {
+  @include make-row();
+}
+
+.example-content-main {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(8);
+  }
+}
+
+.example-content-secondary {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(4);
+  }
+}
+
 
 //
 // Container illustrations
@@ -298,6 +332,12 @@
   overflow: auto;
 }
 
+.scrollspy-example-2 {
+  position: relative;
+  height: 350px;
+  overflow: auto;
+}
+
 // Helpers
 .bd-example > {
   .bg-primary,

docs/assets/scss/_content.scss

@@ -6,11 +6,15 @@
 
 .bd-content {
   > table {
-    display: block;
     width: 100%;
     max-width: 100%;
-    margin-bottom: $spacer;
-    overflow-y: auto;
+    margin-bottom: 1rem;
+
+    @include media-breakpoint-down(md) {
+      display: block;
+      overflow-x: auto;
+      -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+    }
 
     // Cells
     > thead,

docs/assets/scss/_responsive-tests.scss

@@ -10,86 +10,8 @@
 }
 
 // Utility classes table
-.bd-table th small,
-.responsive-utilities th small {
+.bd-table th small {
   display: block;
   font-weight: normal;
   color: #999;
 }
-.responsive-utilities tbody th {
-  font-weight: normal;
-}
-.responsive-utilities td {
-  text-align: center;
-}
-.responsive-utilities .is-visible {
-  color: #468847;
-  background-color: #dff0d8 !important;
-}
-.responsive-utilities .is-hidden {
-  color: #ccc;
-  background-color: #f9f9f9 !important;
-}
-
-// Responsive tests
-.responsive-utilities-test {
-  margin-top: .25rem;
-}
-.responsive-utilities-test .col-6 {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
-}
-.responsive-utilities-test span {
-  display: block;
-  padding: 1rem .5rem;
-  font-size: 1rem;
-  font-weight: bold;
-  line-height: 1.1;
-  text-align: center;
-  border-radius: .25rem;
-}
-.visible-on,
-.hidden-on {
-  .col-6 {
-    > .not-visible {
-      color: #999;
-      border: 1px solid #ddd;
-    }
-  }
-}
-.visible-on,
-.hidden-on {
-  .col-6 {
-    .visible {
-      color: #468847;
-      background-color: #dff0d8;
-      border: 1px solid #d6e9c6;
-    }
-  }
-}
-
-@include media-breakpoint-only(xs) {
-  .hidden-xs-only {
-    display: none !important;
-  }
-}
-@include media-breakpoint-only(sm) {
-  .hidden-sm-only {
-    display: none !important;
-  }
-}
-@include media-breakpoint-only(md) {
-  .hidden-md-only {
-    display: none !important;
-  }
-}
-@include media-breakpoint-only(lg) {
-  .hidden-lg-only {
-    display: none !important;
-  }
-}
-@include media-breakpoint-only(xl) {
-  .hidden-xl-only {
-    display: none !important;
-  }
-}

docs/components/buttons.md

@@ -151,13 +151,13 @@ Note that pre-checked buttons require you to manually add the `.active` class to
 
 {% example html %}
 <div class="btn-group" data-toggle="buttons">
-  <label class="btn btn-primary active">
+  <label class="btn btn-secondary active">
     <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
   </label>
-  <label class="btn btn-primary">
+  <label class="btn btn-secondary">
     <input type="checkbox" autocomplete="off"> Checkbox 2
   </label>
-  <label class="btn btn-primary">
+  <label class="btn btn-secondary">
     <input type="checkbox" autocomplete="off"> Checkbox 3
   </label>
 </div>
@@ -165,13 +165,13 @@ Note that pre-checked buttons require you to manually add the `.active` class to
 
 {% example html %}
 <div class="btn-group" data-toggle="buttons">
-  <label class="btn btn-primary active">
+  <label class="btn btn-secondary active">
     <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
   </label>
-  <label class="btn btn-primary">
+  <label class="btn btn-secondary">
     <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
   </label>
-  <label class="btn btn-primary">
+  <label class="btn btn-secondary">
     <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
   </label>
 </div>