How to make grid in Bootstrap ?

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=""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">
- 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>
- 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:
  • You can use .col-auto to automatically adjust the width of a column based on its content.
  • Use .offset-* classes to add space between columns.
  • Use .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.