❮ Previous Next ❯

Alignment & Order

  • Control alignment and column order using Bootstrap flex utilities.

  • Introduction to Alignment & Order in Bootstrap

    After learning containers, rows, columns, responsive layouts, and nested grids, the next challenge is fine control:

    • How do you push a column to the right ? 

    • How do you change column order on mobile vs desktop ?

    • How do you center content vertically ?

    • How do you align items horizontally within a row ?

    Bootstrap provides offset, order, and alignment utilities to solve these problems cleanly, without writing custom CSS.

    Offset Classes (Shifting Columns Horizontally)

    What Is an Offset ?

    An offset creates empty space to the left of a column.

    In simple terms:

    • Offset means “skip columns before placing this column”

    • It pushes content to the right

    • It is based on the same 12-column grid

    Why Offset Classes Are Needed

    Offsets are useful when:

    • You want centered content without extra wrappers

    • You want asymmetrical layouts

    • You want spacing without empty columns

    • You want layout balance

    Offsets avoid unnecessary markup.

Offset Classes

offset-3 skips 3 columns on the left and places the col-6 in the center, creating a balanced layout using the 12-column grid system. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offset Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row text-center">
      <div class="col-6 offset-3 bg-primary text-white p-4">
        Centered Column
      </div>
    </div>
  </div>

</body>
</html>

  • Explanation:

    • col-6 → column takes 6 units

    • offset-3 → skips 3 units on the left

    • Remaining space = 3 units on the right

    • Result → centered column

Offset with Multiple Columns (Shifted Layout)

offset-2 creates empty space before Column A, shifting it to the right while maintaining proper alignment within the 12-column grid system. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offset Multiple Columns</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row text-center">
      <div class="col-4 offset-2 bg-primary text-white p-3">
        Column A
      </div>
      <div class="col-4 bg-success text-white p-3">
        Column B
      </div>
    </div>
  </div>

</body>
</html>

  • Explanation:

    • First column starts after 2 grid units

    • Layout becomes visually balanced

      Responsive Offset Classes

    Responsive Offset Example

    The column takes full width on mobile and becomes centered (6 columns wide with 3-column offset on each side) from medium screens and above. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Offset</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row text-center">
      <div class="col-12 col-md-6 offset-md-3 bg-primary text-white p-4">
        Responsive Center
      </div>
    </div>
  </div>

</body>
</html>

    • This is a very common real-world pattern.

      Order Classes (Reordering Columns)

      What Are Order Classes ?

      Order classes control the visual order of columns without changing HTML structure.

      Important concept:

      • HTML order stays the same

      • Visual order changes using CSS

      This is extremely useful for responsive design.

      Why Order Classes Are Important

      Order classes allow you to:

      • Show important content first on mobile

      • Rearrange layout for desktop

      • Maintain logical HTML for accessibility

      • Avoid duplicate markup

    Basic Column Reordering using order

    order-1 and order-2 change the visual position of columns without changing the HTML structure. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Order Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row text-center">
      <div class="col order-2 bg-primary text-white p-3">
        Second
      </div>
      <div class="col order-1 bg-success text-white p-3">
        First
      </div>
    </div>
  </div>

</body>
</html>

    • Result:

      • Second column appears before first

      • HTML order is unchanged

    Responsive Order Control

    On mobile, the sidebar appears first and content second. From medium screens and above, the main content appears first and sidebar second. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Order Control</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row text-center">

      <div class="col-12 col-md-8 order-2 order-md-1 bg-primary text-white p-4">
        Main Content
      </div>

      <div class="col-12 col-md-4 order-1 order-md-2 bg-secondary text-white p-4">
        Sidebar
      </div>

    </div>
  </div>

</body>
</html>

    • Behavior:

      • Mobile: sidebar appears first

      • Desktop: main content appears first

      This pattern is widely used in blogs and dashboards.

    Auto Order Classes

    order-first moves a column to the beginning and order-last moves it to the end, without changing the HTML structure. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto Order Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row text-center">

      <div class="col order-last bg-primary text-white p-3">
        Last
      </div>

      <div class="col order-first bg-success text-white p-3">
        First
      </div>

      <div class="col bg-warning text-dark p-3">
        Middle
      </div>

    </div>
  </div>

