Columns

• Containers are essential elements that encapsulate, provide spacing, and organize your content to ensure proper alignment within various devices or viewports.

• The grid system divides each row into 12 equal template columns, enabling various combinations of elements to span any number of these columns. Column classes specify how many template columns an element will occupy (e.g., col-4 takes up four columns). These widths are defined in percentages, ensuring consistent relative sizing regardless of the screen size.

• The row class creates a horizontal grouping of columns within the grid system. Rows ensure that columns are aligned correctly and provide a way to clear the floats from the columns, ensuring that content is properly aligned and spaced. Using rows, you can structure your layout so that columns stack or align next to each other, depending on the viewport size.

<div class="container">
    //add your code here
</div>

<div class="row">
   <div class="col-6-sm col-4-md col-3-lg col-2-xl">Column 1</div>
   <div class="col-6-sm col-4-md col-3-lg col-2-xl">Column 2</div>
   <div class="col-6-sm col-4-md col-3-lg col-2-xl">Column 3</div>
   <div class="col-6-sm col-4-md col-3-lg col-2-xl">Column 4</div>
   <div class="col-6-sm col-4-md col-3-lg col-2-xl">Column 5</div>
   <div class="col-6-sm col-4-md col-3-lg col-2-xl">Column 6</div>
   <!-- Add more columns as needed -->                  
</div>

<h2 class="mb-2">Grid System</h2>
  <div class="row gap-2 justify-center">
      <div class="col-12-xs col-5-sm col-3-xl">
        <div class="card">
          <img src="" alt="" />
          <h3 class="card-title p-2">A Disappearing Art:</h3>
          <p class="card-body">Bookplates and Hong Kong</p>
        </div>
      </div>
      <div class="col-12-xs col-5-sm col-3-xl">
        <div class="card">
          <img src="" alt="" />
          <h3 class="card-title">Hello, ninjas</h3>
          <p class="card-body">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
          </p>
        </div>
      </div>
      <div class="col-12-xs col-5-sm col-3-xl">
        <div class="card">
          <img src="" alt="" />
          <h3 class="card-title">Hello, ninjas</h3>
          <p class="card-body">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
          </p>
        </div>
      </div>
      <div class="col-12-xs col-5-sm col-3-xl">
        <div class="card">
          <img src="" alt="" />
          <h3 class="card-title">Hello, ninjas</h3>
          <p class="card-body">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
          </p>
        </div>
      </div>
  </div>