Bootstrap 5: Grid XXLarge


Sisällysluettelo

    Näytä sisällysluettelo

Esimerkki XXL-ruudukosta

  XSmall Small Medium Large Extra Large XXL
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Screen width <576px >=576px >=768px >=992px >=1200px >=1400px

XXL-laitteiden näytön leveys on vähintään 1400 pikseliä.

Seuraava esimerkki johtaa 50 %/50 % jakoon keskikokoisissa, suurissa ja erittäin suurissa laitteissa ja 25 %/75 % jakoon XXL-laitteissa. Pienissä ja erittäin pienissä laitteissa se pinoaa automaattisesti (100 %):

col-md-6 col-xxl-3
col-md-6 col-xxl-9

Esimerkki

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Kokeile itse →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>XXL Grid</h1>
  <p>The following example will result in a 50%/50% split on medium, large and extra large devices, and a 25%/75% split on XXL devices. On 
  small and extra small devices, it will automatically stack (100%):</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-xxl-3 bg-primary text-white">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="col-md-6 col-xxl-9 bg-dark text-white">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </div>
    </div>
  </div>
</div>

</body>
</html>

Huomaa: varmista, että summa on aina 12.

Käytä vain XXL:ää

Alla olevassa esimerkissä määritämme vain luokan .col-xxl-6 (ilman .col-md-* ) ja/tai .col-sm-*). Tämä tarkoittaa, että xxlarge-laitteet jakavat 50 %/50 %. Erittäin suurille, suurille, keskikokoisille, pienille JA erittäin pienille laitteille se kuitenkin pinoutuu pystysuunnassa (100 % leveys):

Esimerkki

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-xxl-6">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Kokeile itse →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>XXL Grid</h1>
  <p>The following example will result in a 50%/50% split on XXL devices (<strong>1400px and above</strong>). On extra large, large, medium, small and extra small devices, it will automatically stack (100%).</p>
  <p>Resize the browser window to see the effect.</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xxl-6 bg-primary text-white">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="col-xxl-6 bg-dark text-white">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </div>
    </div>
  </div>
</div>    
    
</body>
</html>

Automaattiset asettelusarakkeet

Bootstrap 5:ssä on helppo tapa luoda yhtä leveitä sarakkeita kaikille laitteille: poista vain numero tiedostosta .col-xxl-* ja käytä vain .col-xxl-luokka tietyssä määrässä col-elementtejä. Bootstrap tunnistaa, kuinka monta saraketta on, ja jokainen sarake saa saman leveyden.

Jos näytön koko on alle 1 400 pikseliä, sarakkeet pinotaan vaakasuunnassa:

<!-- Two columns: 50% width on xxl and up-->
<div class="row">
  <div class="col-xxl">1 of 2</div>
  <div class="col-xxl">2 of 2</div>
</div>
<!-- Four columns: 25% width on xxl and up -->
<div class="row">
  <div class="col-xxl">1 of 4</div>
  <div class="col-xxl">2 of 4</div>
  <div class="col-xxl">3 of 4</div>
  <div class="col-xxl">4 of 4</div>
</div>
1 of 2
2 of 2

1 of 4
2 of 4
3 of 4
4 of 4

Kokeile itse →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Responsive Auto Layout Columns</h1>
  <p>In Bootstrap 5, there is an easy way to create equal width columns: just use the <code>.col-xxl</code> class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.</p>
  <p>If the screen size is <strong>less than 1400px</strong>, the columns will stack horizontally.</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xxl bg-primary text-white">1 of 2</div>
      <div class="col-xxl bg-dark text-white">2 of 2</div>
    </div>  
  </div>
  <br>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-xxl bg-primary text-white">1 of 4</div>
      <div class="col-xxl bg-dark text-white">2 of 4</div>
      <div class="col-xxl bg-primary text-white">3 of 4</div>
      <div class="col-xxl bg-dark text-white">4 of 4</div>
    </div>  
  </div>
</div>

</body>
</html>