</body>
</html>

    • These utilities provide quick reordering without numbers.

      Horizontal Alignment (Along the X-Axis)

      Horizontal Alignment Using Rows

      Bootstrap rows use Flexbox internally.

      Horizontal alignment controls how columns align left to right.

      Common classes:

      • justify-content-start

      • justify-content-center

      • justify-content-end

      • justify-content-between

      • justify-content-around

      • justify-content-evenly

    Horizontal Alignment in Bootstrap (Center & Space Between)

    justify-content-center centers columns horizontally, while justify-content-between places columns at opposite ends with space distributed between them. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Alignment Examples</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">

    <!-- Centered Columns -->
    <div class="row justify-content-center text-center mb-4">
      <div class="col-4 bg-primary text-white p-3">
        Centered
      </div>
    </div>

    <!-- Space Between Columns -->
    <div class="row justify-content-between text-center">
      <div class="col-3 bg-success text-white p-3">
        Left
      </div>
      <div class="col-3 bg-danger text-white p-3">
        Right
      </div>
    </div>

  </div>

</body>
</html>

    • These utilities control distribution of columns inside a row.

    Responsive Horizontal Alignment

    The column is centered on small screens and becomes left-aligned starting from medium screens and above. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Horizontal Alignment</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row justify-content-center justify-content-md-start text-center">
      <div class="col-4 bg-primary text-white p-3">
        Aligned
      </div>
    </div>
  </div>

</body>
</html>

    • Behavior:

      • Mobile: centered

      • Tablet and above: left aligned

      Vertical Alignment (Along the Y-Axis)

      Vertical Alignment Concept

      Vertical alignment controls how columns align top to bottom inside a row.

      This is useful when:

      • Columns have different heights

      • Content needs vertical centering

      • Cards must align neatly

      Vertical Alignment Classes

      Applied on the row:

      • align-items-start

      • align-items-center

      • align-items-end

    Vertical Alignment

    align-items-center vertically centers columns inside the row using Flexbox alignment. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vertical Alignment</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row align-items-center text-center bg-light" style="height: 200px;">
      <div class="col bg-primary text-white p-3">
        Centered vertically
      </div>
    </div>
  </div>

</body>
</html>

    • Aligning Individual Columns

      You can also align a single column differently.

    Aligning Individual Columns

    align-self-start, align-self-center, and align-self-end allow individual columns to control their own vertical alignment inside a row. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Align Individual Columns</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row text-center bg-light" style="height: 200px;">
      <div class="col align-self-start bg-primary text-white p-3">
        Top
      </div>
      <div class="col align-self-center bg-success text-white p-3">
        Center
      </div>
      <div class="col align-self-end bg-danger text-white p-3">
        Bottom
      </div>
    </div>
  </div>

</body>
</html>

    • This gives fine-grained vertical control.

      Combining Offset, Order, and Alignment

    Combining Offset, Order & Alignment in One Layout

    This layout centers content, changes order based on screen size, and applies an offset on medium screens and above — combining alignment, order, and spacing in one responsive design. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Combined Grid Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container" style="height: 300px;">
    <div class="row justify-content-center align-items-center h-100 text-center">
      
      <div class="col-6 offset-md-3 order-2 order-md-1 bg-primary text-white p-4">
        Content
      </div>

    </div>
  </div>

</body>
</html>

    • This creates:

      • Responsive centering

      • Responsive reordering

      • Clean alignment

      • Minimal markup

       Common Mistakes

      1. Using offsets instead of alignment utilities

      2. Forgetting responsive order behavior

      3. Reordering content incorrectly for accessibility

      4. Overusing offsets when grid math is simpler

      5. Mixing layout logic inconsistently

      Understanding intent prevents layout confusion.

    ❮ Previous Next ❯