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.
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 using Blazor, and it doesn't look like CSS Push/Pull is working
If I take the stock Microsoft Sample app, and replace the table in FetchData.razor with:
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4 col-sm-push-8" style="background-color:lavender;">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4" style="background-color:lavenderblush;">.col-sm-8 .col-sm-pull-4</div>
</div>
The lavender block is still on the left (aka not pushed)
(sample code from TryIt Tutorial on Push/Pull)
Any ideas?
The bootstrap version in the blazor default website is different from the w3schools link you have shared. The version in default blazer website is 4.3.1 and the one on w3schools is 3.4.1
As far as I can find, there is no .col-sm-push-8 helper class in bootstrap 4. Instead you can use the class order-* as below:
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4 order-4" style="background-color:lavender;">.col-sm-4 .order-4</div>
<div class="col" style="background-color:lavenderblush;">.col</div>
</div>
</div>
Output will be like this:
Here are more details
The above was really close, I just changed to order-sm-xxx
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.
I am new at foundation zurb. So, I have a rails app with foundation-rails gem installed. And I am testing out some sample codes from the foundation doc.
Here's what I got:
<div class="row">
<div class="small-2 large-4 columns test1">small2 large4</div>
<div class="small-4 large-4 columns test1">small4 large4</div>
<div class="small-6 large-4 columns test1">small6 large4</div>
</div>
<div class="row">
<div class="large-3 columns test1">large-3 columns</div>
<div class="large-6 columns test1">large-6 columns</div>
<div class="large-3 columns test1">large-3 columns</div>
</div>
Like in the documentation, I would expect the inner divs line up in a row (12 columns in total), but for some reason I am getting something like this, the inner divs are stacked up on top of each other. I added custom css .test1 to give it an outline so that it's easier to see where the borders are. I have tried tweaking classes around, resizing browser and all, but the columns always stack up as 3 rows instead of one row. This screenshot is taken with browser view maximized.
Any insight?
UPDATE (SOLVED):
So, it was indeed my ActieAdmin that's conflicting with Foundation. After looking around, this other thread on stackoverflow gave me the solution.
Rails Active Admin css conflicting with Twitter Bootstrap css
Essentially just move ActiveAdmin css file (app/assets/stylesheets/active_admin.css.scss) to (vendor/assets/stylesheets/active_admin.css.scss)
That fixed it!
I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.
Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?
Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.
From Bootstrap homepage
"The default Bootstrap grid system utilizes 12 columns"
So the total of your spans must add to 12 per row. ie.
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
<div class="row">
<div class="span7">...</div>
<div class="span3 offset2">...</div>
</div>