What's The Meaning Of The "row" Class In Bootstrap, Its Difference ...

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs What's the meaning of the "row" class in Bootstrap, its difference from containers, and how does it stack with col-***-*? Ask Question Asked 9 years, 1 month ago Modified 5 years, 1 month ago Viewed 76k times 15

I'm trying to follow the guide here: http://getbootstrap.com/css/ and I just can't seem to understand what the "row" class is doing. I was trying some of the examples in the guide such as:

<div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div>

I tried it with the row div and without it, and I was trying to place everything inside a container, and there was no difference at all, they all looked the same.

Could anyone explain what the meaning of the "row" class is ?

• html
• css
• twitter-bootstrap
• row

Share Improve this question Follow edited Feb 19, 2019 at 15:55 Tristan 9,10177 gold badges5454 silver badges108108 bronze badges asked Nov 12, 2015 at 19:39 anonymousanonymous 19911 gold badge11 silver badge66 bronze badges 1

• 1 Basically the difference is in margins and padding: see for example. (Plus more difference for different types of containers... See the docs). – seven-phases-max Commented Nov 13, 2015 at 2:53

Add a comment |

3 Answers 3

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 25

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> Share Improve this answer Follow edited Nov 12, 2015 at 19:56 TylerH 21.2k7676 gold badges7979 silver badges110110 bronze badges answered Nov 12, 2015 at 19:46 Asaf DavidAsaf David 3,28722 gold badges2424 silver badges4141 bronze badges 3

• 4 But what happens if you dont wrap those divs inside a row? i tried to run this example with and without the row wrapper, and i cant tell the difference. – anonymous Commented Nov 12, 2015 at 19:53
• 3 Not exactly. All the "col-..." div are float left or right, so if they are higher than their parent element, they will "spill" out of it. Such case can generate overlapping of elements in the view. A simple fix for that, which "row" class does for you, is to make a "clearfix" which will make the parent generate height by it's children wether they float or not – Asaf David Commented Nov 12, 2015 at 19:57
• 3 I also noticed that the row class implements margin-left: -15px; margin-right:-15px I think it's related to some fix related to the fact the cols have padding-left:15px; padding-right: 15px – Yuval A. Commented Feb 6, 2020 at 17:08

Add a comment | 4

I like to think of the row as a container that can contain X many columns equal to 12. You would use the row class to separate different stacked element (columns).

The columns as you defined them col-xs-12 col-md-8 mean that on a medium sized screen and above the div will span 8/12 of the page and on a xs small screen (mobile) it will span the full 12 columns. This works with the col-xs-12 col-md-4 class because 8 + 4 = 12.

If your entire site is split this way (8/12 and 4/12) then all you really would need is one row! Other wise you'd create another row for different column width. An example would be:

<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8"></div> <div class="col-xs-12 col-sm-4"></div> </div> <div class="row"> <div class="col-xs-12 col-sm-4"></div> <div class="col-xs-12 col-sm-2"></div> <div class="col-xs-12 col-sm-6"></div> </div> <div class="row"> <div class="col-xs-12 col-sm-3"></div> <div class="col-xs-12 col-sm-3"></div> <div class="col-xs-12 col-sm-3"></div> <div class="col-xs-12 col-sm-3"></div> </div> </div>

The container class is used to create a nice margin around your entire site, but if you have a portion of your site you want to span across the entire width, you would need to close the container and create a container-fluid class. Then create another container to get the margin back. Hope that all makes since! Just how I think about it as.

Share Improve this answer Follow answered Nov 12, 2015 at 19:55 Benneb10Benneb10 1,48911 gold badge88 silver badges1313 bronze badges Add a comment | 0

The difference can be seen here with row class. Row like container is a class applied to the element.

P.S: run the snippet in full view .color { background: #cfcfcf } <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <div class='color container'> Container only </div> <p> <div class='color container-fluid'> <div class=row> Fluid Container & row </div> </div> <p> <div class='color container'> <div class=row> Container & Row </div> </div>

Share Improve this answer Follow edited Nov 12, 2015 at 19:59 answered Nov 12, 2015 at 19:46 Lucky ChingiLucky Chingi 2,25811 gold badge1212 silver badges1515 bronze badges 4

• I'm not the one who downvoted your answer, but this answer is not very clear; all three containers look the same in your demo. – TylerH Commented Nov 12, 2015 at 19:57
• Thanks @TylerH. I guess I should have mentioned to run the code snippet in full view :) – Lucky Chingi Commented Nov 12, 2015 at 19:58
• I see the minor difference between the "Container only" and the "Container & row", but i cant point exacly what that difference is? all i can see is a small padding to the left? – anonymous Commented Nov 12, 2015 at 19:58
• @HayNHasida the container is padding 15 px on left and right. Adding the row class offsets the padding and brings the layout inline. this is particularly useful when doing complex layouts – Lucky Chingi Commented Nov 12, 2015 at 20:01

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css
• twitter-bootstrap
• row

or ask your own question.

• The Overflow Blog
• Why do developers love clean code but hate writing documentation?
• This developer tool is 40 years old: can it be improved?
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Related

10 What is the usage of the row class from Bootstrap? 37 Differences between container, row and span in Bootstrap 86 Understanding the grid classes ( col-sm-# and col-lg-# ) in Bootstrap 3 2 why do we need class .row in bootstrap framework? 3 Technical confusion over "row" class in bootstrap 0 How rows are handled in bootstrap 2 Bootstrap row and col explanation 2 Bootstrap .row class correct usage 1 When shall "row" be use in Bootstrap 6 How is .row class defined in Bootstrap?

Hot Network Questions

• Brain ship 'eats' hijacker
• What should I do if I am being guided to walk in circles?
• A SAT question about SAT property
• Can a table of results be returned and formatted as a table in Agentforce when an Apex @InvocableMethod is used?
• An extension of Lehmer's conjecture on Ramanujan's tau function
• Merits of `cd && pwd` versus `dirname`
• Is the atmosphere of a planet considered an integral part of the planet?
• Is "Bich" really Latin for "generosity"?
• Meaning of Second line of Shakespeare's Sonnet 66
• Permanent night on a portion of a planet
• Why were my lead-acid batteries destroyed after operating them in parallel?
• How can I seal this hole the gas tank comes with?
• Product of all binomial coefficients
• If you are working remotely as a contractor, can you be allowed to applying as a business vistor to Australia?
• Should parameter names describe their object type?
• How to Speed Up the Summation of a Sequence？
• Would reflected sunlight suffice to read a book on the surface of the Moon?
• Answering student's question that is already in the upcoming exam
• Shakespeare and his syntax: "we hunt not, we"
• Writing rhythm/slash notation on a single line staff?
• Why is it considered terrorism to murder a CEO?
• How does Christine's origin differ in the movie rather than the book?
• Short story where unintelligent people sent to Mars are really crashing on Earth
• Is it normal to connect the positive to a fuse and the negative to the chassis

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html