Bootstrap Grid – Small Devices

In today’s mobile-first world, designing layouts that work seamlessly on smaller screens is crucial. Bootstrap’s grid system provides a responsive framework that adapts perfectly to small devices (≥768px) such as tablets and small laptops.

In this guide from TheCodingCollege.com, we’ll show you how to use the .col-sm-* classes to create responsive, visually appealing layouts for small screens.

What Are Small Devices in Bootstrap?

Bootstrap categorizes screen sizes into breakpoints to allow layouts to adapt across different devices. The sm (small) breakpoint applies to devices with a minimum width of 768px and a maximum width of 991px.

BreakpointScreen SizeExample Devices
.col-xs-*Extra small (<768px)Phones
.col-sm-*Small (≥768px and <992px)Tablets, small laptops
.col-md-*Medium (≥992px)Desktops
.col-lg-*Large (≥1200px)Large desktops

Using the Grid System for Small Devices

The .col-sm-* classes in Bootstrap allow you to define layouts for small screens and above. If a smaller screen (e.g., phones) needs a different layout, you can also include .col-xs-* for fine-tuned control.

Example: Basic Grid for Small Devices

Here’s an example of a simple layout where columns stack on smaller screens (phones) and align horizontally on small screens (tablets) and larger.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid for Small Devices</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <style>
        .box {
            text-align: center;
            padding: 20px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Bootstrap Grid for Small Devices</h1>
        <div class="row">
            <div class="col-xs-12 col-sm-4 box" style="background-color: lightblue;">Column 1</div>
            <div class="col-xs-12 col-sm-4 box" style="background-color: lightgreen;">Column 2</div>
            <div class="col-xs-12 col-sm-4 box" style="background-color: lightcoral;">Column 3</div>
        </div>
    </div>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>

Explanation:

  1. For Extra Small Devices (Phones):
    • .col-xs-12: Each column takes up the full width (12 columns), stacking vertically.
  2. For Small Devices and Above (Tablets):
    • .col-sm-4: Each column occupies 4 out of 12 grid spaces, aligning horizontally.

Offset Columns for Small Devices

You can add spacing between columns by using the .col-sm-offset-* class. This is particularly useful for centering content.

Example:

<div class="row">
    <div class="col-sm-4 col-sm-offset-4 box" style="background-color: lightgray;">Centered Column</div>
</div>

Nested Grids for Small Devices

Bootstrap allows grids to be nested inside other grids, making it easy to create more complex layouts.

Example:

<div class="row">
    <div class="col-sm-6 box" style="background-color: lightblue;">
        Parent Column
        <div class="row">
            <div class="col-sm-6 box" style="background-color: lightyellow;">Nested 1</div>
            <div class="col-sm-6 box" style="background-color: lightgray;">Nested 2</div>
        </div>
    </div>
    <div class="col-sm-6 box" style="background-color: lightgreen;">Column 2</div>
</div>

Advanced Techniques for Small Devices

1. Custom Column Widths

You can mix column widths to create unique layouts for small devices:

<div class="row">
    <div class="col-sm-3">25% Width</div>
    <div class="col-sm-6">50% Width</div>
    <div class="col-sm-3">25% Width</div>
</div>

2. Hidden and Visible Columns

Use visibility utility classes to show or hide columns on specific devices:

<div class="col-sm-4 hidden-xs">Visible on Tablets and Larger</div>
<div class="col-xs-12 visible-xs">Visible Only on Phones</div>

3. Fluid Containers

For full-width layouts on small devices, replace .container with .container-fluid:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">Full-Width Column</div>
        <div class="col-sm-6">Full-Width Column</div>
    </div>
</div>

Common Issues and Fixes

  1. Columns Not Aligning Properly:
    • Ensure you’ve wrapped your columns in a .row class.
    • Check for missing or incorrect grid classes.
  2. Unexpected Spacing or Overflow:
    • Use .container or .container-fluid to control column spacing.
    • Test layouts on actual devices or using developer tools.

Best Practices for Small Device Layouts

  1. Mobile-First Approach:
    • Start with .col-xs-* classes and build up to .col-sm-* for larger screens.
  2. Test Extensively:
    • Use tools like Chrome DevTools to simulate small device viewports.
    • Test on real devices for accurate results.
  3. Avoid Over-Nesting:
    • Simplify your layout structure for better performance and readability.

Conclusion

Designing for small devices is essential for building modern, responsive websites. With Bootstrap’s grid system, you can create layouts that look great on tablets, small laptops, and even larger screens. By mastering .col-sm-* classes, you ensure your designs are user-friendly and mobile-ready.

Leave a Comment