diff --git a/components.html b/components.html
index 81f0ae8d24..f107a1b09f 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 c66745c0b4..59e4fadf7f 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 a1ec1b2981..39f1049b64 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 53289fb2c9..3a2365f05e 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 0ba896525e..4f2cf9468c 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 9a6656b63f..5ad6a4669e 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);
}
}