Bootstrap 5 Grid System Options is a responsive grid system that allows you to create flexible and dynamic layouts for your website. The grid system options are flexible enough to respond to both the six built-in breakpoints and any custom ones.
Grid System Options Classes:
- .col: This is the base class for all grid columns. It is used to set the width of a column and the breakpoint at which it will become full width.
- .col-xs: This class is used for the extra small device(screen widths less than 576px).
- .col-sm: This class is used for small devices (screen widths equal to or greater than 576px).
- .col-md: This class is used for medium devices (screen widths equal to or greater than 768px).
- .col-lg: This class is used for large devices (screen widths equal to or greater than 992px).
- .col-xl: This class is used for extra large devices (screen widths equal to or greater than 1200px).
- .col-xxl: This class is used for extra large devices (screen widths equal to or greater than 1400px).
Syntax:
<div class="col-[breakpoint]-[width] [other-classes]">
...
</div>
Where,
- breakpoint: is the name of the breakpoint, such as sm, md, lg, xl, or xxl.
- width: the number of columns that the element should occupy at the specified breakpoint.
- other-classes: This denotes any other classes that you want to add to the element.
Example1:In this example, we have a container element that holds a row with three columns. Here’s a breakdown of the Bootstrap grid classes used:
- col-lg-4: The first and second columns will take 4 grid columns each on large screens and above.
- col-md-6: The first and second columns will take 6 grid columns each on medium screens.
- col-sm-12: The first and second columns will take 12 grid columns each on small screens and below.
- col-lg-4 col-md-12 col-sm-12: The third column will take 4 grid columns on large screens and above, and 12 grid columns on medium and small screens.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
<title>
Bootstrap 5 Grid System Options Example
</title>
</head>
<body>
<div class="container">
<h1>
Bootstrap 5 Grid System Options Example
</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card bg-secondary">
<div class="card-body">
<h5 class="card-title">
Column 1
</h5>
<p class="card-text">
This is the content of column 1.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card bg-primary">
<div class="card-body ">
<h5 class="card-title">
Column 2
</h5>
<p class="card-text ">
This is the content of column 2.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title ">
Column 3
</h5>
<p class="card-text ">
This is the content of column 3.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
- The first row contains three columns, each taking equal space (col class).
- The second row contains two half-width columns on medium-sized screens and larger (col-md-6 class).
- The third row contains three one-third-width columns on large screens and larger (col-lg-4 class).
HTML
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href=
<title>Bootstrap 5 Grid Example</title>
</head>
<body>
<div class="container">
<h1>
Bootstrap 5 Grid System Options Example
</h1>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body bg-primary">
Column 1
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body bg-primary">
Column 2
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body bg-primary">
Column 3
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body bg-secondary">
Half-width Column 1
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body bg-secondary">
Half-width Column 2
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="card">
<div class="card-body bg-info">
One-third Column 1
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body bg-info">
One-third Column 2
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body bg-info">
One-third Column 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.2/layout/grid/#grid-options