Twitter Bootstrap Question posted in

Is using twitter bootstrap column classes outside rows a good idea?

I’m trying to improve my project’s HTML structure and I found something along these lines: 

<div class="full-sidebar">
   <div class="col-xs-12"></div>
</div>

Where “full-sidebar” is a custom class.
What I’ve been wondering is: is it a good idea to do so? Would I be better off in wrapping the column divs in a row? It just feels “wrong” done in the current way.

Tags:

4

Answers


  1. 0

    I know of at least one reason to use a row.

    “cols-” are floated and wrapping them in a row adds a clear after all columns. This prevents subsequent content from potentially overlapping with your columns. Additionally, it also ensures the row’s height is equivalent to the height of the column content. If you don’t clear the columns’ container, then the container will not include the column in its own height.

    Note that “col-” is only floated at widths greater than 992px. So you’ll only run into content overlap issues above that limit. See this fiddle.

    HTML:

    <div class="norow">
   <div class="col-md-6"></div>
   <div class="col-md-6"></div>
</div>

    CSS:

    .row {
  border: 2px solid yellow;
}
.norow {
  border: 2px solid green;
}

.col-md-6 {
  height: 50px;
  border: 2px solid red;
}

    Also, as others have mentioned, col padding and margins are designed to work in conjunction with row padding and margins.

    Login or Signup to reply.
  2. 0

    You should always wrap <div class="col-xs-12"></div> inside <div class="row"></div>.

    Reason-1

    That’s the bootstrap grid-system. We use bootstrap to make a layout clean and responsive. It doesn’t create any harm if you do so.

    Reason-2

    If you don’t wrap within <div class="row"></div> it will create unnecessary problem in near future once your layout grows long. You won’t be able to keep a track of your layout.

    so, in general it is good to wrap it inside <div class="row"></div>, if you don’t have a solid reason for not doing it.

    Hope this helps!

    Login or Signup to reply.
  3. 0

    Is using twitter bootstrap column classes outside rows a good idea?

    No.

    Bootstrap col-* should only be used within row. From the docs..

    Use rows to create horizontal groups of columns.

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

    Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

    Also see: Bootstrap Rows and Columns – Do I need to use row?

    Login or Signup to reply.
  4. 0

    Actually it is not standard procedure to use bootstrap column classes outside the row. It might disturb the layout of the column design. In bootstrap css file each column class has assigned different width percentage according to their use. If you use column classes outside the row class it may form different or disturbed layout than actual layout prescribed by the bootstrap. So it is not a good practice to do.

    Grid System Rules
    Some Bootstrap grid system rules specified by w3Schools.com

    • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
    • Use rows to create horizontal groups of columns
    • Content should be placed within columns, and only columns may be immediate children of rows
    • Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
    • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
    • Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search