• 01666-222229
  • info@practicise.com
  • Sircl Tech Pvt. Ltd, Red Light Chowk, Sirsa
Search
Close this search box.
Course Content
Bootstrap
0/4
Introduction
00:00
how to use bootstrap 5?
00:00
Containers
00:00
Grid System
00:00
Typography
0/4
Introduction
00:00
h1-h6 tag, display headings and small tag
00:00
HTML Elements
00:00
Bootstrap typography classes
00:00
Colors
0/3
Introduction
00:00
Text Colors
00:00
Background colors
00:00
Tables
0/5
Introduction
00:00
Tables
00:00
Black and Dark Tables
00:00
Contextual Classes
00:00
Small and Responsive Table
00:00
Images
0/2
Introduction
00:00
Aligning Images
00:00
Bootstrap 5 Alerts
0/1
Alerts
00:00
Buttons
0/2
Buttons
00:00
Button Groups
00:00
Badges
0/2
Badges
00:00
Badge Sizing and Badge use with JavaScript
00:00
Bootstrap
About Lesson

What is Grid System:

The grid system in Bootstrap is a powerful layout tool that allows you to create responsive and flexible designs by dividing a webpage into a series of rows and columns.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

Grid Classes:

The Bootstrap 5 grid system has six classes:

  1. .col– (extra small devices – screen width less than 576px)
  2. .col-sm– (small devices – screen width equal to or greater than 576px)
  3. .col-md– (medium devices – screen width equal to or greater than 768px)
  4. .col-lg– (large devices – screen width equal to or greater than 992px)
  5. .col-xl– (xlarge devices – screen width equal to or greater than 1200px)
  6. .col-xxl– (xxlarge devices – screen width equal to or greater than 1400px)

The classes above can be combined to create more dynamic and flexible layouts.

Example:

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Grid Example</title>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col" style="background-color: purple;">
                Column 1
            </div><br><br>
            <div class="col" style="background-color: orangered;">
                Column 2
            </div><br><br>
            <div class="col" style="background-color: orange;">
                Column 3
            </div>
        </div>
        <br><br>
        <div class="row">
            <div class="col-sm-3" style="background-color: aquamarine;">
                Column 1
            </div>
            <div class="col-sm-4" style="background-color: pink;">
                Column 2
            </div>
            <div class="col-sm-5" style="background-color: red;">
                Column 3
            </div>
        </div>
        <br><br>
        <div class="row">
            <div class="col" style="background-color: rgb(14, 203, 156);">
                Column 1
            </div>
            <div class="col" style="background-color: rgb(14, 132, 182);">
                Column 2
            </div><br><br>
            <div class="col" style="background-color: rgb(60, 189, 25);">
                Column 3
            </div>
            <br><br>
    </div>
</body>

</html>

Output:

Previous
Next