Hiding elements in responsive layout?
HtmlCssTwitter BootstrapResponsive DesignHtml Problem Overview
Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page?
For example, I have a
along with nav-pills floated right. On a small screen this causes issues. I'd love to at least put it into a similar click-to-show-more dropdown.
Is this possible within existing Bootstrap framework?
Html Solutions
Solution 1 - Html
New visible classes added to Bootstrap
Extra small devices
Phones (<768px) (Class names : .visible-xs-block, hidden-xs)
Small devices
Tablets (≥768px) (Class names : .visible-sm-block, hidden-sm)
Medium devices
Desktops (≥992px) (Class names : .visible-md-block, hidden-md)
Large devices
Desktops (≥1200px) (Class names : .visible-lg-block, hidden-lg)
http://getbootstrap.com/css/#responsive-utilities
For more information :Below is deprecated as of v3.2.0
Extra small devices
Phones (<768px) (Class names : .visible-xs, hidden-xs)
Small devices
Tablets (≥768px) (Class names : .visible-sm, hidden-sm)
Medium devices
Desktops (≥992px) (Class names : .visible-md, hidden-md)
Large devices
Desktops (≥1200px) (Class names : .visible-lg, hidden-lg)
Much older Bootstrap
.hidden-phone, .hidden-tablet
etc. are unsupported/obsolete.
UPDATE:
In Bootstrap 4 there are 2 types of classes:
- The
hidden-*-up
which hide the element when the viewport is at the given breakpoint or wider. hidden-*-down
which hide the element when the viewport is at the given breakpoint or smaller.
Also, the new xl
viewport is added for devices that are more then 1200px width. For more information click here.
Solution 2 - Html
Bootstrap 4 Beta Answer:
> d-block d-md-none
to hide on medium, large and extra large devices.
> d-none d-md-block
to hide on small and extra-small devices.
>
>
Note that you can also inline by replacing d-*-block
with d-*-inline-block
Old answer: Bootstrap 4 Alpha
-
You can use the classes
.hidden-*-up
to hide on a given size and larger devices >.hidden-md-up
to hide on medium, large and extra large devices. -
The same goes with
.hidden-*-down
to hide on a given size and smaller devices >.hidden-md-down
to hide on medium, small and extra-small devices -
visible-* is no longer an option with bootstrap 4
-
To display only on medium devices, you can combine the two: >
hidden-sm-down
andhidden-xl-up
The valid sizes are:
xs
for phones in portrait mode (<34em)sm
for phones in landscape mode (≥34em)md
for tablets (≥48em)lg
for desktops (≥62em)xl
for desktops (≥75em)
This was as of Bootstrap 4, alpha 5 (January 2017). More details here: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
On Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/
Solution 3 - Html
Bootstrap 4.x answer
hidden-*
classes are removed from Bootstrap 4 beta onward.
If you want to show on medium and up use the d-*
classes, e.g.:
<div class="d-none d-md-block">This will show in medium and up</div>
If you want to show only in small and below use this:
<div class="d-block d-md-none"> This will show only in below medium form factors</div>
Screen size and class chart
| Screen Size | Class |
|--------------------|--------------------------------|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-block |
| Hidden only on sm | .d-sm-none .d-md-block |
| Hidden only on md | .d-md-none .d-lg-block |
| Hidden only on lg | .d-lg-none .d-xl-block |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-block |
| Visible only on xs | .d-block .d-sm-none |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block |
> Rather than using explicit .visible-*
classes, you make an element
> visible by simply not hiding it at that screen size. You can combine
> one .d-*-none
class with one .d-*-block
class to show an element only
> on a given interval of screen sizes (e.g. .d-none.d-md-block.d-xl-none
> shows the element only on medium and large devices).
Solution 4 - Html
You can enter these module class suffixes for any module to better control where it will show or be hidden.
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
http://twitter.github.com/bootstrap/scaffolding.html scroll to bottom
Solution 5 - Html
I have a couple of clarifications to add here:
- The list shown (visible-phone, visible-tablet, etc.) is deprecated in Bootstrap 3. The new values are:
- visible-xs-*
- visible-sm-*
- visible-md-*
- visible-lg-*
- hidden-xs-*
- hidden-sm-*
- hidden-md-*
- hidden-lg-*
The asterisk translates to the following for each (I show only visible-xs-* below):
- visible-xs-block
- visible-xs-inline
- visible-xs-inline-block
- When you use these classes, you don't add a period in front (as confusingly shown in part of the answer above).
For example:
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>
3) You can use visible-* and hidden-* (for example, visible-xs and hidden-xs) but these have been deprecated in Bootstrap 3.2.0.
For more details and the latest specs, go here and search for "visible": http://getbootstrap.com/css/
Solution 6 - Html
For Bootstrap 4.0 beta (and I assume this will stay for final) there is a change - be aware that the hidden classes were removed.
See the docs: https://getbootstrap.com/docs/4.0/utilities/display/
In order to hide the content on mobile and display on the bigger devices you have to use the following classes:
d-none d-sm-block
The first class set display none all across devices and the second one display it for devices "sm" up (you could use md, lg, etc. instead of sm if you want to show on different devices.
I suggest to read about that before migration:
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
Solution 7 - Html
All hidden-*-up
, hidden-*
classes doesn't work for me, so I'm adding self-made hidden
class before visible-*
(which works for current bootstrap version). It is very useful if you need to show div only for one screen, and hide for all others.
CSS:
.hidden {display:none;}
HTML:
<div class="col-xs-12 hidden visible-xs visible-sm">
<img src="photo.png" style="width:100%">
</div>
Solution 8 - Html
Additional CSS Remove Sidebar from all pages in Mobile view:
@media only screen and (max-width:767px)
{
#secondary {
display: none;
}
}
Solution 9 - Html
In boostrap 4.1 (run snippet because I copied whole table code from Bootstrap documentation):
.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}
<table class="fixed_headers">
<thead>
<tr>
<th>Screen Size</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td><code class="highlighter-rouge">.d-none</code></td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
</tr>
<tr>
<td>Hidden only on md</td>
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td><code class="highlighter-rouge">.d-xl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code class="highlighter-rouge">.d-block</code></td>
</tr>
<tr>
<td>Visible only on xs</td>
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
</tr>
<tr>
<td>Visible only on sm</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
</tr>
<tr>
<td>Visible only on md</td>
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
</tr>
<tr>
<td>Visible only on lg</td>
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
</tr>
</tbody>
</table>
https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements