I have always worked under the Zurb's foundation logic for my grid systems. Now I'm trying bootstrap for first time in it's 3.0.2 version. One thing I don't understand is the structure of it.
While Zurb works like:
<div class="row">
<div class="twelve columns">
</div>
</div>
Bootstrap has a 3-step structure to get the very same result:
<div class="row">
<div class="container">
<div class="col-lg-12">
</div>
</div>
</div>
My question is, what is the "row" class standing for?, on css it only sets a couple of margins and also clear the layout with the pseudo :after element. Can someone please explain me the logic of this? I'm sure that row is there because of a reason, but I can't find it.
.container only exists to give your layout a fixed-width (which is altered based on the end-user [responsive]). This class should also really only exist once on the page, and wrap all .row elements within (therefore living up to it's name--a container).
Bootstrap uses a fixed 12-column layout, and therefore only needs two pieces of information: .row to queue a new row, and one of the col-*-n classes to decipher how many columns that block should take up.
Columns are also broken down by three main layouts: lg, md and sm each having a different effect on the layout based on the window viewport. Bacause of these three variations, it's possible to specify that content should change based on browser capabilities (e.g display three columns on all devides (md & lg), but maybe switch to two on mobile (sm)).
Having said that, the most basic layout consists simply of:
<div class="row">
<div class="col-md-12">
single div consuming all 12 columns
<div>
</div>
I have basic knowledge of TWBS3 and this i how I understand it:
Imagine that your page is a table where, by default, you have 12 columns(this if you haven’t customized the configuration). When you have an element that has a class “col-*-*”, you will only use the space that is defined by the col class. Building on this, if you have 4 elements with col-lg-4 class, you will get 3 elements in line, whereas the fourth will be drawn in a second line. This is because 3 col-lg-4 elements add up to twelve columns, so the fourth element is pushed below the other elements. This might be good in some cases where the elements all have the same height(always), but when the height varies you get odd results where some elements that are of smaller height are drawn a little higher in the page. ROW enforces the idea of having elements that belong to a row. Something like having a 12 column n rows table. Ex:
ELEMENT 1 ELEMENT2 ELEMENT 3
ELEMENT 4
With the same 4 elements of col-lg-4 you could do something like:
<div class=”row>
<div class=”col-lg-4”>Element 1</div><div class=”col-lg-4”>Element 2</div>
</div>
<div class=”row>
<div class=”col-lg-4”>Element 3</div><div class=”col-lg-4”>Element 4</div>
</div>
ELEMENT 1 ELEMENT2
ELEMENT 3 ELEMENT 4
Because you are saying that you have two rows, each with two elements, that span 4 rows, out of the twelve that you have available for the row.
Hope this helps you. Sorry about the bad english.
Related
In the Bootstrap 3 documentation they give the following example of using push and pull classes to change column ordering (http://getbootstrap.com/css/#grid-column-ordering):
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
I understand how this works but why would you not just write the order in which you want them to appear in your HTML, like this?
<div class="row">
<div class="col-md-3"> ... </div>
<div class="col-md-9"> ... </div>
</div>
I can't see any possible use case for the example they give, because whether the order is col-md-3, col-md-9, or col-md-9, col-md-3 you're still not going to gain any more or less width on any device - they still add up to 12. Therefore why not just define it in the HTML in the correct order?
I understand how the classes work technically. But I don't understand what the use case of them could possibly be since they don't appear to do anything you cannot do already by defining things in the order you want? Essentially you can't gain any more or less viewport width on a given device, so where would you ever want to do something like this?
Column ordering classes allow us to change the order of our grid system based on different browser sizes. This means that on a large screen, you can have a different grid than on a mobile screen.
You can check this for example,
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap
why would you not just write the order in which you want them to
appear in your HTML
It's because when we write markup we're supposed to think of its semantics too.
For example you have a page which has a sidebar on the left side, and an article on the right side. In your markup hierarchy the article should comes before the sidebar because the article is the main page content.
But then if you float them left, the article will be on the left side and sidebar will be on the right side, which is the opposite of what you want to achieve. So to fix this you will use push and pull classes, you get the idea.
This is just an example. Of course other options are available to achieve the same result such as float them right, or place the sidebar markup before article but wrap it with <aside> element.
I am unable to find any rules as to whether or not this is something that should be done. Bootstrap clearly outlines amongst its rules the following:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be
immediate children of rows
So from this I conclude that each section of the website that I do want self-contained would have a container class. Within this we'd have a row and within that we'd have a column. Like so:
<div class="container">
<div class="row">
<div class="col">COL 1 of 2</div>
<div class="col">COL 2 of 2</div>
</div>
</div>
Now my question is, the rules specify that only columns may be immediate children of rows but it doesn't say what the children of columns should be. If I was to want to "nest" another set of double columns within another column, would I write it like in case one or case two?
<div class="container">
<div class="row">
<div class="col"> <!--Columns within columns without a row-->
<div class="col">
<div class="col">
</div>
<div class="col"> <!--Row nested before nesting columns-->
<div class="row">
<div class="col">
<div class="col">
</div>
</div>
</div>
</div>
Both work in terms of actually making the page, but I do not know what is considered "good practice". There are obviously limitations to both ways of writing things. In my case, I'd want the "column" to be filled with a dynamically generated amount of elements, which on different screen resolutions/responsive sizes would be aligned, so a row wrapper is not an option. I do not know how many elements per row I'd have, which would make the following rows break and wrap when it is not needed.
So, is it okay to nest columns within columns without a row to hold the children?
You should put any nested .rows inside of a .container to contain the negative margins, and only nest a .col inside of a .row:
<div class="container">
<div class="row">
<div class="col"> <!--Row nested before nesting columns-->
<div class="container">
<div class="row">
<div class="col"> </div>
<div class="col"> </div>
</div>
</div><!-- .container -->
</div>
</div>
</div>
Nested rows are better semantically and in some edge cases to maintain the design. This is however opinion but opinion that's based on best practice.
I'd put the row before for the column just to be clear on your intent and to make it more modular.
It's best to think about it as a module and ask yourself "Can I lift this section of markup out of its position and put it anywhere else on the page and it still hold its form?" By encapsulating it within a row, you can answer yes to that question. Of course its always a battle between only putting in mark-up that is necessary and being modular but with concepts such as SMACSS, Object Oriented CSS etc... taking the lead in how we think about structuring our markup and CSS its seems consensus is with a bit of extra markup in order to maintain modularization.
I'd like to ask can this code be correct from Bootstrap point of view? I expect the answer is yes. The question is about additional tag in between row and col(s).
<div class="row">
<something>
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</something>
</div>
P.S. <something> has no css styles and that's a directive from AngularJS.
There is nothing wrong here, but there are better practices on using bootstrap.
Just take care of minus margins and clearfix, check if the style flow its ok.
By the way, you can use "comment directive" if u need to use that something tag just for angularJs directive.
From the Bootstrap docs..
Content should be placed within columns, and only columns may be
immediate children of rows.
The Bootstrap row has a negative margin to compensate for column padding. <something> doesn't specifically cause a problem in your example, but it's incorrect from a Bootstrap standpoint.
In that code, the something tag will simply be given the entire 12 column width of the row div. The internal elements will then be split into the relevant grids as long as there is nothing on the something tag which would interfere.
I think this should work fine, but as a sidenote I would normally write this as
<something>
<div class="row">
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</div>
</something>
That way then gives you the option to add more rows etc into the something section easily if needed, and just aids readability in my humble opinion.
In this case row basically has the same purpose as col-md-12, but row will give you a margin of -15px to both left and right. To avoid a horizontal scroll-bar you can wrap the whole thing in a div with the class container.
looks good to me but i think according to your "something" element it can vary
My HTML code is organized in this way:
<div class="Container">
<div class="Card"></div>
<div class="Card"></div>
<div class="Card"></div>
<div class="Card"></div>
<div class="Card"></div>
</div>
And my CSS is organized as such:
.Container
lost-utility clearfix
.Card:first-child
lost-waffle 1 1 15px
.Card:nth-child(n+2)
lost-waffle 1/2 2 15px
The result looks like the following:
My issue is that I am trying to get the first div to span 100% of the width, the way it shows in the image, and the rest of the divs to display 1/2 the width. I do not know how to get that second div to the left instead of to the right, and then the third div to the right and up, etc... Basically all the divs after the first div needs to be shifted by 1. I haven't been able to figure this out. Any help would be appreciated.
The issue here is caused by the cycle that LostGrid. Because LostGrid uses :nth-child as the means to select which elements to style, the top "Card" is the first in the cycle, and then the second "Card" takes the second place...when in your layout the second card should start the cycle instead of being second.
There are three options I came up with quickly to solve this.
Option 1
Use LostGrid and have containing divs around the different cards.
Option 2 Not use LostGrid but instead use the math it provides and create the layout in vanilla css.
Here's a CodePen with the three options: http://codepen.io/peterramsing/pen/YWrrjv
I'd lean towards Option 2 as LostWaffle is designed for equal card sizes.
Option 3? I included a third option. It works but it has some excess css that is outputted. But it's an idea.
I haven't run into an issue like this with LostGrid yet as I either use Vanilla css for this or would use containing divs. LostGrid is an amazing tool to use for creating Grids and it's built to help enhance the existing means that css has for creating grids. There are various times when LostGrid isn't the tool to use and with PostCSS it's great because it doesn't add bloat if you only use it a handful of times.
This might, however, be a possible feature add for LostGrid to have a bit more control over the cycle. I'll think on it a bit more.
Hopefully that helps and be sure to let me know if you think that cycle should have some additional customizations for it in later releases.
What is proper way to make bootstrap grid?
Here is example what I have
<div class="row">
<div class="col-md-12">
<div class="page-header">
HELLO
</div>
</div>
</div>
Do i need always to make row before col, or i dont need to use col if I am creating new row
Or is it proper to make it like this
1.
<section class="content row">
<div class="col-md-12">
<div class="page-header">
HELLO
</div>
</div>
<div class="col-md-12">
<div class="what">
HELLO 2
</div>
</div>
</section>
Or it is proper way to make it like this
2.
<div class="row">
<div class="col-md-12">
<div class="page-header">
HELLO
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="page-header">
HELLO
</div>
</div>
</div>
Or does i need to use COL after row like this?
3.
<div class="row">
<div class="page-header">
HELLO
</div>
</div>
<div class="row">
<div class="page-header">
HELLO
</div>
</div>
Why i must use ROW and when?
And why i must use COL and when?
This is just example, if someone can asnwer me what is proper way, then it will be nice?
The grid works with 3 parts: a container, a row and column(s)...
The container has 15px of padding. The row negates the container padding with -15px of margin. Columns have 15px of padding, which pull the content away from the edges of the container and create a consistent 30px gutter.
The purpose for adding 15px of padding that is only negated by the negative row margins seems silly, but it is essential to allow for nesting columns inside of other columns! Note in the diagram below how the nested columns indicated by the red outline fits neatly into the enclosing column without getting additional padding applied.
So, to answer your question, assuming that you have a .container or .container-fluid wrapper around your examples, both 1 and 2 are properly formatted. That said, I would use example 1, because it requires less markup (generally a good thing) and since you are grouping your elements into a section, it seems they are semantically connected, thus the extra row seems superfluous.
As, #skelly suggests, I recommend taking a look at the Grid section in the doc. Below are some of key points about the use of rows found there:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Start with the examples in the Bootstrap docs: http://getbootstrap.com/css/#grid-example-basic
From the docs..
Content should be placed within col-*, and only col may be immediate children of row.
Rows must be placed within a .container for proper alignment and padding.
It's fine to have columns totaling more than 12 in a single row. As the docs say..
"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."
Therefore, I would go with something closest to your #1 but make sure it's in a container..
http://www.bootply.com/Cy2i2H0oZB