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>
Related
I understand the problem, as described and answered here.
I have quite a complicated layout with a sidebar navigation, a top navigation, a fluid-container and then page-title and page-body structure for each page. So just adding another container did not solve the problem as suggested in that answer.
Once I get into the page-body, all the rows are stretching 'outside' the parent page-body.
Notice I have added padding to the default container-fluid to 'pull' all the content in from each side of the page. Removing them does not fix it.
I've tried every change I can think of except removing the padding from the default row, because I'm pretty sure that is a no-no.
Anyone have any idea how to get those pesky form controls to stay 'inside' the page body?
There is two solution either give an additional class to row and manipulate its layout or don't use row use <div class="col-md-*" /> without parent .row class div as many times u want and use <div class="clearfix"> if you want to break forcefully to next row
EDIT:-
For example
<div class="row">
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
</div>
<div class="row">
<div class="col-md-4">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
</div>
The same can be achieved without .row class
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
<div class="clearfix">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
<div class="col-md-4">div1</div>
I need to eliminate the large gaps between the boxes in the left column, but I can't figure out how to do it. (see image)
I have an html template that is generating the div contents with a for-loop (row of 2 col-xs-6 columns), so I can't set static height values and float things (because the number of lines is always changing).
The code looks similar to this:
<div class="row">
<div class="col-xs-6" py:for="title, content in data">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
{ title }
</div>
</div>
<div class="col-xs-12" py:for="line in content">
{ line }
</div>
</div>
</div>
Does anyone know some css wizardry to help me out?
At this point in time bootstrap doesn't support offset grids in a pinterest-like style.
Although, you can use bootstrap in combination with something like Masonry Grid to get the effect you are looking for:
http://masonry.desandro.com/
Id use match height as it suits your question more. Here is what you do.
Download this and add to your scripts. Then add a class calldd match-height to your div columns which you want to be the same height.
https://github.com/liabru/jquery-match-height/blob/master/dist/jquery.matchHeight-min.js
$(function() {
$('.match-height').matchHeight();
});
If any issues replace $ with jQuery
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!
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>