I'm working on my first css framework project based on Skeleton. So far everything went smoothly but it appears that Ive stuck on one thing. Here is the code:
<div class="sixteen columns">
<div class="clear spacernews"></div>
</div>
<div class="twelve columns">
<div class="four columns newspoint">1</div>
<div class="four columns newspoint">2</div>
<div class="four columns newspoint">3</div>
</div>
<div class="four columns">
<h3>Docs & Support</h3>
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at www.getskeleton.com.. Skeleton is also open-source and has a project on git, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at hi#getskeleton.com.</p>
</div>
THe issue is following - when I have only twelve and four columns it works cool. BUT when I nest those 3x four columns newspoint that grid collapse. Why is that? any ideas?
if you need three columns, you have the wrong class. Try one-third column.
Another thing is that if you add columns into columns you have to add alpha and omega to the first and the last columns.
Just use "column/columns omega" as wrapper class.
<div class="column omega">
<div class="four columns newspoint">1</div>
<div class="four columns newspoint">2</div>
<div class="four columns newspoint">3</div>
</div>
That will be fine.
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
Would this be a valid thing to do? I have done it before and gives expected results, though I don't know if it's valid or if there is a negative to doing this.
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-12">.col-md-12</div>
</div>
Bootstrap handles column gutters with margins, and then a negative margin on the .row. Generally you can place as many columns in a row as you wish, but it's better practice to work to the 12 columns per row rule.
Technically there's nothing 'invalid' about the way you're doing it, but it's much cleaner (IMHO) to separate them into rows:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-12">.col-md-12</div>
</div>
Seems acceptable, albeit not encouraged, as even the Bootstrap documentation notes it:
If more than 12 columns are placed within a single row, each group of
extra columns will, as one unit, wrap onto a new line.
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!
So I'm currently developing my resume website with bootstrap and am having a bit of trouble with getting my rows to mesh and display right.
I know why the problem is occurring (my education module is extending the height of the row too far), but I'm not sure how to fix it.
As of now, I have two rows: the top row is my Skills and Education row, while the bottom is my experience and a blank module.
I've tried nesting rows (maybe I didn't implement it correctly?), as well as messing with fluidity, responsiveness, etc.
Is it something easy that I'm just overthinking?
http://i.imgur.com/U5DIZ1M.jpg
Add this in your CSS code
#education{
float: right;
}
You need to have two columns in a row, and then nest the two sections in the left column.
Fiddle
<div class="row-fluid">
<div class="span8">
<div class="row-fluid">
<!--Skills-->
</div>
<div class="row-fluid">
<!--Experience-->
</div>
</div>
<div class="span4">
<!--Education-->
</div>
</div>
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.