Låt oss skapa ett grundläggande rutsystem som börjar staplas på extra små enheter, innan det blir horisontellt på större enheter.
Följande exempel visar en enkel "staplad-till-horisontell" layout med två kolumner, vilket betyder att den kommer att resultera i en delning på 50%/50% på alla skärmar, förutom extra små skärmar, som den automatiskt staplas (100%):
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Prova själv →
<!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>Grid Example</h1>
<p>This example demonstrates a 50%/50% split on small, medium, large, xlarge and xxlarge devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6 bg-primary text-white p-3">
Lorem ipsum...
</div>
<div class="col-sm-6 bg-dark text-white p-3">
Sed ut perspiciatis...
</div>
</div>
</div>
</body>
</html>
Tips: Siffrorna i klasserna .col-sm-*
anger hur många kolumner div-delen ska sträcka sig över (av 12). Så, .col-sm-1
sträcker sig över 1 kolumn, .col-sm-4
sträcker sig över 4 kolumner, .col-sm-6
spänner över 6 kolumner osv.
Obs! Se till att summan blir 12 eller färre (det krävs inte att du använder alla 12 tillgängliga kolumner):
Tips: Du kan förvandla vilken layout som helst full bredd till en layout med fast bredd responsiv genom att ändra kod class="w3-codespan">.container-fluid klass till .container
:
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Prova själv →
<!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 mt-3">
<h1>Grid Example</h1>
<p>This example demonstrates a 50%/50% split on small, medium, large, xlarge and xxlarge devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6 bg-primary text-white p-3">
Lorem ipsum...
</div>
<div class="col-sm-6 bg-dark text-white p-3">
Sed ut perspiciatis...
</div>
</div>
</div>
</body>
</html>
I Bootstrap 5 finns det ett enkelt sätt att skapa lika breda kolumner för alla enheter: ta bara bort numret från .col-size-*
och använd endast klassen .col-size
på ett specificerat antal col-element. Bootstrap kommer att känna igen hur många kolumner det finns, och varje kolumn kommer att få samma bredd. storleksklasserna (sm, md, etc.) avgör när kolumnerna ska vara responsiva:
<!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
<div class="row">
<div class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3 of 4</div>
<div class="col-sm">4 of 4</div>
</div>
Prova själv →
<!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>Auto Layout Columns</h1>
<p>In Bootstrap 5, there is an easy way to create equal width columns: just use the <code>.col-size</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>Two columns: 50% width on all screens, except for extra small (100% width on screens less than <strong>576px</strong> wide)</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-primary text-white p-3">1 of 2</div>
<div class="col-sm bg-dark text-white p-3">2 of 2</div>
</div>
</div>
<br>
<p>Four columns: 25% width on all screens, except for extra small (100% width on screens less than <strong>576px</strong> wide)</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-primary text-white p-3">1 of 4</div>
<div class="col-sm bg-dark text-white p-3">2 of 4</div>
<div class="col-sm bg-primary text-white p-3">3 of 4</div>
<div class="col-sm bg-dark text-white p-3">4 of 4</div>
</div>
</div>
</div>
</body>
</html>