Assignments Of Class 2 - Bootstrap Grid System Basics
Assignment 1: Create a 3-Column Layout with Bootstrap Grid System
Objective: Create a simple webpage layout with three columns, where each column will take up 4 grid spaces. Ensure that the layout is responsive across different screen sizes using col-sm, col-md, and col-lg classes.
Steps:
1. Create a Basic HTML Structure: Start by setting up a basic HTML page with the necessary Bootstrap CSS link for styling.
2. Create a Container: Inside the body, create a container div to hold your layout content.
3. Define the Row: Inside the container, create a row div that will hold the columns.
4. Create Three Columns: Within the row, create three div elements, each with the class col-sm-4, col-md-4, and col-lg-4 to define the column sizes. Each column will take up 4 grid spaces (making the sum 12).
5. Add Content to Columns: Add content like text or a background color to each column to make it visually clear.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3-Column Layout</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>Explanation:
col-sm-4,col-md-4,col-lg-4: These classes define that each column will take up 4 grid spaces (out of 12) on small, medium, and large screens.p-3 border bg-light: These classes add padding, borders, and light background color to make the columns visible and more readable.
Assignment 2: Experiment with Different Column Sizes for Mobile and Desktop Views
Objective: Create a layout where the number of columns changes based on the screen size. On small devices, you should display 2 columns. On medium and large devices, you should display 4 columns.
Steps:
1. Start with a Basic HTML Structure: Create a basic HTML page and include the Bootstrap CDN for styling.
2. Create a Container and Row: Set up a container div, and inside it, add a row for columns.
3. Define the Columns: Use col-sm-6 for small screens (which means each column takes up half of the available width) and col-md-3 for medium and larger screens (which means each column takes up 3 grid spaces).
4. Add Content to Columns: Add content to each column, such as text or images.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Columns</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container"> <!-- Row with responsive columns --> <div class="row"> <div class="col-sm-6 col-md-3"> <div class="p-3 border bg-light">Column 1</div> </div> <div class="col-sm-6 col-md-3"> <div class="p-3 border bg-light">Column 2</div> </div> <div class="col-sm-6 col-md-3"> <div class="p-3 border bg-light">Column 3</div> </div> <div class="col-sm-6 col-md-3"> <div class="p-3 border bg-light">Column 4</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>Explanation:
col-sm-6: On small devices, each column takes up 6 grid spaces (50% of the row), so 2 columns fit in a row.col-md-3: On medium and large devices, each column takes up 3 grid spaces, allowing 4 columns per row.
Assignment 3: Nested Grid Layout
Objective: Create a layout where you use a 2-column layout inside one of the columns. This will require using nested grid systems.
Steps:
1. Set Up the Basic Structure: Create a webpage with a container, row, and initial set of columns.
2. Add Nested Row: In one of the columns, add another row with two columns.
3. Adjust Column Sizes: Use col-sm-6 for the nested columns to ensure they are of equal width.
4. Add Content: Add content to both the outer and nested columns.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nested Grid Layout</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container"> <!-- Row with 2 columns --> <div class="row"> <div class="col-sm-6"> <div class="p-3 border bg-light">Column 1</div> </div> <div class="col-sm-6"> <!-- Nested row with 2 columns --> <div class="row"> <div class="col-sm-6"> <div class="p-3 border bg-light">Nested Column 1</div> </div> <div class="col-sm-6"> <div class="p-3 border bg-light">Nested Column 2</div> </div> </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>Explanation:
- The outer columns use
col-sm-6, meaning each will take up half the available width on small screens. - Inside the second column, there is a nested row with two nested columns, each using
col-sm-6to take up half the width of the parent column.
Assignment 4: Create a Complex Layout with Multiple Rows and Different Column Sizes
Objective: Design a complex layout with multiple rows. In each row, use different column sizes for various screen widths (small, medium, and large).
Steps:
1. Set Up the HTML Structure: Start with a basic HTML structure and link to Bootstrap.
2. Create Multiple Rows: Create three rows. In each row, vary the column sizes by combining col-sm, col-md, and col-lg classes.
3. Adjust Column Sizes: Experiment with different column spans such as col-sm-4, col-md-6, and col-lg-3.
Solution:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Complex Layout</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container"> <!-- Row 1 --> <div class="row"> <div class="col-sm-4 col-md-6 col-lg-3"> <div class="p-3 border bg-light">Column 1</div> </div> <div class="col-sm-8 col-md-6 col-lg-9"> <div class="p-3 border bg-light">Column 2</div> </div> </div> <!-- Row 2 --> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-2"> <div class="p-3 border bg-light">Column 3</div> </div> <div class="col-sm-6 col-md-4 col-lg-8"> <div class="p-3 border bg-light">Column 4</div> </div> </div> <!-- Row 3 --> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="p-3 border bg-light">Column 5</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>Explanation:
- Different column sizes are applied across three rows. The classes
col-sm-4,col-md-6,col-lg-3, etc., adjust the number of columns based on the screen size. - The columns in Row 1 and Row 2 have different proportions based on the viewport size, and Row 3 has a full-width column.
No comments:
Post a Comment