> Obs
>
> Alla utmaningar följer samma format som visas nedan:
> - Du får en uppgift som ska utföras;
> - Därefter möter du ett kodblock där du ska genomföra ändringar baserat på uppgiften;
> - Klicka på **Kör kod**-knappen för att förhandsgranska den levande sidan;
> - Under kodblocket hittar du två knappar: **Ledtråd** och **Lösning**;
>    - **Ledtråd**-knappen ger vägledning för uppgiften;
>    - **Lösning**-knappen visar den korrekta lösningen.
> - Det rekommenderas att du försöker lösa uppgiften själv innan du använder **Lösning**-knappen.

## Uppgift
Du har fått en grundläggande HTML-kod med ett `button`-element, som för närvarande är stylat med webbläsarens standardstilar. Även om `button`-elementet innehåller klassnamn från Bootstrap, syns inga förändringar på den levande sidan eftersom Bootstrap ännu inte har integrerats i projektet. Din uppgift är att lägga till lämpliga länkar för att ansluta Bootstrap till projektet.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlIDE8L3RpdGxlPgogICAgPCEtLSBJbmNsdWRlIEJvb3RzdHJhcCBDU1MgbGluayBiZWxvdyAtLT4KCiAgPC9oZWFkPgogIDxib2R5PgogICAgPGJ1dHRvbiB0eXBlPSJidXR0b24iIGNsYXNzPSJidG4gYnRuLXN1Y2Nlc3MiPlN1Y2Nlc3M8L2J1dHRvbj4KICAgIDwhLS0gSW5jbHVkZSBCb290c3RyYXAgSmF2YVNjcmlwdCBsaW5rIGJlbG93IC0tPgogICAgCiAgPC9ib2R5Pgo8L2h0bWw+

- För att lägga till länken till Bootstrap CSS, använd följande kod: `<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">`.
- För Bootstrap JavaScript-länken, använd denna kod: `<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlIDE8L3RpdGxlPgogICAgPCEtLSBJbmNsdWRlIEJvb3RzdHJhcCBDU1MgbGluayBiZWxvdyAtLT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuIGJ0bi1zdWNjZXNzIj5TdWNjZXNzPC9idXR0b24+CiAgICA8IS0tIEluY2x1ZGUgQm9vdHN0cmFwIEphdmFTY3JpcHQgbGluayBiZWxvdyAtLT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjMuMi9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Vilket är ett av sätten att integrera Bootstrap i ett projekt?

Vad står CDN för i samband med Bootstrap-integrering?

Vilket kommando används för att installera Bootstrap via NPM?

Utforska grundläggande principer för Bootstrap CSS-ramverket och upptäck hemligheterna bakom att snabbt och effektivt skapa responsiva och visuellt tilltalande webbplatser. Genom praktisk utforskning av viktiga verktyg och implementering av kraftfulla komponenter får du ovärderlig praktisk erfarenhet som effektiviserar ditt arbetsflöde inom webbutveckling med Bootstraps mångsidiga verktygslåda.

Fördjupa dig i kärnan av Bootstrap och dess resa från tillkomst till nutid, väg dess fördelar och nackdelar samt förstå förutsättningar för effektiv implementering.

Navigera bland installationsalternativ för Bootstrap. Välj mellan snabb integration via Content Delivery Network (CDN) eller en mer anpassad metod med Node Package Manager (NPM).

Fördjupa dig i centrala Bootstrap-element, inklusive det mångsidiga rutnätsystemet, nyanserad typografi, dynamisk knappanvändning, exakt hantering av marginaler och utfyllnader samt utformning av effektiva formulär för smidig användarinteraktion.

Förbättra dina Bootstrap-kunskaper med avancerade ämnen som omfattar dynamiska navigationsmenyer, responsiv bildhantering, mångsidiga kortlayouter, interaktiva modaler och engagerande karuseller för fängslande användarupplevelser.

Skapa en portfoliosida med hjälp av Bootstrap-ramverket med vår vägledning. Utnyttja de kraftfulla funktionerna i Bootstrap. Denna praktiska sektion hjälper dig att visa upp dina färdigheter, projekt och prestationer.

Utmaning & Quiz: Konfigurera Bootstrap

Uppgift

Quiz

1. Vilket är ett av sätten att integrera Bootstrap i ett projekt?

2. Vad står CDN för i samband med Bootstrap-integrering?

3. Vilket kommando används för att installera Bootstrap via NPM?