Bootstrap - Do We Have to Use Rows and Columns

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>

Bootstrap Rows and Columns - Do I need to use row?

Bootstrap 5 (update 2022)

Technically row isn't required in Bootstrap 5 since columns can be used standalone to set width, However, row is still needed for the flexbox grid system which is primary how columns are used.

---

Bootstrap 3, Bootstrap 4 (original answer)

Bootstrap Rows and Columns - Do I need to use row?

Yes, you need to use row.

---

Update 2018

The row>col relationship is the same in both Bootstrap 3 and 4 in that..

"only columns may be immediate children of rows"

So, the nested columns (.col-*) must also be inside a .row:

<div class="row">
  <div class="col-xs-12">
    <div class="row">
       <div class="col-xs-4">some content</div>
       <div class="col-xs-8">some other content</div>
    </div>
  </div>
</div>

As you can see here you should always use the row. This is very important in Bootstrap 4 because the columns will simply stack (wrap) vertically if not placed inside a .row. The .row has a negative margin of 15px on either side, so the benefit is that..

• 100% width content inside container
• separate content into rows (force cols to be on line)
• nest the grid row>col and maintain alignment on outer sides

---

From the Bootstrap 3 Docs...

Content should be placed within columns, and only columns may be
immediate children of rows.

From the Bootstrap 4 Docs...

Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This padding
is then counteracted on the rows with negative margins. This way, all
the content in your columns is visually aligned down the left side... content must be placed within columns and only columns may be immediate children of
rows.

---

https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc

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.

Bootstrap - does all 'rows' MUST be followed with a column?

Yes, you probaly want the col. Inspect it with your browser's developer tools. You'll see margin /padding and other styling gets applied to .col-* to get things to line up properly.

The .row class primarily provides the "float clearing" that columns provide.

Columns as you know allow for a variety of "grid layout" widths / sizes, and automatically adjust to responsive browser size needs.

Run the snippet below to see the difference (click the "Full Page" link, otherwise it's compressed into a small view). (Note that I've added borders to rows / cols to highlight what's going on):

.row {

  border: 1px solid red;

}

[class^="col-"] {

  border: 1px solid black;

}

.other {

  border: 1px solid blue;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <div class="row">

    <div class="col-sm-12">

      This is a row with a full-width column.

    </div>

  </div>

  <div class="row">

    <div class="col-sm-4">

      This row has a few smaller column.

    </div>

    <div class="col-sm-4">

      This row has a few smaller column.

    </div>

    <div class="col-sm-4">

      This row has a few smaller column.

    </div>

  </div>

  <div class="row">

    This row has no columns.

  </div>

  <div class="other">This has no columns nor rows.</div>

</div>

Bootstrap 4 correct way to use row and col classes

For the second row instead of that should I have to wrap that button inside a column. Like this

Yes, only a Bootstrap column is allowed to be a direct child of a Bootstrap row.

So, in every Bootstrap row, you must have at least one Bootstrap column and all of your content must go into Bootstrap columns and never into Bootstrap rows directly.

This is because Bootstrap rows and columns are designed to work in pairs i.e. no content may ever be placed directly into a Bootstrap row. Only Bootstrap columns may be direct children of Bootstrap rows.

Reference:

https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap 4 layout row first vs column first?

Yes, it's totally valid to use nested columns/row. Just be sure to always use a column inside a row. Else you'll get unexpected layouts.

<div class="col">
  <div class="row">
    <div class="col">
      <div class="row">
        <div class="col">
          <div class="row">
            <div class="col">
            <!-- Your content goes here -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

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.

columns in a row with space between them in bootstrap

By default bootstrap col has padding from left and right.
If it not coming, mean you defined some padding in cart-col class.
So, try this->

<div class="col-lg-3 col-md-3 col-xs-12">
    <div class="cart-col">

    </div>
</div>

If you need space like margin-buttom, Put gy-4 in row class.
Hope this will work.

Is it fine if I use Bootstrap rows as flex containers for its child divs, instead of using columns?

In theory, you can use almost anything as flex containers, but .rows in Bootstrap are specially configured as flex containers with negative margins that go well with .col-* classes. Hence I would suggest you stick with this .row and .col-* combinations.

If you want to build a flex container yourself, there are Bootstrap built-in classes you can use, e.g., d-flex, to quickly turn the element into a flexbox.

You can center an element vertically and horizontally if you have the following in its parent:

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

And again, there are Bootstrap built-in classes for those as well:

<div class="row">
    <div class="col d-flex justify-content-center align-items-center">
        <p>Your Content</p>
    </div>
</div>

I'm not sure if you think that's quick enough though...

---

Related Topics