I'm trying to do this layout without breaking it into two separate wrapper columns. It should be one list of divs.
But the second column should start with a margin-top or indent.
sample photo
At the moment I've done 2 columns inside of the wrapper, but that means that items in the second column will be pushed after the first column in mobile. Don't want that.
The code should be like:
<div class="items-wrapper">
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
</div>
EDIT:
I tried to do like this:
https://codepen.io/wackou/pen/pozEybR
Perhaps there's better way?
Maybe give to the "items-wrapper" class a flex property and next change the flex direction to column
Related
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've been using Bootstrap for 4 months and there's something I am still not too sure about.
What is the correct use of the row class ? Here are two examples
First example : each row only contains 12 columns
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
Second example : each row is basically similar to container class, just removing left and right padding. As you can see, this row is equal to 24 columns, so it will create 2 rows anyway because 12 is the maximum.
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
Using the default Bootstrap styles, there is whitespace (margin-bottom) between rows. If you want that space, use a row. If you do not want whitespace between the elements inside the row, you add as many cols as you like, and they will wrap as you've seen.
Column wrapping is absolutely a feature of Bootstrap; it's what makes responsive layouts possible.
Lastly, you can use a row to force a "hard wrap", if you've got a row with fewer than 12 columns, and you wish the next element to always be on another row.
You are overthinking things. the row class was only made to handle up to 12 columns. The second is technically incorrect use. The first way is the way you should implement row.
EDIT:
After seeing wrapping in the documentation, I would say the bootstrap framework is made to accommodate this, as columns that are too wide are already wrapped, but it is still best to try to keep it to 12 cols. If you need to though, you can use more. It would depend on what you would need as the developer.
(made my comment an answer, as it was more appropriate as one)
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
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.
I am trying to convert a table view into a floating view. It has two columns, the first column should have one row, the second column has two rows. I want the row of the first column to stretch out, so that it spans over the two rows of the second column.
Currently my HTML is this:
<div class="row">
<div class="span1" style="background-color: #FF0000">
First column with single row goes here
</div>
<div class="span11">
<div class="row">
<div class="span12" style="background-color: #00FF00">
First row of second column goes here
</div>
</div>
<div class="row">
<div class="span12" style="background-color: #0000FF">
Second row of second column goes here
</div>
</div>
</div>
Now i have a problem: The single-rowed column does not span over both rows of the second column. It has the same height as the first row, and has a whitespace below it with the same height as the the second row.
How am i supposed to stretch this cell over both rows?
I think you are thinking about this the wrong way, using the concept of tables/rows to apply to div containers. They don't really work like that.
You could do this with CSS.
Add float:left; to all your div containers or classes.
Add margin-left:100px; to your styles that you want in 'column 2'. This will push them away from the first column.
Add height:100px; to your left column div to give it a fixed height.
You could dial all this in like that.
Also, you may be using the class 'row' incorrectly, since it's wrapping around the entire group, but it's also the class applied to the 2nd row. You may want to make these different things.
I think this will work as you want:
<div style="background-color: #FF0000">
First column with single row goes here
</div>
<div style="background-color: #00FF00; width:50%; float:left;">
First row of second column goes here
</div>
<div style="background-color: #0000FF; width:50%; float:left;">
Second row of second column goes here
</div>
I don't know what code you have in your CSS classes, so I removed them in my answer. You may have to modify that code to get it to work.
I set the width of the columns to 50 %. If you want some other widths, change these values. Just make sure the sum is 100.
I also removed some HTML code I don't think is needed. At least as far as I understand your question.