CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user4746908
user4746908

Reputation:

How rows are handled in bootstrap

I have a question about what would cause the following error in bootstrap 3. Earlier I was writing some HTML and using CSS to style and was using bootstrap 3 for the rows and the columns.

Now I had everything inside of a fluid container and the container had margins etc. It has a standard header, and each row was split into two columns where each size has a width of 6 ie col-lg-6 .... inside of the container and then I had labels and inputs inside of my rows. Just a basic layout.

Now, whenever I tried to give a bottom border to each row I noticed that after inspecting the element the row was actually outside of the designated columns / div.

However, when I changed the class from row to row-fluid it works perfectly. Why is this? Also, I noticed that if I make a clear-fix div after using row-fluid it fixes some apparent spacing issues, is this a requirement when using row-fluid or is my code just messed up somewhere.

Asking, because I thought row-fluid was only a bootstrap 2 and not a 3 thing, or am I mistaken?

I would include a fiddle showing you exactly what I'm talking about, but don't have the code available atm.

Upvotes: 0

Views: 142

Answers (1)

Daniel De Alday
Daniel De Alday

Reputation: 34

TWBS-2 http://getbootstrap.com/2.3.2/scaffolding.html#global

TWBS-3 http://getbootstrap.com/css/#grid-intro

The <div> nested under your <div class="row"> carry the attributes container width dependent on viewport size, including all gutters and padding.

Comparing TWBS-2 and TWBS-3, TWBS-3's grid framework is designated as fluid for all viewport sizes. .row-fluid is not documented as an option, but I would refer to their version history for those specific changes. If the version history of the <div class="row-fluid"> applies, then the gutters and padding of its children's <div> columns becomes full-width to the size of the container rather than fixed-width as designated by the rules of the TWB-S3 grid system without .row-fluid designation.

Upvotes: 1

Related Questions