diff --git a/components.html b/components.html
index 81f0ae8d2..f107a1b09 100644
--- a/components.html
+++ b/components.html
@@ -1562,6 +1562,11 @@ base_url: "../"
{% endhighlight %}
+
+
Always add labels
+
Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the .sr-only class.
+
+
For buttons not residing in a <form>, add this class to vertically center buttons within a navbar.
diff --git a/less/carousel.less b/less/carousel.less
index c66745c0b..59e4fadf7 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -190,7 +190,7 @@
// Scale up controls for tablets and up
-@media screen and (min-width: @screen-sm) {
+@media screen and (min-width: @screen-sm-min) {
// Scale up the controls a smidge
.carousel-control {
diff --git a/less/grid.less b/less/grid.less
index a1ec1b298..39f1049b6 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -114,7 +114,7 @@
// Note that `.col-sm-12` doesn't get floated on purpose--there's no need since
// it's full-width.
-@media (min-width: @screen-sm) {
+@media (min-width: @screen-sm-min) {
.container {
width: @container-sm;
}
@@ -192,7 +192,7 @@
// Note that `.col-md-12` doesn't get floated on purpose--there's no need since
// it's full-width.
-@media (min-width: @screen-md) {
+@media (min-width: @screen-md-min) {
.container {
width: @container-md;
}
diff --git a/less/jumbotron.less b/less/jumbotron.less
index 53289fb2c..3a2365f05 100644
--- a/less/jumbotron.less
+++ b/less/jumbotron.less
@@ -24,7 +24,7 @@
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
}
- @media screen and (min-width: @screen-sm) {
+ @media screen and (min-width: @screen-sm-min) {
padding-top: (@jumbotron-padding * 1.6);
padding-bottom: (@jumbotron-padding * 1.6);
diff --git a/less/modals.less b/less/modals.less
index 0ba896525..4f2cf9468 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -125,7 +125,7 @@
}
// Scale up the modal
-@media screen and (min-width: @screen-sm) {
+@media screen and (min-width: @screen-sm-min) {
.modal-dialog {
width: 600px;
diff --git a/less/type.less b/less/type.less
index 9a6656b63..5ad6a4669 100644
--- a/less/type.less
+++ b/less/type.less
@@ -15,7 +15,7 @@ p {
font-weight: 200;
line-height: 1.4;
- @media (min-width: @screen-sm) {
+ @media (min-width: @screen-sm-min) {
font-size: (@font-size-base * 1.5);
}
}