Creating a Grid with Bootstrap
Bootstrap provides a powerful and flexible grid system to help you layout your web pages. Here's how to create a grid using Bootstrap:
1. Include Bootstrap:
First, you need to include the Bootstrap CSS and JavaScript files in your HTML document. You can download Bootstrap from its official website or use a CDN like jsDelivr:
HTML
<!DOCTYPE html>
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Bootstrap Grid Example</title><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"crossorigin="anonymous"></head> <body>
----
2. Add a Container:
Wrap your content in a .container class. This class sets the width of the content area and provides padding on each side.
HTML
<div class="container">
</div>
</body>
</html>
-
3. Create Rows and Columns:
Use .row class for each row you want to create. Inside each row, use .col-* classes to define the number of columns and their widths.
For example, to create a two-column layout with equal width, you would use the following code:
HTML
<div class="container">
<div class="row">
<div class="col-6">Column 1 content</div>
<div class="col-6">Column 2 content</div>
</div>
</div>
</body>
</html>
-
Column Classes:
.col-xs-* - Extra small devices (<576px).col-sm-* - Small devices (≥576px).col-md-* - Medium devices (≥768px).col-lg-* - Large devices (≥992px).col-xl-* - Extra large devices (≥1200px)Additional Options:
.col-auto to automatically adjust the width of a column based on its content..offset-* classes to add space between columns..row-cols-* class to create a responsive grid with a specific number of columns on different devices.Resources:
By following these steps, you can easily create responsive and flexible layouts with Bootstrap's grid system.