Lecture
Notes Of Class 2 - Bootstrap Grid System Basics
Introduction to Bootstrap Grid System
Bootstrap is a popular front-end framework
that helps developers build responsive and mobile-first websites quickly and
easily. The grid system in
Bootstrap is one of its most powerful features, enabling you to create complex
layouts using a simple set of classes.
In this class, we will focus on understanding
the 12-column grid system and how to work with it to
design webpages effectively.
What is the Grid System?
The Bootstrap grid system is based on rows and
columns. It divides the page into 12 equal-width
columns, and you can use these columns to organize content. The number of
columns you use will determine the width of the content on your page.
Key
Concepts:
1. Rows: Rows are horizontal containers for columns.
You need to create rows for organizing your content.
2. Columns: Columns are the building blocks that hold
the content. Each row is divided into 12 columns by default. You can adjust the
width of columns by defining how many columns they should span.
How does the Grid System Work?
·
The grid system is divided into 12
equal-width columns. This means you can divide a row into
12 parts. You can combine multiple columns to span across the grid, making the
layout flexible.
·
For example:
- A single column spanning 12
columns will take up the full width of the row.
- Two columns spanning 6 columns
each will take up half of the row.
- Three columns spanning 4 columns
each will divide the row into three equal parts.
Bootstrap Grid Classes:
Bootstrap uses a set of classes to define the
column widths. The basic format for grid classes is:
csscol-{breakpoint}-{number of columns}Here are the available breakpoints and their
respective classes:
- col-sm: For small devices (≥576px).
The "sm" stands for small.
- col-md: For medium devices (≥768px).
The "md" stands for medium.
- col-lg: For large devices (≥992px).
The "lg" stands for large.
These classes control the layout at different
screen sizes, making your webpage responsive.
You can specify how many columns an element should take up depending on the
screen size.
12-Column Grid System Example:
To understand this better, let's look at an
example of a simple 3-column layout that adjusts for different screen sizes.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Grid Example</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container"> <!-- Row with 3 columns --> <div class="row"> <div class="col-sm-4 col-md-4 col-lg-4"> <div class="p-3 border bg-light">Column 1</div> </div> <div class="col-sm-4 col-md-4 col-lg-4"> <div class="p-3 border bg-light">Column 2</div> </div> <div class="col-sm-4 col-md-4 col-lg-4"> <div class="p-3 border bg-light">Column 3</div> </div> </div></div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script></body></html>
In this example:
- We have created a container
to hold the content.
- Inside the container, we use a row
to group the columns.
- We have three columns
(
col-sm-4 col-md-4 col-lg-4) that each take up 4 columns of the grid, so three columns fit perfectly in one row (4+4+4 = 12).
Breakpoints and Responsive Design:
The grid system allows you to control the
number of columns per row based on the device’s screen size:
- col-sm-4: For small screens (≥576px),
each column takes up 4 grid spaces, resulting in 3 columns per row.
- col-md-4: For medium screens (≥768px),
each column still takes up 4 grid spaces, so the layout stays the same.
- col-lg-4: For large screens (≥992px),
the layout remains unchanged.
Lab Task 1: Create a Simple Webpage Layout
with Rows and Columns
Now, let’s put this knowledge into practice
by creating a webpage layout with multiple rows and columns.
Steps:
1. Create a basic HTML structure with a
container to hold your content.
2. Add a row with three columns, each occupying
4 grid spaces.
3. Experiment with the col-sm, col-md, and col-lg classes to adjust the
layout for different screen sizes.
Example Layout:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid System Lab</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container"> <!-- Row with 3 columns --> <div class="row"> <div class="col-sm-4 col-md-4 col-lg-4"> <div class="p-3 border bg-light">Column 1</div> </div> <div class="col-sm-4 col-md-4 col-lg-4"> <div class="p-3 border bg-light">Column 2</div> </div> <div class="col-sm-4 col-md-4 col-lg-4"> <div class="p-3 border bg-light">Column 3</div> </div> </div> <!-- Another row with different column sizes --> <div class="row"> <div class="col-sm-6 col-md-8 col-lg-6"> <div class="p-3 border bg-light">Column 1</div> </div> <div class="col-sm-6 col-md-4 col-lg-6"> <div class="p-3 border bg-light">Column 2</div> </div> </div></div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script></body></html>
Lab Task 2: Experiment with col-sm, col-md,
and col-lg Classes
In this task, you’ll experiment with the
different grid classes (col-sm,
col-md,
and col-lg)
to control the layout of your columns on different devices.
- Try using different combinations of
these classes to see how the layout adapts to different screen sizes.
For example:
- Change
col-sm-4tocol-sm-6to make each column take up half the screen width on small devices. - Experiment with
col-md-6andcol-lg-3for medium and large devices.
Conclusion:
The Bootstrap Grid System
provides a flexible and responsive way to design webpage layouts. Understanding
how to use rows and columns in combination with the different breakpoints (col-sm, col-md, and col-lg) is key to building
mobile-friendly, responsive websites.
Next Steps:
In the next class, we’ll explore more
advanced grid system concepts and how to nest grids to
create more complex layouts.
Homework/Practice:
- Create a layout with two rows:
- First row: 4 columns (each
col-sm-3).
- Second row: 6 columns (each
col-sm-2).
- Test the layout on different screen sizes to ensure it’s responsive.
No comments:
Post a Comment