I want both my main content area and the first element of my navbar to start offset from the left by 2rem. However, this is causing me a lot of headache with child columns.
I can't figure out how to add a global offset of 2rem, without also having to change all calculations of child columns to account for the change. Example:
<div class="row">
<!-- outer content div to offset all content elements -->
<div class"col-lg-offset-2">
<div class="row">
<!-- shouldn't this refer to the inner row? -->
<div class="col-lg-6>
This is 6
</div>
<div class="col-lg-6>
And 6 more...and content is getting cut-off from the right
</div>
</div>
</div>
</div>
What I was hoping to get, is to continue using all child divs width settings the same and to have their size compared relative to their new parent width, which is 2rem less (or to the left).
As far as I know, you should set the size when setting offset. So if you offset your .col-lg-* with x, then you should also reduce the size of it with x.
See my example:
<div class="row">
<div id="main" class="col-xs-offset-2 col-xs-10">
<div class="row">
<div class="col-xs-6">
This is 6
</div>
<div class="col-xs-6">
And 6 more...and content is not gettin cut-off from the right
</div>
</div>
</div>
</div>
So what I did, was to offset the div #main, but I also made the size smaller to compensate for the offset. Say the offset is by 2 cols, so the size was also made less by 2 cols. So instead of col-xs-12 taking the entire with, col-xs-10 no takes the entire width because it has an offset of 2 cols.
Like #jae.phoenix already said columns within a row should always add up to 12. So when you offset the column by 2 the other column should take the other 10 unless you want to center it then you should keep in mind "2" offset should be taken from the other side that would leave 8. Offset also stays with the column meaning if it is applied in the xs size it will be applied to all sizes above it example sm md lg xlg; SO keep that in mind. here is my answer:
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-2">
<div class="row">
<div class="col-sm-6">
This is 6
</div>
<div class="col-sm-6">
And 6 more...and content is not gettin cut-off from the right
</div>
</div>
</div>
</div>
Keeping the column to start offset as sm rather that xs leaving some room when screen size gets to small. Hope this helps.
Related
This isn't exactly a "problem" I'm trying to solve, just something I've noticed about bootstrap columns when I work with them.
It seems that bootstrap's "scaffolding" sizes "reset" somehow when I put a column inside a column.
For example:
Let's say I have a col-md-9, and I want two columns inside of it, which together span the entire width of the "parent" column.
I would have thought that I would set the width of the two columns at 4.5 (col-md-4.5), but when I do this, the two smaller columns behave as though they are nested inside a col-md-12... In other words, they fill up 3/4ths of the col-md-9, not 100%. If I give them the class of col-md-6, they will together span the whole width of their parent (col-md-9).
Here is a visual representation of what this would looks/behave like:
Again, this isn't really a 'problem' that I need solved per se, just something I was curious about because it seems to conflict with what I've read in a lot of bootstrap documentation.
First things first - there is no col-md-4.5 unless you've made your own custom CSS class for that. But perhaps you did something like col-md-4 and then a col-md-5 to add to a total of 9 and saw the results that you observed.
When I first started learning bootstrap I was baffled because I would do similar things with their grid system. If I had a col-md-9 then I expected that the children could never exceed 9. My elements were never positioned right. Then I learned how it really works.
Basically you can think of the children of an col-*-* as "resetting" themselves, or in other words they always will add up to 12 even if their parent is a col-xs-6 (or whatever else).
Here is a fiddle I have made.
The code for the fiddle is here:
<div class="container">
<div class="col-xs-12 red-outline">
<div class="col-xs-4 blue-outline">
col-xs-4
</div>
<div class="col-xs-5 blue-outline">
col-xs-5 for a total of 9
</div>
</div>
</div>
<div class="container padding">
<div class="col-xs-12 red-outline">
<div class="col-xs-6 green-outline">
col-xs-6
</div>
<div class="col-xs-6 green-outline">
col-xs-6 for a total of 12
</div>
</div>
</div>
<div class="container padding">
<div class="col-xs-12 red-outline">
<div class="col-xs-6 green-outline">
<div class="col-xs-3 black-outline">
3
</div>
<div class="col-xs-3 black-outline">
3
</div>
</div>
<div class="col-xs-6 green-outline">
<div class="col-xs-6 black-outline">
6
</div>
<div class="col-xs-6 black-outline">
6
</div>
</div>
</div>
</div>
What you can see when you run this fiddle is the red top bar represents the parent col-xs-12. In the first example, the blue add's up to 9, and doesn't take up the full width.
You can see in my second example the green add's up to 12, and does take up the full width.
Now for the third example we have some serious inception stuff going on. We have a col-xs-12 and then the two green col-xs-6's and then on the left hand side we have two col-xs-3's which add up to 6 (and as you can see, they do not take up the full width). On the right hand side we have the two col-xs-6's inside of a col-xs-6 which is inside of a col-xs-12. It's a bit of a mind bender, but just understand that you should have everything add up to 12, and not add up to whatever width the parent is.
I'm currently working with bootstrap, but there's just a few things that confuse me about the grid management.
In this case, my grid structure tends to go (as an example)..
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="homeBox">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="homeBox">
</div>
</div>
</div>
</div>
</div>
(Apologies for poor formatting)
This works fine for full width elements (col-xs-12), however if i'm trying to have two elements next to each other (col-xs-6) with a row before adding the content, they simply touch each other in the middle, and if adding a background it makes it seem like one element. Here's a JFiddle showing what I mean. If i was to add a row before the homebox, it makes them touch. I can also just not add a row after the col-xs-x, but then it won't align correctly to the other full width elements on the page.
In sites I'm working on, I workaround this by adding a 'leftRow/rightRow' class for small devices onwards, but this seems a bit of a bodged way of doing it.
What's the correct way to approach this?
Cheers.
I am trying to create a simple grid, currently with one row and seven columns. Each column consists of a div containing one letter of text. I want these columns to space evenly out across the page, as is meant to be the default behaviour, but they are all bunched up on the left. Setting the row's width to 100% with an id doesn't help. Any help would be appreciated.
<div class="row">
<div class="column positive-bg stable" ng-repeat="i in [1,2,3,4,5,6,7]">M</div>
</div>
Use col instead column class.
<div class="row">
<div class="col positive-bg stable" ng-repeat="i in [1,2,3,4,5,6,7]">M</div>
</div>
More about Ionic Grid.
I need to make my bootstrap column span the full height of a row. The issue i am having is that I cannot get it to change size.
currently my HTML looks like this
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-11">
<!-- Content removed for demo | large form here -->
</div>
</div>
</div>
The col-sm-11 contains a form which is x height (around 400/500px)
the col-sm-1 contains no content but I want to make it 100% height so it matches the form next to it. How do I go about doing this
Attempts
I have tried applying height 100% to that column but it remains the same.
I have also tried setting a static amount like 300px but this just pushes the form down. and i need it to be 100% anyway
The easiest way I can think of for you to do this is to use one line of jQuery, if possible.
Add a class, two separate ones, to each of your two columns.
<div class="col-sm-1 col1">
</div>
<div class="col-sm-11 col2">
</div>
In jQuery, simply add this line of code at the top of your $(document).ready(function() {...});
$('.col1').height($('.col2').height());
Here is a JSFiddle
Note: I made your col-sm's col-xs's so that you could see it in JSFiddle without resizing.
Note #2: You may want to put the line of jQuery inside of a $(window).resize(function() {...}); so that it changes with the responsiveness.
I am creating a website in bootstrap. I need to make a right hand side column makes a big serial number 4. When I fill the column height make the big simultaneously space is come out the between the serial no 3 and 6.
How can I solve the problem?
<div class="col-md-3">content goes here</div>
<div class="col-md-3">content</div>
<div class="col-md-3">content</div>
<div class="col-md-3">BIG COLUM</div>
<div class="col-md-3">content</div>
<div class="col-md-3">content</div>
<div class="col-md-3">content</div>
Example
The only other thing I can think of is to use: on your vertical column. Check out this link http://getbootstrap.com/css/#grid-options
Check out the offset column section as well.
Remember to wrap your page in a <div class="container", then wrap it in a <div class="row"... also remember that the grid width is only 12 wide, so you have to many divs as col-md-3, you can use only four.