I am trying to split the row space I have to 13 columns, not 12. Every time I had the 13th column my row breaks into rows, regardless of the width of the container. So 12 is fixed/
How do I define 13 columns?
I tried:
<div class="col-lg-13">
<div class="row little-padding">
I also tried:
<div class="row little-padding col-lg-13">
But still, 12 per row remains...
You can create a custom version of Bootstrap, and specify the number of columns you want it to work with via the official site.
http://getbootstrap.com/customize/#grid-system
That link takes you directly to the grid system components.
If you would like your grid system to be 13 columns instead of 12, then you would have to modify the bootstrap LESS template. You can download this from getbootstrap.com.
(13 is an odd choice though)
The variable you are going to need to modify is: #grid-columns which is defined as 12 by default. You may also want/need to modify some additional things such as #grid-gutter-width which is 30px by default.
Bootstrap was made for a 12-col usage.
If you want to have more columns, you need to define your custom responsive grid, with the help of Bootstrap Less variables (see here). You'll mainly need to change these variables :
#grid-columns: Number of columns in the grid.
#grid-gutter-width Padding between columns. Gets divided in half for the left and right.
You can customize your bootstrap and get more col's, but ist not recommended. 12 is a good number - stay with it.
updated
If I'm not mistaking, bootstrap switched to 12 from 16-based grid for several reasons: a) reduces amount of supported css and b) division by 3 which provides more flexibility for different devices.
Keep in mind, Bootstrap promotes mobile first designs, which kind of assumes you taking to consideration tablets as well.
Related
I am a back-end developer and new to Foundation as well as to CSS. I have seen few of the front-end developers generally struggles in converting a design into CSS if the designer has not considered the grid structure while designing. This generally happens because the 12 grid (default) column structure doesn't provide the flexibility to place the elements exactly as desired.
Since, Foundation provides us to use custom grid count, is it wise to use it? Most of the grid structure uses 12 grid column because 12 is a good number. What if we use a 60 grid column structure with the same gutter as we would use it for 12 grid (say gutter is 20px)? I believe it should give us more flexibility to place the elements in place.
Let me explain. Suppose we need a three column structure for my webpage, with a ratio 3:3:4 and I do not want to leave any offsets. I am not sure how can we achieve this using 12 grid columns except for may be positioning the elements manually. But in 60 grid column, we can easily achieve this by using large-18, large-18, large-24, with gutter as required, say 20px.
Some may say that if we use gutter as 20px in a 60 grid column structure, the gutters between the columns would take most of the space of the webpage. But no, gutters are imaginary till we use the actual columns. So here space for only 3 gutters will be used and rest will be the columns with the ratio 3:3:4.
This is precisely my understanding about the grid structure. Can someone with more knowledge let me know, if whatever I am assuming actually makes sense or are there some other points which I am missing and may haunt me if I use a 60 grid structure?
Great questions.
I'm definitely no expert, but I have used Foundation quite a bit. I'll assume you're using Foundation 6. There are a couple ways you could go about accomplishing these tasks, and I've used both successfully in projects.
First way is to change the default grid to fit as many columns as you feel comfortable with maintaining. Personally, the most I've ever used is a 24 column layout. It's flexible enough to fit most layouts. Change this in your _settings.scss:
$grid-column-count: 24;
If that, generally, won't be flexible enough for you, you can use the regular grid, and also make a custom grid and call it with a class. That way, you've got the regular 12/24 column grid to use for most pages, but you can call on the custom grid for special cases. http://foundation.zurb.com/sites/docs/grid.html#grid-row
#include grid-row($columns, $behavior, $width, $cf, $gutter) { }
Lastly, if you don't want to use any of that special stuff, you can use percentages in your columns and omit the standard large-# column classes. So you custom scss would look something like this: http://foundation.zurb.com/sites/docs/grid.html#columns
.special-column{
#include grid-column(30%);
}
.slightly-larger-column{
#include grid-column(40%);
}
Not sure if this answers all your questions, but sounds like there's just some confusion as far as best practices? You can make you grid as large as you want, but you'll have to maintain it either way.
I know there are a lot of questions regarding input groups and their size in bootstrap 3, but I've tried every solution and I can't get it working properly (ie. with col-*-12). I've solved it temporarly messing around with col-xs-14 (yeah, I don't know why 14 works and 12 not).
I would be very thankful if someone can give me a solution with col-*-12 or an explanation of why 14 and not 12. And... the limit was not supposed to be 12 columns per row?
I've also read Bootstrap 3 documentation about the Grid System.
My working example can be found here: index12.html uses col-xs-12 (not displaying properly) and index14.html uses col-xs-14 (displaying properly)
I have five columns I want on the same row. Within each of these boxes there are numerous form inputs some of which need to be on the same line or otherwise organized as well.
I have been attempting to mix it together using Bootstrap's grid system but nothing I seem to do is working as intended. I thought I could just throw everything into a container, and then use nested rows and columns to achieve the desired effect.
For attached Bootply, the Firstname, Middle Initial, Last name, and Nickname are a great example of what I'm going for. I want the "Name & Address" section to be one column, and within that I want all of the information to be on 3 rows
http://www.bootply.com/HhszskhttD
Is Bootstrap grid layout the best way to approach? Do I just need to mess with the sizing of my inputs? I have also tried mixing in form-group-sm but that did seem to go in the right direction. I suspect where I'm using form-group in relation to the rows and columns is the root of my issue.
What's the best way I can perform this type of layout?
Bootstrap is perfect for this! I love (LOVE) the Bootstrap Grid System.
To do what you would like to do it is very simple. For the first row put class="row". After that it is all easy stuff. Nesting is just how it seems, but I will explain a little bit:
Lets say I have the following columns: col-xs-4, col-xs-4, col-xs-4. Now in one of those columns I want to separate boxs, I would add the following: col-xs-6, col-xs-6. You just have to remember, if you are nesting rows, they add up too 12 always. So when I am adding two 50% squares to the col-xs-4 it would be col-xs-6 and NOT col-xs-2 (col-xs-2 would be 16.66%).
So nesting is very simple, and it is not as tough as it seems.
EDIT
Let me throw an example out for you! :)
http://www.bootply.com/4yFHVS5g9r
The Bootply above shows how simple nesting is.
EDIT 2
Another example:
http://www.bootply.com/nJQEzSzsU7
Also, each nested column has 15px margin.
Many of the libraries which support responsive technique uses the 12 column grid system. e.g. the default Bootstrap grid system utilizes 12 columns
Is there any reason or logic behind using a 12 column system and not something else ?
12 is a superior highly composite number which can be divided in 2, 3, 4 and 6, which makes it very convenient when you want to buy eggs or layout a page.
(too bad our ancestors didn't decide to stick to the duodecimal system, far superior in practice over the decimal one as soon as you're past counting over your digits)
It's because 12 is dividable by 1, 2, 3, 4, 6 and 12 without remainder. Lot's of combinations to achieve desired layout. If you need more columns, use something bigger, like 24 or so.
It's an important part of the grid system.
Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases.
So it's not something you'll be using for mobile screens, but it's really handy if you want to code a bunch of smaller pieces in a row for bigger screens. It just breaks down everything in 12 pieces and gives you more flexibility design and code wise.
AND it's dividable as some have already mentioned which makes it also easier to work with.
It's one of those things you'll start appreciating once you start developing a website that requires multiple columns on the same row for whatever reason that may be.
Cheers,
Why am I limited to 12 columns? Why isn't by default more, for more flexibility?
Let me explain what confuses me. Let's say I want to create a simple page with a left menu, and a content on the right.
<div class="col-sm-3">Left menu</div> <!-- 258px -->
<div class="col-sm-9">Content</div> <!-- 772px -->
<div class="col-sm-4">Left menu</div> <!-- 343px -->
<div class="col-sm-8">Content</div> <!-- 687px -->
As seen in this example above, the difference between sm-3 and sm-4 is almost 100px for the menu! If I want the menu to be 300px, I can't use the grid. If I had more columns, I could be more precise than that.
Am I using the grid system the wrong way? Why is the grid divided into so few columns?
You can edit the amount of columns with LESS.
12 is the default because it is the most flexible grid pattern over any possible numbers up to 12.
COLUMNS | EVEN COLUMNS POSSIBLE
1 column = 1 (1x1)
2 columns = 2 (1x2, 2x1)
3 columns = 2 (1x3, 3x1)
4 columns = 2 (1x4, 2x2, 4x1)
5 columns = 2 (1x5, 5x1)
6 columns = 4 (1x6, 2x3, 3x2, 6x1)
7 columns = 2 (1x7, 7x1)
8 columns = 4 (1x8, 2x4, 4x2, 8x1)
9 columns = 3 (1x9, 3x3 9x1)
10 columns = 4 (1x10, 2x5, 5x2, 10x1)
11 columns = 2 (1x11, 11x1)
12 columns = 6 (1x12, 2x6, 3x4, 4x3, 6x2, 12x1)
Most versions of Bootstrap only use 12 columns to account for the following:
Easier layout creation
Responsive layout for mobile devices
Proportional "blocks" to keep everything symmetrical
Simpler "User Friendly" theme
You are correct. You are limited to a maximum width, and the width of your columns must add up to the maximum width and cannot exceed it. However, you are not forced to keep that policy on your website.
You can always override the CSS and customize the column width to any way you want!
To do this (and honor the maximum width of your website), you first need to find the number of pixels for the largest column, which is col-12. You can see that the maximum possible width is 1030px for your website.
Let's look at what you wanted:
If I want the menu to be 300px, I can't use the grid.
You can actually do that while still using the grid to a certain extent. We just need to set the menu to be 300px (like you asked) and give the rest of the space (1030px - 300px = 730px) for the main content.
So we need a box for 300px and a box for 730px.
Here's what you can use:
<div class="col-sm-3" style="width:300px;">Left menu</div> <!-- 300px -->
<div class="col-sm-9" style="width:730px;">Content</div> <!-- 730px -->
Basically, you can change your layout proportions to anything you want. The total width just needs match the rest of the website. I hope that helps.
-Dominick
Well, The reason is very simple and that's because it can be divided by 1, 2, 3, 4, 6, and 12. Which is also very easy to count and get your layout done.
You can use the entire available space by using col-12 to one div or element
or divide the same space into two equal divs by using the col-6 class
or you can make three equal divs by using col-4 class
or having 4 columns by using col-3 class
or even a 6 columns by using col-2 class
And even having a 12 columns layout by using col-1 class
Do you see? how easy it is to manipulate and calculate the space you desire.
Not to mention that there are other grid systems such as the 8 and 16 systems but each has its own advantages and disadvantages. But from my own perspective, I think the grid of 12 columns is the most flexible since you can have 3 equal divs which is a huge advantage in my opinion.
As it would appear 12 is an arbitrary value, could it be 12 as there are 12" in a foot?