Rows

Rows are horizontal wrappers for columns. They ensure columns are lined up properly and handle spacing.

Basic Row

<div class="container">
    <div class="row">
        <div class="col-md-6">Left</div>
        <div class="col-md-6">Right</div>
    </div>
</div>

What Rows Do

• Create horizontal groups of columns
• Apply negative margins (-15px) to align with the container's padding
• Ensure columns wrap properly when they exceed 12 columns

Multiple Rows

<div class="container">
    <div class="row">
        <div class="col-md-4">A</div>
        <div class="col-md-4">B</div>
        <div class="col-md-4">C</div>
    </div>
    <div class="row">
        <div class="col-md-6">D</div>
        <div class="col-md-6">E</div>
    </div>
</div>

Column Wrapping

If columns in a row add up to more than 12, the extra columns wrap to a new line:

<div class="row">
    <div class="col-md-8">8 columns</div>
    <div class="col-md-6">6 columns (wraps to next line!)</div>
</div>

Rules

• Always place columns inside rows
• Always place rows inside containers
• Only columns should be direct children of rows
• Content goes inside columns, never directly in rows