I am having some problems with Bootstrap 3
In my header I currently have 2 columns, both with a columns width of 6. I would like to add a column in between these two columns.
But if i change the column to 4 and add a 4 column in between they appear on different lines. Is the following not the correct way to have 3 columns in a row in bootstrap 3?
<div class="row">
<div class="col-md-4">
// Content here
</div>
<div class="col-md-4">
// Content here
</div>
<div class="col-md-4">
// Content here
</div>
</div>
Thee is a link to site where i am having the problems. The problem is in my header where my logo is
http://www.sevecu.dk/juni14/
Update: It works in Chrome and Safari but not in Firefox and Explorer
I was able to reproduce this opening it in IE. Your three columns are setup correctly.
What you'll notice is even if you delete the logo nodes through the debugger, the one of the three is always in the top-right corner. This led me to believe the alignment of something above it is uneven.
Specifically, it appears to be caused by the following in template.css:
p {
margin: 0 0 10px;
}
Which is pushing the .customphone below the area defined in the white-row.
To resolve it, one way would be to do:
p {
margin: 0;
}
Or probably change it to .customphone p or create its own class so you don't affect all p
This resolved the issue for me.
Related
This is a continuation of a small project I started on over the weekend (I raised a query re H1 header size). I've got this as far as I want to take it at this stage (simple to-do list - non-functional at the moment). I added a navbar and designed an imported my own logo (in the menu bar and at the bottom of the screen). I've included the code from a codepen but for some reason (not sure at the moment) it hasn't pulled through the background colour and logo PNG hence why I've included a screenshot too.
However, the issue is that I cannot locate where I'm going wrong with regard to the containers not lining up: you can see the first two containers (with one row each - with the ADD rect which I'm going to change to a box and the 'You have '3' complete tasks:" rect box) then the five containers/rows below that are offset from those above.
The code for the "container-row-col" is (as far as I can tell) the same, but would placing all these rows in one container (containing all the 7 rows plus their columns) make a difference?
Maybe the media queries need to be looked at?
<div class="row">
<div class="col-8 col-md-6 white-rect mr-4 mb-2 ">|.............................................
</div>
<div class="col-6 col-md-4 white-rect center-block">ADD</div>
</div>
</div>
Here's a snippet of the container-row-col code with a codepen link below. I can only apologise for the amount of commenting out I've done...part of my learning process I guess.
Many thanks.
Codepen
Screen Shot of Full Page as it appears in my browser
You have too many nested containers. Just put all your .rows into one parent .container or add some style to the nested .containers witch will remove the extra padding. Something like this:
.container .container {
padding: 0;
}
I am currently working on my own responsive grid with columns. I am currently using 12 columns and I give each column a multiplier of 100/12 and subtract a margin on each column. So I make each column a little bit smaller so I can fit in a margin-left and make gutters this way.
#for $i from 1 through $column-count {
.column-#{$i} {
width: (((100 + $gutter-width) / $column-count) * $i) - $gutter-width;
}
}
This leaves me with something like this:
.column-1 {
width: 7.41667%; }
.column-2 {
width: 15.83333%; }
.column-3 {
width: 24.25%; }
etc.
This way I can set a margin-left for each column and just remove the very first margin-left in each row with the first:child selector
Twitter bootstrap however uses a column grid where all columns touch eachother and they use padding to kind of fake column gutters. However I tried some fooling around with bootstrap and you run into a problem when you actually set like a background for a column. Immediately you can see that the columns will touch. How do people prevent this from happening?
I guess using another element would inside the column would help? This however would get a bit messier than I would like probably.
I am asking this because I am looking for a solution since my grid can only go from default columns to 100% width columns when you downsize it.
grid: http://titan.ravenwebdesign.nl/
I would like to be able to add something like .mobile-column-6 to certain grid columns in a manner that bootstrap has with it's grid tiers of classes.
This would be helpful in for example having 2 columns next to each other when in downsized view. Except I'm currently using rows and every first child of my row has the margin removed. So it would't work like this:
<div class="row">
<div class="column-3 mobile-column-6"></div>
<div class="column-3 mobile-column-6"></div>
<div class="column-3 mobile-column-6"></div>
<div class="column-3 mobile-column-6"></div>
</div><!-- .row -->
Because of my responsive design which says that the first column will have it's margin removed I can't simply turn it into a 2 columns next to eachother design.
Hopefully somebody can help me out here although I understand this problem is extremely hard for me to explain like this.
I have a form layout that has bootstrap 3 form groups on it. I want these form groups in a single column on < small, 2 columns on tablet size break and 4 column on larger screens.
I have it apparently working perfectly, however after doing some reading here what I did seems to violate the supposed rule that every column in a row must add up to 12. However every tutorial and docs I could find always use weasel words like "should" or "ideally" when saying it should add up to 12. There doesn't seem to be a clear guidance here.
I defined my groups like this:
<div class="row">
<div class="form-group col-md-6 col-lg-3" ><!--....etc-->
and I currently have 4 of these in each row. This means that the 4 * col-lg-3 adds up to 12 but the 4 * col-md-6 form group divs adds up to 24 not 12.
However this doesn't seem to matter and it works perfectly at each breakpoint.
Should I be concerned? Does it matter in any way? Surely I'm not supposed to do two completely different layouts that duplicate all these controls once each for col-md-6 and col-lg-3 on the same page?
No, there's nothing to mandate that the bootstrap grid must add up to 12 columns.
It's just a preference / stylistic thing.
Less than 12 Columns -> Aligns Left:
If you have less than twelve of the columns filled, by default they will left align, leaving empty space to the right.
The following code:
<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>
</div>
.row > div {
background: lightgrey;
border: 1px solid grey;
}
Results in this: (Demo in Fiddle)
More than 12 Columns -> Wraps:
If the total adds to more than 12 columns, as long as the columns are within a row class, they will just wrap to additional rows. A good use case would be a photo grid system where you would like to add tons of photos but don't know how many rows you'll have and would still like to define the number of columns.
The following code:
<div class='row'>
<div class="col-xs-6">Hi</div>
<div class="col-xs-6">Hi</div>
<div class="col-xs-6">Hi</div>
<div class="col-xs-6">Hi</div>
</div>
Results in this: (Demo in Fiddle)
Other than that, sometimes it's the case that 12 column layouts look better, but you don't have to use them; it's not a sudoku :)
4 * col-md-6 will create 2 "rows" on a medium screen. Since you are wrapping everything in a .row it will function as expected. If you removed that then things will nest next to each other
e.g.
<div class="row">
<div class="col-sm-2">Hello</div>
</div>
<div class="row">
<div class="col-sm-2">Hello</div>
</div>
will produce 2 rows with 1 column each that are each 16.67% as wide as the parent row and floating left because a row has 100% width. Column widths are specified by col-**-(number/ 12) as a percentage (2/12 = 0.166667)
<div class="col-sm-2">Hello</div>
<div class="col-sm-2">Hello</div>
will produce 1 row with 2 columns that are each 16.667% as wide as the parent object. So you could forgo the .row if you did
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
This will create: Small Screen ( 4 rows full width columns) Medium Screen( 2 rows 2 columns each 50% width) Large Screen ( 1 row 4 columns each 25% width)
I've seen a lot of website use "col-xs-12 col-md-10 col-md-offset-1" lately. The offset centers the content, yet each row is filled with just 11 cols.
If the next element is a col-1 it must include col-offset-1 as well (Forcing a total of 13, moving the col-1 with offset-1 to the next row, aligning nicely). If the next element is wider, it still needs the offset (To skip the first column).
On the CSS side of it, it all works with percentages. If the total width of the columns is over 100% it has to force the next element on a new line.
U can easily play with this concept by making a html file with a whole lot of divs.
Add the following css to the divs (bootstrap basics)
body > div {
margin: 0;
padding: 0;
float: left;
width: 8.333333% (or 1/12th)
}
Then u can change the size of indivual divs to see what happens. It might be easier to play with round values (eg. 10%/20%), just sticked to bootstrap here.
Hope this gives you an understanding of how the browser handles the bootstrap grid (which you just made a basic version of)
The Bootstrap docs on columnwrapping also give a nice example.
i have posted a question on ZURB's forum, but i noticed there were no answers to any post.
As i think this problem might occur to many others, i think it might be a good idea to put it on SO as well. Here it comes:
i have crafted a minimal example of the problem using the following markup (Edited with CLCS advices):
<body>
<div class="row collapse test">
<div class="large-4 columns">
<p>Test 1</p>
</div>
<div class="large-4 columns">
<p>Test 2</p>
</div>
<div class="large-4 columns">
<p>Test 3</p>
</div>
</div>
</body>
All CSS classes are ZURB Foundation untouched classes. The only addition is for the test-table class, which sole purpose is only to get visual aid on the problem (Edited as well for clarity sake):
.test div {
border: 1px solid red;
}
The expected output would be 3 columns perfectly touching each other. The actual output is two columns touching each other like expected, but the third one being offset a bit on the right, leaving a white space between the center and the right one (See attached image, edited as well, but issue still present).
Seems that some other users are facing the same problem under the same environment (Safari 7, Zurb Rails Gem 5.0.2.0)
It is a combination of rounding issue that others have pointed out above and the fact that Foundation put float: right; on the last column in the row. That is why you are seeing the gap between the last column and the middle column.
To remove the gap, you can add the end class to every column.
Have a look at Foundation's docs under "Incomplete Rows"
http://foundation.zurb.com/docs/components/grid.html#incomplete-rows
The problem is with roundings by Safari. There is a difference between width: 33.333% and width: 33.333333% for large-4 in Safari. To solve it use sass to compile own css based on foundation sass files and make higher precision number.
Put Sass::Script::Number.precision = 6 in config.rb
or in Gruntfile.coffee
sass:
options:
loadPath: ["bower_components/foundation/scss"]
sourcemap: "true"
precision: 6
dist:
files:
"css/app.css": "scss/app.scss"
Looks like a rounding issue with how Safari is converting the % widths of the columns, default site width ends up (on my machine at least) at 1000px wide. Comparing the calculated results between Chrome and Safari I get 333.328px in Chrome and 333px in Safari.
Depending on the rest of your layout requirements a workaround may be to adjust your layout widths to a figure that works better with the columns you require.
I fix it by adding css class to last column, css for this class
.your_class_for_last_column { float: left !important;}
/* to fix 1px Foundation 5 bug*/
Adding a border of 1px worked for me. You could try something like this:
<div class="small-5 small-offset-2 columns border">
...
</div>
<div class="small-5 columns border">
...
</div>
On CSS:
.border {border-right: 1px solid color-of-column;}
I'm working on a layout with 2 columns. But, I'm having some issue with doing it, since my templates are quite complicated, and I'm unable to have one div per column.
For example, I might have something like:
<div class="column left">
left column - part 1
</div>
<div class="column right">
right column - part 1
</div>
<div class="column right">
right column - part 2
</div>
<div class="column left">
left column - part 2
</div>
And what I'd like to do is create two columns, with the same width and without empty holes (vertically) between them. Normally, it wouldn't be a problem to accomplish with:
<div class="column left">
left column - part 1
left column - part 2
</div>
<div class="column right">
right column - part 1
right column - part 2
</div>
Furthermore, my goal is to have a solution which works in dead browsers, like IE7. But, I'd also like to see solutions which are supported only in newer browsers, because I think there might be some interesting solutions. Of course, there are solutions through JS, e.g. merging elements of all .column.left in one div, and the same thing for .column.right, but CSS solutions would be better.
Is having the divs from different columns in none specific order a requirement? If so, then you can't accomplish it by pure css, because of the need to put some elements above the ones from another column. See Use CSS to reorder DIVs.
If that's not the issue, try writing all left column divs before right column divs in the code and use following css:
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
}
It creates a two-column layout. That method works particularly well when one of the columns if of contant width, but you can achieve whatever you want by changing 100px to for example 50%. Example here: http://jsfiddle.net/uQwUT/.