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)
Related
I am newbie with html css and here is my problem.
I code a very simple html css program as you can see in this link
https ://codepen.io/anhbui2904/pen/KKXQKGg
And, my problem is, as you can see in the result, the left square has been pushed upward.
My problem is, I coded it as the same with another square, as you can see in the code.
Maybe it is because of the course-item css ?
Could you please help me to solve this problem to make it to be the same height ? Thank you very much for your time.
You're nesting class="col" containers. Each of which brings some more margin-top along with it. The left block is in only in 1 col, but the others are wrapped within 2 layers of it.
If your goal is to have 4 similar/aligned blocks then the structure of your HTML is a bit odd. Why not just have 4 blocks in the same parent ?
It's because the structure is different, for class category ,it's nested inside row and column
<div class="row">
<div class="col l-3 m-0 c-0">
<div class="category">
but for class course-item, it's nested inside 2 sets of row and column.
<div class="col l-9 m-12 c-12">
<div class="row">
<div class="col l-4 m-6 c-12">
<div class="course-item">
You can use css for category class to align e.g margin-top
Why you are nesting the first col seperately. Nest all the col inside single parent.
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 am trying to put a detail view between rows in my web application.
I am using Bootstrap and some Frontend Rendering.
My code looks somewhat like this:
<div class="col-sm-4 col-xs-6">
...
</div>
<div class="col-sm-4 col-xs-6">
...
</div>
etc...
I am basically looking for some way to do this in bootstrap or some library that does it. The closest example I could find is in the newest itunes version, I've attached a screenshot for that.
Edit:
What I have tried / thought of:
Put the detail view as an absolutely positioned div inside the tile and give the tile a margin-bottom.
This didn't work out since the layout simply breaks. To make this work, you would have to give all elements in the row a margin-bottom.
Put a set of tiles into a row-div and just insert the detail div after that specific row.
This will either break every responsive feature or require a lot of javascript to somehow dynamically put the divs into rows.
I am basically looking for a library / css hack that makes me able to do this without writing a whole lot of javascript.
For the 'details' row, you'd probable just need to use:
<div class="col-xs-12">
...
</div>
That would force it to span the full width regardless of the screen size. So your 3 rows would look like:
<div class="col-sm-4 col-xs-6">
...
</div>
<div class="col-xs-12">
...
</div>
<div class="col-sm-4 col-xs-6">
...
</div>
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.