What are the Default Column Classes in Bootstrap 5 ?
Last Updated :
16 Feb, 2024
Bootstrap 5 offers default column classes for creating responsive grid layouts. These classes, ranging from col- for extra small devices to col-xl- for extra-large desktops, ensure that content adapts seamlessly across various screen sizes.
Syntax:
<!-- Extra small devices (phones) -->
<div class="col-">
<!-- Small devices (tablets) -->
<div class="col-sm-">
<!-- Medium devices (desktops) -->
<div class="col-md-">
<!-- Large devices (large desktops) -->
<div class="col-lg-">
<!-- Extra large devices (extra-large desktops) -->
<div class="col-xl-">
Key Features:
- Responsive Design: The default column classes cater to various device sizes, ensuring a responsive layout.
- Viewport Breakpoints:
col-
represents the extra small (xs) devices, while col-sm-
, col-md-
, col-lg-
, and col-xl-
correspond to small, medium, large, and extra-large devices, respectively.
Share your thoughts in the comments
Please Login to comment...