Bootstrap 5: Containers


Innehållsförteckning

    Visa innehållsförteckning

Bootstrap 5 behållare

Du lärde dig från föregående kapitel att Bootstrap kräver en innehållande element för att omsluta webbplatsens innehåll.

Behållare används för att stoppa innehållet inuti av dem, och det finns två containerklasser tillgängliga:

  1. Klassen .container tillhandahåller en responsiv behållare med fast bredd

  2. Klassen .container-fluid tillhandahåller en full breddbehållare som spänner över hela bredden av visningsporten

.container
.container-fluid

Fast behållare

Använd klassen .container för att skapa en responsiv behållare med fast bredd.

Observera att dess bredd (max-width) kommer att ändras på olika skärmstorlekar:

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra Large
≥1200px
XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

Öppna exemplet nedan och ändra storlek på webbläsarfönstret för att se att behållarens bredd ändras vid olika brytpunkter:

Exempel

 <div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</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">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

XXL-brytpunkten (≥1400px) är ny i Bootstrap 5, medan den största brytpunkten i Bootstrap 4 är Extra large (≥1200px).

Fluid (behållare med full bredd).

Använd klassen .container-fluid för att skapa en behållare med full bredd, som alltid spänner över hela skärmens bredd (bredd är alltid 100 %):

Exempel

 <div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</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">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>

Behållarstoppning

Som standard har behållare vänster och höger stoppning, utan topp eller botten stoppning. Därför använder vi ofta mellanrumsverktyg, som extra utfyllnad och marginaler för att få dem att se ännu bättre ut. Till exempel .pt-5 betyder "lägg till en stor toppstoppning":

Exempel

 <div class="container pt-5"></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 pt-5">
  <h1>My First Bootstrap Page</h1>
  <p>This container has an extra top padding.</p>
  <p>Try to remove the .pt-5 class to see the difference.</p>
</div>

</body>
</html>

Behållarkant och färg

Andra verktyg, såsom kanter och färger, används också ofta tillsammans med behållare:

Exempel

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></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 p-5 my-5 border">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a border and some extra padding and margins.</p>
</div>

<div class="container p-5 my-5 bg-dark text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a dark background color and a white text, and some extra padding and margins.</p>
</div>

<div class="container p-5 my-5 bg-primary text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a blue background color and a white text, and some extra padding and margins.</p>
</div>

</body>
</html>

Du kommer att lära dig mycket mer om färger och kantverktyg i ett senare kapitel.

Responsiva behållare

Du kan också använda klasserna .container-sm|md|lg|xl för att bestämma när behållaren ska vara responsiv.

Behållarens maxbredd ändras på olika skärmstorlekar/visningsportar:

Class Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Exempel

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</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 pt-3">
  <h1>Responsive Containers</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>

</body>
</html>