@ussebastian/kitdigital/docs/components/layout/bootstrap-grid-3.html

Kit Digital de la Universidad San Sebastián

<section class="container">
  <div class="row">
    <div class="example-container col-2 col-sm-12">
      <div class="example-content">col-2 / col-sm-12</div>
    </div>
    <div class="example-container col-2 col-sm-6">
      <div class="example-content">col-2 / col-sm-6</div>
    </div>
    <div class="example-container col-2 col-sm-6">
      <div class="example-content">col-2 / col-sm-6</div>
    </div>
    <div class="example-container col-2 col-sm-4">
      <div class="example-content">col-2 / col-sm-4</div>
    </div>
    <div class="example-container col-2 col-sm-4">
      <div class="example-content">col-2 / col-sm-4</div>
    </div>
    <div class="example-container col-2 col-sm-4">
      <div class="example-content">col-2 / col-sm-4</div>
    </div>
    <div class="example-container col-6 col-sm-3">
      <div class="example-content">col-6 / col-sm-3</div>
    </div>
    <div class="example-container col-6 col-sm-3">
      <div class="example-content">col-6 / col-sm-3</div>
    </div>
    <div class="example-container col-4 col-sm-3">
      <div class="example-content">col-4 / col-sm-3</div>
    </div>
    <div class="example-container col-8 col-sm-3">
      <div class="example-content">col-8 / col-sm-3</div>
    </div>
    <div class="example-container col-4 col-sm-2">
      <div class="example-content">col-4 / col-sm-2</div>
    </div>
    <div class="example-container col-5 col-sm-2">
      <div class="example-content">col-5 / col-sm-2</div>
    </div>
    <div class="example-container col-3 col-sm-2">
      <div class="example-content">col-3 / col-sm-2</div>
    </div>
    <div class="example-container col-3 col-sm-2">
      <div class="example-content">col-3 / col-sm-2</div>
    </div>
    <div class="example-container col-6 col-sm-2">
      <div class="example-content">col-6 / col-sm-2</div>
    </div>
    <div class="example-container col-3 col-sm-2">
      <div class="example-content">col-3 / col-sm-2</div>
    </div>
  </div>
</section>
<style>
  .example-container {
    background: var(--border);
    padding: 5px;
    margin-bottom: 10px;
  }
  .example-content {
    background: var(--background);
    padding: 15px;
    display: flex;
    height: 100%;
    justify-content: center;
    text-align: center;
    font-size: 14px;
  }
</style>