From 4fe37339653c909368ba772ea9214c0b2a511fee Mon Sep 17 00:00:00 2001 From: Thomas Park Date: Fri, 16 Aug 2013 16:26:07 -0700 Subject: update bootstrap to 3.0.0-rc2 --- bower_components/bootstrap/css.html | 1250 ++++++++++++++++++----------------- 1 file changed, 660 insertions(+), 590 deletions(-) mode change 100644 => 100755 bower_components/bootstrap/css.html (limited to 'bower_components/bootstrap/css.html') diff --git a/bower_components/bootstrap/css.html b/bower_components/bootstrap/css.html old mode 100644 new mode 100755 index f53b63e5..ad48dcb0 --- a/bower_components/bootstrap/css.html +++ b/bower_components/bootstrap/css.html @@ -15,7 +15,7 @@ base_url: "../"

Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.

-

HTML5 doctype required

+

HTML5 doctype

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

{% highlight html %} @@ -29,6 +29,16 @@ base_url: "../"

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.

{% highlight html %} +{% endhighlight %} +

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall we don't recommend this on every site, so use caution!

+{% highlight html %} + +{% endhighlight %} + +

Responsive images

+

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

+{% highlight html %} +Responsive image {% endhighlight %} @@ -39,13 +49,13 @@ base_url: "../"
  • Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base
  • Set the global link color via @link-color and apply link underlines only on :hover
    • -

    These styles can be found within scaffolding.less.

    +

    These styles can be found within scaffolding.less.

    -

    Normalize reset

    +

    Normalize

    For improved cross-browser rendering, we use Normalize, a project by Nicolas Gallagher and Jonathan Neal.

    -

    Centering with container

    -

    Easily center a page's contents by wrapping its contents in a container. Containers set max-width at various media query breakpoints to match our grid system.

    +

    Containers

    +

    Easily center a page's contents by wrapping its contents in a .container. Containers set max-width at various media query breakpoints to match our grid system.

    {% highlight html %}
    ... @@ -63,7 +73,7 @@ base_url: "../"

    With the launch of Bootstrap 3, icons have been moved to a separate repository. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.

    - Visit Glyphicons for Bootstrap or download from GitHub + Visit Glyphicons for Bootstrap or download from GitHub

    @@ -77,6 +87,29 @@ base_url: "../"

    Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

    +

    Media queries

    +

    We use the following media queries to create the key breakpoints in our grid system.

    +{% highlight css %} +/* Extra small devices (phones, up to 480px) */ +/* No media query since this is the default in Bootstrap */ + +/* Small devices (tablets, 768px and up) */ +@media (min-width: @screen-tablet) { ... } + +/* Medium devices (desktops, 992px and up) */ +@media (min-width: @screen-desktop) { ... } + +/* Large devices (large desktops, 1200px and up) */ +@media (min-width: @screen-large-desktop) { ... } +{% endhighlight %} +

    We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

    +{% highlight css %} +@media (max-width: @screen-phone-max) { ... } +@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { ... } +@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { ... } +@media (min-width: @screen-large-desktop) { ... } +{% endhighlight %} +

    Grid options

    See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

    @@ -85,16 +118,20 @@ base_url: "../" - Tiny grid - Phones (<480px) + Extra small devices + Phones (<768px) + + + Small devices + Tablets (≥768px) - Small grid - Tablets (<768px) + Medium devices + Desktops (≥992px) - Medium-large grid - Destkops (>768px) + Large devices + Desktops (≥1200px) @@ -102,209 +139,251 @@ base_url: "../" Grid behavior Horizontal at all times - Collapsed to start, horizontal above breakpoints + Collapsed to start, horizontal above breakpoints + + + Max container width + None (auto) + 720px + 940px + 1140px Class prefix - .col- + .col-xs- .col-sm- + .col-md- .col-lg- # of columns - 12 + 12 + + + Max column width + Auto + 60px + 78px + 95px + + + Gutter width + 30px (15px on each side of a column) Nestable - Yes + Yes Offsets - N/A - Yes + N/A + Yes Column ordering N/A - Yes + Yes

    Example: Stacked-to-horizontal

    -

    Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.

    +

    Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.

    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    -
    8
    -
    4
    +
    8
    +
    4
    -
    4
    -
    4
    -
    4
    +
    4
    +
    4
    +
    4
    -
    6
    -
    6
    +
    6
    +
    6
    {% highlight html %}
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    -
    -
    8
    -
    4
    +
    +
    8
    +
    4
    -
    4
    -
    4
    -
    4
    +
    4
    +
    4
    +
    4
    -
    6
    -
    6
    +
    6
    +
    6
    {% endhighlight %} -

    Example: Combining mobile with desktop

    -

    Don't want your columns to simply stack in smaller devices? Use the small device grid system by adding .col-* classes to the existing .col-lg-* ones. See the example below for a better idea of how it all works.

    +

    Example: Mobile and desktop

    +

    Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

    -
    8
    -
    4
    +
    8
    +
    4
    -
    4
    -
    4
    -
    4
    +
    4
    +
    4
    +
    4
    -
    6
    -
    6
    +
    6
    +
    6
    {% highlight html %} +
    -
    8
    -
    4
    +
    8
    +
    4
    + +
    -
    4
    -
    4
    -
    4
    +
    4
    +
    4
    +
    4
    + +
    -
    6
    -
    6
    +
    6
    +
    6
    {% endhighlight %} -

    Example: Mobile, tablet, and desktop

    +

    Example: Mobile, tablet, desktops

    Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

    -
    .col-12 .col-lg-8
    -
    .col-6 .col-lg-4
    -
    -
    -
    .col-6 .col-lg-4
    -
    .col-6 .col-lg-4
    -
    .col-6 .col-lg-4
    +
    .col-xs-12 .col-sm-6 .col-md-8
    +
    .col-xs-6 .col-sm-6 .col-md-4
    -
    .col-6 .col-lg-6
    -
    .col-6 .col-lg-6
    +
    .col-xs-6 .col-sm-4 .col-md-4
    +
    .col-xs-6 .col-sm-4 .col-md-4
    + +
    +
    .col-xs-6 .col-sm-4 .col-md-4
    {% highlight html %}
    -
    .col-12 .col-lg-8
    -
    .col-6 .col-lg-4
    +
    .col-xs-12 .col-sm-6 .col-md-8
    +
    .col-xs-6 .col-sm-6 .col-md-4
    +
    +
    +
    .col-xs-6 .col-sm-4 .col-md-4
    +
    .col-xs-6 .col-sm-4 .col-md-4
    + +
    +
    .col-xs-6 .col-sm-4 .col-md-4
    +
    +{% endhighlight %} + +

    Responsive column resets

    +

    With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

    +{% highlight html %} +
    +
    .col-xs-6 .col-sm-3
    +
    .col-xs-6 .col-sm-3
    + + +
    + +
    .col-xs-6 .col-sm-3
    +
    .col-xs-6 .col-sm-3
    +{% endhighlight %} +

    In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier.

    +{% highlight html %}
    -
    .col-6 .col-lg-4
    -
    .col-6 .col-lg-4
    -
    .col-6 .col-lg-4
    +
    .col-sm-5 .col-md-6
    +
    .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
    +
    -
    .col-6 .col-lg-6
    -
    .col-6 .col-lg-6
    +
    .col-sm-6 .col-md-5 .col-lg-6
    +
    .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
    {% endhighlight %} -
    -

    Need more examples?

    -

    We dive into more grid layouts in a separate page, free of chrome and documentation to better show you the power of the grid.

    -

    More grid examples

    -

    Offsetting columns

    -

    Move columns to the right using .col-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-offset-4 moves .col-lg-4 over four columns.

    +

    Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

    -
    4
    -
    4 offset 4
    +
    4
    +
    4 offset 4
    -
    3 offset 3
    -
    3 offset 3
    +
    3 offset 3
    +
    3 offset 3
    -
    6 offset 3
    +
    6 offset 3
    {% highlight html %}
    -
    ...
    -
    ...
    +
    ...
    +
    ...
    -
    3 offset 3
    -
    3 offset 3
    +
    3 offset 3
    +
    3 offset 3
    -
    ...
    +
    ...
    {% endhighlight %}

    Nesting columns

    -

    To nest your content with the default grid, add a new .row and set of .col-lg-* columns within an existing .col-lg-* column. Nested rows should include a set of columns that add up to 12.

    +

    To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12.

    -
    +
    Level 1: 9 columns
    -
    +
    Level 2: 6 columns
    -
    +
    Level 2: 6 columns
    @@ -312,13 +391,13 @@ base_url: "../"
    {% highlight html %}
    -
    +
    Level 1: 9 columns
    -
    +
    Level 2: 6 columns
    -
    +
    Level 2: 6 columns
    @@ -327,16 +406,16 @@ base_url: "../" {% endhighlight %}

    Column ordering

    -

    Easily change the order of our built-in grid columns with .col-push-* and .col-pull-* modifier classes.

    +

    Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

    -
    9
    -
    3
    +
    9
    +
    3
    {% highlight html %} -
    -
    9
    -
    3
    +
    +
    9
    +
    3
    {% endhighlight %} @@ -355,34 +434,136 @@ base_url: "../"

    Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

    {% highlight css %} // Creates a wrapper for a series of columns -.make-row() { - // Negative margin the row out to align the content of columns - margin-left: (@grid-gutter-width / -2); - margin-right: (@grid-gutter-width / -2); +.make-row(@gutter: @grid-gutter-width) { // Then clear the floated columns .clearfix(); + + @media (min-width: @screen-small) { + margin-left: (@gutter / -2); + margin-right: (@gutter / -2); + } + + // Negative margin nested rows out to align the content of columns + .row { + margin-left: (@gutter / -2); + margin-right: (@gutter / -2); + } } -// Generate the columns -.make-column(@columns) { +// Generate the extra small columns +.make-xs-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + // Calculate width based on number of columns available @media (min-width: @grid-float-breakpoint) { float: left; - // Calculate width based on number of columns available - width: percentage(@columns / @grid-columns); + width: percentage((@columns / @grid-columns)); } +} + +// Generate the small columns +.make-sm-column(@columns; @gutter: @grid-gutter-width) { + position: relative; // Prevent columns from collapsing when empty min-height: 1px; - // Set inner padding as gutters instead of margin - padding-left: (@grid-gutter-width / 2); - padding-right: (@grid-gutter-width / 2); + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + // Calculate width based on number of columns available + @media (min-width: @screen-small) { + float: left; + width: percentage((@columns / @grid-columns)); + } } -// Generate the column offsets -.make-column-offset(@columns) { - @media (min-width: @grid-float-breakpoint) { +// Generate the small column offsets +.make-sm-column-offset(@columns) { + @media (min-width: @screen-small) { margin-left: percentage((@columns / @grid-columns)); } } +.make-sm-column-push(@columns) { + @media (min-width: @screen-small) { + left: percentage((@columns / @grid-columns)); + } +} +.make-sm-column-pull(@columns) { + @media (min-width: @screen-small) { + right: percentage((@columns / @grid-columns)); + } +} + +// Generate the medium columns +.make-md-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + // Calculate width based on number of columns available + @media (min-width: @screen-medium) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} + +// Generate the large column offsets +.make-md-column-offset(@columns) { + @media (min-width: @screen-medium) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-md-column-push(@columns) { + @media (min-width: @screen-medium) { + left: percentage((@columns / @grid-columns)); + } +} +.make-md-column-pull(@columns) { + @media (min-width: @screen-medium) { + right: percentage((@columns / @grid-columns)); + } +} + +// Generate the large columns +.make-lg-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + // Calculate width based on number of columns available + @media (min-width: @screen-large) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} + +// Generate the large column offsets +.make-lg-column-offset(@columns) { + @media (min-width: @screen-large) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-push(@columns) { + @media (min-width: @screen-large) { + left: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-pull(@columns) { + @media (min-width: @screen-large) { + right: percentage((@columns / @grid-columns)); + } +} {% endhighlight %}

    Example usage

    @@ -392,11 +573,11 @@ base_url: "../" .make-row(); } .content-main { - .make-column(8); + .make-lg-column(8); } .content-secondary { - .make-column(3); - .make-column-offset(1); + .make-lg-column(3); + .make-lg-column-offset(1); } {% endhighlight %} {% highlight html %} @@ -426,27 +607,27 @@ base_url: "../" - + - + - + - + - - + + - + @@ -543,18 +724,18 @@ base_url: "../"

    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

    Nullam id dolor id nibh ultricies vehicula ut id elit.

    -

    Etiam porta sem malesuada magna mollis euismod.

    -

    Donec ullamcorper nulla non metus auctor fringilla.

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

    Maecenas sed diam eget risus varius blandit sit amet non magna.

    +

    Etiam porta sem malesuada magna mollis euismod.

    +

    Donec ullamcorper nulla non metus auctor fringilla.

    {% highlight html %}

    ...

    ...

    -

    ...

    -

    ...

    ...

    ...

    +

    ...

    +

    ...

    {% endhighlight %} @@ -616,7 +797,7 @@ base_url: "../"

    For quoting blocks of content from another source within your document.

    Default blockquote

    -

    Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

    +

    Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    @@ -629,7 +810,7 @@ base_url: "../" {% endhighlight %}

    Blockquote options

    -

    Style and content changes for simple variations on a standard blockquote.

    +

    Style and content changes for simple variations on a standard <blockquote>.

    Naming a source

    Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

    @@ -774,7 +955,7 @@ base_url: "../" {% endhighlight %}

    Horizontal description

    -

    Make terms and descriptions in <dl> line up side-by-side.

    +

    Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.

    Description lists
    @@ -827,7 +1008,7 @@ For example, <section> should be wrapped as inline. 
    <p>Sample text here...</p>
    {% endhighlight %} -

    You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

    +

    You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

    @@ -880,14 +1061,11 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

    Optional classes

    -

    Add any of the following classes to the .table base class.

    - -

    Striped

    +

    Striped rows

    Use .table-striped to add zebra-striping to any table row within the <tbody>.

    Cross-browser compatibility

    -

    Striped tables are styled via the :nth-child CSS selector, which is not available in IE8.

    +

    Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

    Bootstrap heading

    Bootstrap heading

    		 Semibold 38px

    Bootstrap heading

    Bootstrap heading

    		 Semibold 32px

    Bootstrap heading

    Bootstrap heading

    		 Semibold 24px

    Bootstrap heading

    Bootstrap heading

    		 Semibold 18px
    Bootstrap heading
    		Semibold 16px
    Bootstrap heading
    		Semibold 14px
    Bootstrap heading
    Bootstrap heading
    		 Semibold 12px
    @@ -927,7 +1105,8 @@ For example, <section> should be wrapped as inline.
    {% endhighlight %} -

    Bordered

    + +

    Bordered table

    Add .table-bordered for borders on all sides of the table and cells.

    @@ -971,7 +1150,8 @@ For example, <section> should be wrapped as inline.
    {% endhighlight %} -

    Hover rows

    + +

    Hover rows

    Add .table-hover to enable a hover state on table rows within a <tbody>.

    @@ -1011,7 +1191,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

    Condensed

    +

    Condensed table

    Add .table-condensed to make tables more compact by cutting cell padding in half.

    @@ -1052,7 +1232,7 @@ For example, <section> should be wrapped as inline. -

    Contextual table classes

    +

    Contextual classes

    Use contextual classes to color table rows or individual cells.

    @@ -1069,15 +1249,15 @@ For example, <section> should be wrapped as inline. - + - + - +
    - .success + .active Indicates a successful or positive actionApplies the hover color to a particular row or cell
    - .danger + .success Indicates a dangerous or potentially negative actionIndicates a successful or positive action
    @@ -1087,9 +1267,9 @@ For example, <section> should be wrapped as inline.
    - .active + .danger Applies the hover color to a particular row or cellIndicates a dangerous or potentially negative action
    @@ -1105,7 +1285,7 @@ For example, <section> should be wrapped as inline. - + 1 Column content Column content @@ -1117,7 +1297,7 @@ For example, <section> should be wrapped as inline. Column content Column content - + 3 Column content Column content @@ -1141,7 +1321,7 @@ For example, <section> should be wrapped as inline. Column content Column content - + 7 Column content Column content @@ -1151,11 +1331,18 @@ For example, <section> should be wrapped as inline.
    {% highlight html %} - - 1 - Column content - Column content - Column content + +... +... +... +... + + + + ... + ... + ... + ... {% endhighlight %} @@ -1172,70 +1359,71 @@ For example, <section> should be wrapped as inline.

    Basic example

    Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

    -
    -
    - Legend -
    - - -
    -
    - - -
    -
    - - -

    Example block-level help text here.

    -
    -
    - -
    - -
    + +
    + + +
    +
    + + +
    +
    + + +

    Example block-level help text here.

    +
    +
    + +
    +
    {% highlight html %} -
    -
    - Legend -
    - - -
    -
    - - -
    -
    - - -

    Example block-level help text here.

    -
    -
    - -
    - -
    + +
    + + +
    +
    + + +
    +
    + + +

    Example block-level help text here.

    +
    +
    + +
    +
    {% endhighlight %} -

    Optional layouts

    -

    Included with Bootstrap are optional form layouts for common use cases.

    - -

    Inline form

    +

    Inline form

    Add .form-inline for left-aligned and inline-block controls for a compact layout.

    Requires custom widths

    Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

    -
    - - +
    +

    Always add labels

    +

    Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

    +
    + +
    + + +
    +
    + + +
    @@ -2044,10 +2063,10 @@ For example, <section> should be wrapped as inline.

    Close icon

    Use the generic close icon for dismissing content like modals and alerts.

    -

    +

    {% highlight html %} - + {% endhighlight %}

    .pull-left

    @@ -2079,7 +2098,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} {% highlight css %} // Mixin -.clearfix { +.clearfix() { &:before, &:after { content: " "; @@ -2094,6 +2113,12 @@ For example, <section> should be wrapped as inline. .element { .clearfix(); } +{% endhighlight %} + +

    .sr-only

    +

    Hide an element to all users except screen readers. Necessary for following accessibility best practices.

    +{% highlight html %} +Skip to content {% endhighlight %}
    @@ -2110,15 +2135,36 @@ For example, <section> should be wrapped as inline. - - - - + + + + + + + + + + + + + @@ -2126,6 +2172,7 @@ For example, <section> should be wrapped as inline. + @@ -2133,10 +2180,21 @@ For example, <section> should be wrapped as inline. + + + + + + + + + + + @@ -2144,6 +2202,7 @@ For example, <section> should be wrapped as inline. + @@ -2151,6 +2210,7 @@ For example, <section> should be wrapped as inline. + @@ -2189,35 +2249,45 @@ For example, <section> should be wrapped as inline.

    Resize your browser or load on different devices to test the responsive utility classes.

    Visible on...

    Green checkmarks indicate the element is visible in your current viewport.

    -
      -
    • +
      +
      + + ✔ Visible on x-small +
      +
      ✔ Visible on small -
      • -
    • + +
      +
      Medium ✔ Visible on medium -
      • -
    • + +
      ✔ Visible on large -
      • -
    + +

    Hidden on...

    Here, green checkmarks indicate the element is hidden in your current viewport.

    -
      -
    • +
      +
      + Extra small + +
      +
      Small -
      • -
    • + +
      +
      Medium ✔ Hidden on medium -
      • -
    • + +
      Large - -
      • -
    + + + -- cgit v1.2.3
    ClassSmall devices Up to 768pxMedium devices 768px to 979pxLarge devices 980px and up + Extra small devices + Phones (<768px) + + Small devices + Tablets (≥768px) + + Medium devices + Desktops (≥992px) + + Large devices + Desktops (≥1200px) +
    .visible-xsVisible
    .visible-sm Visible
    .visible-md Visible
    .visible-lg Visible
    .hidden-xsVisibleVisible Visible
    .hidden-smVisible Visible Visible
    .hidden-md VisibleVisible Visible
    .hidden-lg Visible VisibleVisible