|
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>col-md-* Example</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 bg-success">
<!-- Content for medium screens -->
<p>This content is for medium screens.</p>
</div>
<div class="col-md-6 bg-warning">
<!-- Content for medium screens -->
<p>This is additional content for medium screens.</p>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>col-md-* Example</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 bg-success">
<!-- Content for medium screens -->
<p>This content is for medium screens.</p>
</div>
<div class="col-md-6 bg-warning">
<!-- Content for medium screens -->
<p>This is additional content for medium screens.</p>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<title>col-sm-* Example</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 bg-info">
<!-- Full-width content for small screens -->
<p>
This content spans the full
width on small screens.
</p>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
|
![Bootstrap Interview Questions And Answers [2024]](https://media.geeksforgeeks.org/wp-content/uploads/20240305101350/BOOTSTRAP-INTERVIEW.webp){kind=small}
