Responsive Behavior

<div class="container">
  <div class="row">
    <div class="col-8">8</div>
    <div class="col-4">4</div>
  </div>
  <div class="row">
    <div class="col-4">4</div>
    <div class="col-4">4</div>
    <div class="col-4">4</div>
  </div>
  <div class="row">
    <div class="col-6">6</div>
    <div class="col-6">6</div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">4</div>
    <div class="col-4">4</div>
  </div>
  <div class="row justify-content-center">
    <div class="col-6">6</div>
  </div>
</div>

Grid settings

Layout rules

For desktop views like 1440px width it is standard to use all 12 columns for the content. So the content is aligned with the elements of the Header on the left and right. On marketing related sites it is possible to use less columns to ensure a good readability for long texts and forms. The nested grid for the content then uses 12 columns again.

Consider using space efficiently rather than showing white space, so that the app content expands over the whole maximum container width, which is set for the grid system.

Block Grid Deprecated

Layout to arrange content in boxes like a shelf.

The horizontally aligned items are equal in height. The number of columns can be set responsive to the viewport width.

<div class="block-grid block-grid-md-2 block-grid-lg-3 block-grid-xl-4">
    <div class="block-grid__item">
        <div class="bg-color-gray-tint-5 padding-1">
            <p>1. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident optio consectetur aperiam tempore recusandae nam consequatur quo numquam dolore. Repellat, asperiores exercitationem.</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-gray-tint-5 padding-1">
            <p>2. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia debitis laborum repellat et ab quidem quaerat tempore at dicta doloremque? Labore sapiente numquam sit autem magni obcaecati vitae, ad ipsa.</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-gray-tint-5 padding-1">
            <p>3. Nulla architecto, ducimus cumque non velit dolores, ipsam modi iste, cupiditate ipsum qui! Fugit dignissimos earum, odio repellat enim corporis accusamus a!</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-gray-tint-5 padding-1">
            <p>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem animi id quasi doloribus, itaque amet fugit ullam sint laboriosam consequuntur culpa autem in quae numquam facilis dolore sunt facere placeat.</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-gray-tint-5 padding-1">
            <p>5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, placeat pariatur, quisquam nostrum minus in sapiente quod numquam voluptas itaque ipsa, facilis exercitationem odio magnam veritatis. A provident quod cum!</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-gray-tint-5 padding-1">
            <p>6. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur quibusdam impedit sequi voluptates corporis totam ab laudantium, expedita in, at repellendus ducimus! Provident vitae officia vero, iste non voluptatum dolores.</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-gray-tint-5 padding-1">
            <p>7. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident optio consectetur aperiam tempore recusandae nam consequatur quo numquam dolore. Repellat, asperiores exercitationem.</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-gray-tint-5 padding-1">
            <p>8. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam rem laudantium, cum unde doloremque id et eveniet, odio qui aliquid quisquam ad itaque necessitatibus inventore atque, nemo libero ut distinctio?</p>
        </div>
    </div>
</div>

Dos and don’ts

• Do not use it for content of greatly varying length. If necessary, control the amount of text by truncating the content.