Must all content, even if it is just one column, be placed inside rows?

Question

In Bootstrap, must all content- even just a basic block of text placed in the middle of a page for example, be placed inside columns and rows. My website seems to work just fine doing this:

<div class="container-fluid">
   <h2>My Heading</h2> 
   <p>This Is Content On the page</p> 
</div>

Yet, I have been told it should be like this:

<div class="container-fluid">
   <h2>My Heading</h2> 
   <div class="row"> 
      <div class="col">I'm content inside the grid</div> 
   </div> 
</div>

Yet, on some of the templates on the bootstrap site itself, they don't always use columns and rows.

I'm really confused...

Thanks

Rows and cols are grid system provided by bootstrap... so its good if you want to split your website into parts. If you want to use 100% of your container fluid you are good to go :) noone is pushing you into something you dont want to and dont need to do... — Every Screamer, Oct 14 '19 at 13:34
it depends if you want your gutters on it - resize the width of your screen to the size of the text and you will see that it does not line up with the content in the rows and columns — Pete, Oct 14 '19 at 13:41
Related https://stackoverflow.com/questions/29710013/can-i-have-a-bootstrap-col-inside-of-another-col (not a dupe -- just related) - my answer talks about how the .row and .col classes are suggestions but not absolute laws. — TylerH, Oct 14 '19 at 18:25

score 0 · Answer 1 · answered Oct 14 '19 at 14:29

With this basic example everything works fine, especially when the heading is centered. Using different approach for Bootstrap grid is usually not a good idea.

From Bootstrap docs:

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

As alignment problems will occur in the long run.
Secondly when you start using SASS with Bootstrap and change grid variables then everything stays aligned and is controlled from one place.

In your example if you want to align the heading you need to add a margin-left so that is would be aligned with I'm content inside the grid.

Look at this example how everything is aligning with and without rows/columns: https://codepen.io/LaCertosus/pen/KKKzVqR

<div class="container-fluid mt-5">
  <div class="row">
    <div class="col">
      This text is inside <b>row</b> and <b>col</b>
    </div>
  </div>
  <div class="row">
    This text is only inside <b>row</b>
  </div>
  <div class="col">
    This text is only inside <b>col</b>
  </div>
  <div>
    This text is only <b>container</b>
  </div>
</div>
<div>
  This text is outside <b>container</b>
</div>

It is the right question to ask why I have to generate so much boilerplate but it will come out in the long run when elements need to align and scale in different screen sizes.

tao · Accepted Answer · 2019-10-14T15:49:20.127

0

No, not all content needs to be placed in .rows.

.rows and .cols simply provide you with a customizeable grid system (i.e.: number of columns, gutter sizes, responsiveness breakpoints are a few of the things one could customize) aimed at displaying content differently at various page widths. That (and also the division of the row in 12 columns) are what it was designed for.

The only purpose of rows and cols is to divide the space differently at different page widths and to provide some minor padding (gutters). If you don't need that for a part of your content, don't use it. Whenever you have a section which you want displayed according to your own custom rules, you can simply include and style it as you want.

So, for example, this is perfectly valid and can be seen in various Bootstrap examples:

<div class="container">
  <div class="row">
     <div class="col">
       ... normal layout cols here
     </div>
  </div>
  <div> 
     your custom stuff here. you need to provide responsiveness CSS rules for this content.
     Out of the box, being a `<div>`, this will fill all the available width
     if, for example, it was included in a `.container-fluid`, 
     it would span the entire browser window, at all screen widths.
  </div>
  <div class="row">
     <div class="col">
       ... more normal layout here...
     </div>
  </div>

But whenever you want to use .cols, you should place them as direct children of .rows. If you do not, you will see some nasty horizontal scrollbars across your content, because the grid has a system of negative margins and (positive) padding to cater for gutters at various width sizes.

edited Oct 14 '19 at 15:49

answered Oct 14 '19 at 14:44

tao

82,996
16
114
150

Thank you so much for you help :) It sounds like I'm going to keep it simple and avoid the whole column system for my home page since I don't need to. Is a suitable system for styling margins etc using the @media tag for different viewport widths okay when using a fluid container? I like to be able to have control over the left and right margins separately which I can't seem to do with a normal .container and break points. I know it seems silly that I'm trying to turn a .container-fluid into a .container – S.Stevens Oct 14 '19 at 16:58
Don't fight Bootstrap. As a general rule, it is a better approach to not apply a particular class from Bootstrap than apply it and then override it. If you need some of the rules it applies, it is a better approach to make your own class, copy the code applying to the one you want and omit/change the parts you want different. This is particularly true when you're dealing with `!important` rules from Bootstrap, which are a huge mistake. One of the good things about older versions of Bootstrap was that it kept the specificity level low. Not anymore. – tao Oct 14 '19 at 19:05
Ah I see, thank you. I have been avoiding !important for this reason. So say for example, I wanted to change the standard padding for the .container class, what is the best way to do this? – S.Stevens Oct 14 '19 at 21:00
I already told you: the best way to do it is *not* to do it. But don't take my advice. Do it. You'll end up learning CSS, which is a good thing. – tao Oct 15 '19 at 00:45
Ah I see, so the general idea of using bootstrap is to just use their CSS and deal with it, even if you don't like the inbuilt colours etc? – S.Stevens Oct 15 '19 at 16:24
Bootstrap allows customization by overriding the [variable defaults](https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults). – tao Oct 15 '19 at 20:56
Ah I see, I have been doing something similar in my own custom style sheet. But, for example have been doing .body{blah blah blah}, I take it that way is much faster and more efficient? – S.Stevens Oct 15 '19 at 22:02

Must all content, even if it is just one column, be placed inside rows?

2 Answers2