Difference between col-lg-*, col-md-*, & col-sm-* in Bootstrap 5 ?
Last Updated :
08 Feb, 2024
In Bootstrap 5, col-lg-* classes are used for large screens, col-md-* for medium screens, and col-sm-* for small screens. These classes help to define the width of columns in a responsive grid layout, ensuring content adapts well to different screen
col-lg-*
As we transition to larger screens, col-lg-* becomes crucial. This class allows developers to define the number of columns an element occupies on screens wider than 992 pixels. It ensures content is well-distributed and visually appealing on larger devices.
Syntax:
<div class="col-lg-*">
<!-- Content goes here -->
</div>
Example: Implementation to showcase the use of col-lg-*.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet">
<title>col-lg-* Example</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 bg-primary">
<p>This content is for large screens.</p>
</div>
<div class="col-lg-4 bg-secondary">
<p>This is the sidebar for large screens.</p>
</div>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output:
col-md-*
As we move to medium-sized screens, col-md-* takes center stage. It lets developers specify how many columns an element should span on screens wider than 768 pixels but less than 992 pixels. This class finds a sweet spot, making sure content looks just right on medium-sized devices.
Syntax:
<div class="col-md-*">
<!-- Content goes here -->
</div>
Example: Implementation to showcase the use of col-md-*.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link href=
<title>col-md-* Example</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 bg-success">
<p>This content is for medium screens.</p>
</div>
<div class="col-md-6 bg-warning">
<p>This is additional content for medium screens.</p>
</div>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output:
col-sm-*
On smaller screens, col-sm-* decides how wide columns are. It’s for devices wider than 576 pixels but less than 768 pixels. This class makes sure things look good on smaller devices while staying flexible and keeping the design intact.
Syntax:
<div class="col-sm-*">
<!-- Content goes here -->
</div>
Example: Implementation to showcase the use of col-md-*.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet">
<title>col-sm-* Example</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 bg-info">
<p>
This content spans the full
width on small screens.
</p>
</div>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...