I'm struggling to understand how to implement the new classes that show and hide content relevant to screen size in Bootstrap 4
This doesn't seem to be working...
<div class="d-sm-block">
ITEMS FOR SMALL/MOBILE DEVICES
</div>
<div class="d-md-block">
ITEMS FOR MEDIUM/LARGE DEVICES
</div>
There's no d-sm-block or d-md-block. You need to use the following classes:
See Responsive Utilities for the complete documentation.
Your code should be:
<div class="hidden-md-up">
ITEMS FOR SMALL/MOBILE DEVICES
</div>
<div class="hidden-md-down">
ITEMS FOR MEDIUM/LARGE DEVICES
</div>
Related
I'd like to set two different responsive layouts (with w3.css):
For mobile (small) and medium device
For large device
I don't want to repeat my code just to specify a different responsive layout.
My code is like:
<div class="w3-content">
<div class="w3-row-padding">
<div class="w3-third">
[...]
</div>
<div class="w3-twothird">
[...]
</div>
</div>
</div>
I'd like to show w3-third over w3-twothird on small and medium devices.
Thanks
I'm trying to make my content page that normally is split into two col-xs-6 columns to vertically stack on top of each other for smaller screens/mobile. When I try minimize the screen, the columns just mash together instead of stacking. I feel like I'm missing something important because I thought bootstrap columns were automatically responsive like the ones on this site:
https://getbootstrap.com/examples/grid/
my html code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 aboutbg">About Us
</div>
</div>
<div class="row">
<div class="col-xs-6 aboutrow text">
<h2>Home Roots</h2>
<p> Founded right here in Ontario</p>
</div>
<div class="col-xs-6 aboutrow pic">
<h3>insert pic</h3>
</div>
<div class="col-xs-6 aboutrow pic">
<h2>insert pic</h2>
</div>
<div class="col-xs-6 aboutrow text">
<h2>Our Values</h2>
<p>Good food makes good people</p>
</div>
<div class="col-xs-6 aboutrow text">
<h2>Our Promise to You</h2>
<p>The freshest and the bestest of foods</p>
</div>
<div class="col-xs-6 aboutrow pic">
<h3> Insert pic</h3>
</div>
</div>
I've tried littering the page with div rows, but that doesn't change the layout too. I've got the standard bootstrap cdn and jquery in the base template too. What is it I'm missing to make the columns stack vertically?
make Separate columns stack nicely
I have used javascript libraries like : https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows, to make all columns (on the same row) have equal height. This way bootstrap can handle it nicely and stack them nicely.
make columns stack only on mobile or small
Or what you mean is: you want them to stack in mobile, but in desktop to be two separate columns?
what xs-col-6 means is: for xs devices (or bigger) split up in 2 columns (12 /6 = 2)
use: xs-col-12 sm-col-6
explanation
this means for xs or bigger devices use 1 column, for sm devices or bigger use 2 columns.
remember bootstrap defined these steps (xs, sm, md, lg). they are bound too a certain pixel width. so, no guaranty it will actually show mobile layout when you use mobile phone (phones are mostly xs, sm).
alternatives
you can hide blocks all together for certain screen-widths by using classes like .hidden-lg
reference: http://getbootstrap.com/css/#responsive-utilities
easy tooling
here use: http://shoelace.io/ to make your grid respond the way you want. It generates html code for you. simply copy paste the classes in your divs and you have the responsiveness you want.
<div class="mobile"></div>
<div class="desktop"></div>
I want to show these div items separately in mobile and desktop devices using bootstrap. I want something like:
<div class="mobile show-on-mobile">This item is not shown in desktop devices.</div>
<div class="desktop show-on-desktop">This item is not shown in mobile devices.</div>
You can do it like below:
<div class="mobile visible-xs visible-sm">This item is not shown in desktop devices.</div>
<div class="desktop hidden-xs hidden-sm">This item is not shown in mobile devices.</div>
Check this url for more info.
http://getbootstrap.com/css/
In Foundation Zurb 5, is there any ready grid classes for Tablet Portrait? I noticed that there are only three classes (small, medium, large). What if I want to have separate layout in Medium (tablet) portrait without writing specific media queries in my css file? I want something like (it makes very easy to my programmer):
.medium-portrait-12
.medium-portrait-11
.medium-portrait-10
.medium-portrait-9
.medium-portrait-8 etc.
I would appreciate if I can generate these classes using foundation setting files (SASS).
thanks,
You can add show-for-medium class on the element and it will be visibled only for medium screen
Here the doc
<div class="row">
<div class="medium-2 large-4 columns">
<p class="show-for-medium show-for-portrait medium-portrait-8">
<!-- Template for medium-portrait-8 -->
</p>
<p class="show-for-medium show-for-portrait medium-portrait-11 ">
<!-- Template for medium-portrait-11 -->
</p>
...
</div>
<div class="medium-4 large-4 columns">...</div>
<div class="medium-6 large-4 columns">...</div>
</div>
You can add show-for-portrait to display your block only for portrait display
Then you add your custom class (ex medium-portrait-11) and write your style in CSS
There is no way to accomplish this easily. If you want to take the time to create your own custom grid, just duplicate the foundation/components/_grid.scss and mod to your liking. However, you will need to create a custom media query for that range.
Portrait Tablet (Medium) view is always tricky. Consider how many people visit your site to base if you want to make this adjustment before investing the time and complicating your layouts.
A simple way to make the same adjustments that I have used in the past is to use visibility classes. The upside is that it is fast to protoype, the down side is that it leads to duplicated content.
<div class="show-for-portrait">
</div>
<div class="show-for-landscape">
</div>
I'm not sure if you have sorted this out but I had a quick look at the SASS files and found a couple of useful mixins. Is this what you mean?
#media #{$screen} and (orientation: portrait) and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)}) {
#include grid-html-classes($size:medium-portrait);
#include block-grid-html-classes($size:medium-portrait,$include-spacing:false);
}
So to use it in your HTML:
<div class="row">
<div class="columns small-6 medium-portrait-4 medium-3"></div>
</div>
(and for block grid)
<ul class="small-block-grid-2 medium-portrait-block-grid-3 medium-block-grid-3">
<li></li>
<li></li>
</ul>
I've only just started experimenting with these classes so there may be some issues across different devices.
I am using Bootstrap v 3.0.3. Bootstrap's offsets aren't working for me.
Here is a relevant example :
<div class="col-sm-8 col-sm-offset-2-popup col-md-4 col-md-offset-4-popup">
....
</div>
In small devices, col-md-offset-4-popup gets applied instead of col-sm-offset-2.
Anybody knows why this is happening?
What is a '-popup'?
If you want move columns to the right using .col-md-offset-*classes without '-popup'.
For example <div class="col-md-3 col-md-offset-3"></div>
col-md-offset-x-popup doesn't exist in Bootstrap framework. In fact, there's not a single class containing the popup keyword. If it's a custom class, be sure it won't interfer with Bootstrap base classes.
As Bootstrap is mobile first, here's what you should use :
col-xs-8 col-xs-offset-2 for extra small devices
nothing more for small devices (will keep -xs values)
col-md-4 col-md-offset-4 for medium devices
nothing more for large devices (will keep -md values)
<div class="col-xs-8 col-xs-offset-2 col-md-4 col-md-offset-4">
...
</div>
Bootply
Try adding col-xs-offset-* with other classes in your div tag