What is the purpose of .row in Bootstrap?
Container
The container provide the width constraints on responsive widths. When the responsive sizes change, it’s the container that changes. Rows and columns are all percentage based so they don’t need to change.
Note that there is a 15px margin on each side, canceled by rows.
Rows
Rows should always be in a container.
The row provides the columns a place to live, ideally having columns that add up to 12. It also acts as a wrapper since all the columns float left, additional rows don’t have overlaps when floats get weird.
Rows also have a 15px negative margin on each side. The div that makes up the row would normally be constrained inside of the container's padding, touching the edges of the pink area but not beyond. The 15px negative margins push the row out over top of the containers 15px padding, essentially negating it. Furthermore, rows ensure you that all of the divs inside of it appear on their own line, separated from the previous and the following rows.
Columns
The columns now have 15px padding. This padding means that the columns actually touch the edge of the row, which itself touches the edge of the container since the row has the negative margin, and the container has the positive padding. But, the padding on the column pushes anything inside the column in to where it needs to be, and also provides the 30px gutter between columns. Never use a column outside of a row, it won’t work.
For more information, I suggest you to read this article. It is really clear, and explain well how Bootstrap's grid system works.
What's the meaning of the row class in Bootstrap, its difference from containers, and how does it stack with col-***-*?
In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6
div will have the width of 6/12 of the "row"s div, meaning 50%. The col-md-4
will hold 33.3%, and the col-md-2
will hold the remaining 16.66%.
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-4"></div>
<div class="col-md-2"></div>
</div>
In Bootstrap 4, is it best practice to always use rows?
Basically this has been answered before: Do you need to use Bootstrap's "container" and "row" if your content is to span the whole width?
Short answer: The container
can be used to directly contain content and/or the grid system of rows and cols. The row
is only use to contain columns. Therefore, if you don't need a multi-column layout, there's really no reason to use the grid.
Of course the question is subjective, but I would lean toward #2 being the better practice because it achieves the same result with less markup.
When should I use container and row in Twitter Bootstrap?
container
is a container of row
elements.
row
elements are containers of columns (the docs call it grid system)
Also, container
sets the content's margins dealing with the responsive behaviors of your layout.
Thus the container
class is often used to create 'boxed' contents based on the style guidelines of the Bootstrap project.
If you want to go "out of the box" creating a full width grid you can use only row
elements with columns inside (spanning the usual 12cols total).
The container
and row
classes are for elements inside the body.
So a basic layout would be:
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-xx"></div>
...
</div>
<div class="row">
<div class="col-md-xx"></div>
...
</div>
</div>
</body>
</html>
For a boxed responsive layout.
If you omit the container
you'll get a full-width layout.
Jumbotron example
Jumbotron is a good example of the container
behavior. If you put a Jumbotron element in a container
element it has rounded borders and a fixed width based on the responsive width.
If the Jumbotron is outside a container, it spans full-width without borders.
Bootstrap - when use rows
You just need the row
div around the col-6
columns. The other items (e.g the h1) will all go full width (if they are outside the row
div), so no need for the col-md-12
div.
<h1>Title</h1>
<div class="row">
<div class="col-md-6">content</div>
<div class="col-md-6">content</div>
</div>
<div>content</div>
<p>Some Text</p>
Bootstrap - do we have to use rows and columns?
They can sit outside of a column, but in doing this you're sacrificing padding. Bootstrap's .row
style sets margin-left
and margin-right
to -15px; the .col-...
classes make up for this with 15px padding on either side.
To make up for it, you'd have to manually add this 15px padding to your non-.col-...
elements.
That said, however, there's no reason your h1
can't be a .col-...
itself:
<div class="row">
<h1 class="col-md-12">Title</h1>
<div class="col-md-12">Content</div>
</div>
What is the usage of the row class from Bootstrap?
The bootstrap translated the use of normal table rows, <tr>
, into a more semantic building block that you can use to layout your design, and with that they also translated the table data blocks, <td>
, into the .span*
classes you use to separate content with, which is called a grid. Basically, you can think of a row as a horizontal container which you can fill with building blocks, the span
tags, that you later can stack above or below other rows to create a layout.
So, to illustrate your layout, you can use a stack of rows like this:
<row>
<span>LOGO</span>
SUB-MESSAGE
</row>
<row>
<span>MENU 1 | MENU 2 | MENU 3 | MENU ...</span>
</row>
<row>
<span>CONTENT</span> | <span>ADS</span>
<span>CONTENT</span> | <span>ADS</span>
<span>CONTENT</span> | <span>ADS</span>
<span>CONTENT</span> | <span>ADS</span>
</row>
Notice how the rows separate different levels of content that you wish to have separated. You can find more information on the usage of the grid system over at the bootstrap scaffolding documentation, they also have a stacked grid which you can view the source off to get an idea of how the rows are stacked up and how the content within are put together.
why do we need class .row in bootstrap framework?
The row is a wrapper to contain the columns. Column gutters are offset for the first and last column with the negative row margin. If you didn't have them, you'd see a horizontal scrollbar on your content.
Solid Article on the B3 Grid System.
For proper alignment they should be inside a container.
Related Topics
Get Rid of Space Underneath Inline-Block Image
How to Make Div's Percentage Width Relative to Parent Div and Not Viewport
How Does One Use the Onerror Attribute of an Img Element
Html5 - Mp4 Video Does Not Play in IE9
Create a Slanted Edge to a Div
Do I Need a "/" at the End of an <Img> or <Br> Tag, etc.
Is It Bad to Use Uppercase Letters for HTML Tags
Issue with CSS Media Queries(Scrollbar)
How to Set a Stroke-Width:1 on Only Certain Sides of Svg Shapes
How to Pass a Parameter to HTML
How to Remove "Invisible Space" from HTML
Img Tag Displays Wrong Orientation
Selecting the Last Element Among Various Nested Containers
Why Is a Self-Closing Iframe Tag Preventing Further Dom Elements to Be Displayed