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
Related
I've been using bootstrap 4 on my angular 12 project for a while, and today I've upgraded to bootstrap 5.
I know some properties have changed, but I've read that the grid system is identical.
I regularly use "Mix and Match" columns as written in the documentation, for example
<div class="container">
<div class="row">
<div class="col-12 col-sm"></div>
<div class="col-12 col-sm-auto"></div>
<div class="col-12 col-sm"></div>
</div>
</div>
This example it's working very well with Bootstrap v4.* but not on v5.
It is supposed to have only 1 row where the first and third columns try to get all the available space and the second column fits your content.
What I saw on the Chrome DevTools that the col-12 class takes precedence over the col-sm class, even on larger screens.
Any ideas to try to solve this problem?
As I recently answered here, this is a bug that was introduced in 5.0.2 because the order of the column declarations was changed, making col-12 override col-sm on all breakpoints.
Until it's fixed, a workaround in your case would be to simply remove the col-12 (it's not needed since col-12 is the default)...
<div class="container">
<div class="row">
<div class="col-sm">col</div>
<div class="col-sm-auto">col</div>
<div class="col-sm">col</div>
</div>
</div>
https://codeply.com/p/gUgPktyAyA
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.
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 have been using twitter bootstrap for a year, its the one of those things which -"just works" . With release of twitter bootstrap3 its become even better and awesome with its mobile first approach. But i am not able to understand how to use it properly with mobile first approach.
Earlier there was .span* and .offset* class but now there are .col-xs-* .col-md-* .col-sm-* .col-lg-* and .col-xs-offset-* .col-md-offset-* classes respectively. Even now 'it-just-works' using .col-md-* i want to know the right way to use all these classes so as to not just use them but use them correctly to get most out of bootstrap3.
Thanks.
I found these links very helpful:
http://www.helloerik.com/bootstrap-3-grid-introduction
http://bootply.com/bootstrap-3-migration-guide
Currently I'm using Bootstrap 3 for web development, how I'm using the Grid system is,
<div class="container">
<div class="row">
<div class="col-md-9"> <%--this for 9X3 grid--%>
<div class="row">
<div class="col-md-6"> <%--this for 6X6 inner grid--%>
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
I found (a) Bootstrap's own documentation helpful here, but also a (b) lynda.com topic in migrating to Bootstrap 3. Specifically, see "Dealing with grid changes"
(a) http://getbootstrap.com/css/#grid-offsetting
(b) http://www.lynda.com/course20/Bootstrap-tutorials/Bootstrap-3-New-Features-Migration/138156-2.html
Is it possible to prevent certain data from appearing depending on the size of the device?
For example, I'm in the process of removing a table - I'm changing it to a grid made up of <div> tags.
If the user is on a desktop, I'd like to be able to show something like this:
<div class="row show-grid" id="tblheading" naming="tblheading">
<div class="span1">Branch</div>
<div class="span1">Branch Name</div>
<div class="span1">Building</div>
<div class="span1">Building Name</div>
<div class="span1">Room</div>
<div class="span1">Asset Name</div>
</div>
<div class="row show-grid">
<div class="span1">CAN</div>
<div class="span1"></div>
<div class="span1">CAN-Building1</div>
<div class="span1"></div>
<div class="span1">CAN-Building1-Room1</div>
<div class="span1">Value 123</div>
</div>
<div class="row show-grid">
<div class="span1">CAN</div>
<div class="span1"></div>
<div class="span1">CAN-Building2</div>
<div class="span1"></div>
<div class="span1">CAN-Building2-Room1</div>
<div class="span1">Value xyz</div>
</div>
But if they're on a mobile device, I don't want to display the first "row" with the headers. If possible, I'd also like to remove some of the other fields and only show the asset name for mobile devices.
I'm just new to responsive design so I apologize for any remedial questions. If you can point me in the right direction, I'd appreciate it.
Thanks.
If you look here in the Bootstrap docs, it talks about the built-in classes for this.
You could use these classes to show and hide columns or rows based on screen size. If the differences are significant enough, you could create multiple tables and show the appropriate one for each size.
It's just a case of adding a class to the rows/ cells you'd want to hide and then having that class set to display: none in the media queries targeting mobile devices.
I think the twitter bootstrap even has such classes already built in, but can't remember the exact names.