Prev Next

BS5 Grid Large

The Bootstrap 5 Grid Large system is tailored for devices with a screen width of 992px or more. Use .col-lg-* classes to define column layouts for large screens.

Key Topics

Basic Large Columns

Create columns for large devices using the .col-lg-* classes.

<div class="container">
    <div class="row">
        <div class="col-lg-6">Large Column 1</div>
        <div class="col-lg-6">Large Column 2</div>
    </div>
</div>

Explanation: The .col-lg-* classes are used to create responsive grid columns for large screens with a width of 992px or more.

Nested Large Columns

Nest rows and columns inside a large column for complex layouts on large screens.

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            Large Parent Column
            <div class="row mt-2">
                <div class="col-lg-6">Nested Column 1</div>
                <div class="col-lg-6">Nested Column 2</div>
            </div>
        </div>
    </div>
</div>

Explanation: Use .col-lg-* classes within nested rows to create advanced layouts for large screens.

Custom Width for Large

Define custom column widths for large devices by specifying the number of grid units using .col-lg-*.

<div class="container">
    <div class="row">
        <div class="col-lg-4">Large Column 1 (4 units)</div>
        <div class="col-lg-8">Large Column 2 (8 units)</div>
    </div>
</div>

Explanation: Adjust column widths for large screens using .col-lg-* classes for precise layouts.

Complete Large Grid Example

Below is a complete example demonstrating the grid system for large devices, including basic, nested, and custom-width columns.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Grid Large Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Grid Large</h2>
        <div class="row mb-3">
            <div class="col-lg-6">Large Column 1</div>
            <div class="col-lg-6">Large Column 2</div>
        </div>
        <div class="row mb-3">
            <div class="col-lg-12">
                Parent Column
                <div class="row mt-2">
                    <div class="col-lg-6">Nested Column 1</div>
                    <div class="col-lg-6">Nested Column 2</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4">Custom Column 1</div>
            <div class="col-lg-8">Custom Column 2</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates how to create grid layouts specifically for large screens using the Bootstrap grid system.

Key Takeaways

  • Use .col-lg-* classes to create responsive grid layouts for large screens (992px and above).
  • Nest rows and columns for advanced layouts on large devices.
  • Customize column widths by defining specific grid units for large screens.
Prev Next