Summary  
This chapter covers how to group buttons horizontally or vertically and implement toggle behavior among buttons using CSS class–based code to manage layout and active states.

General domain of usage  
Frontend web development

## Knappegrupper
Bootstrap tilbyr klassene `btn-group` og `btn-group-vertical` for å gruppere knapper sammen, noe som gir bedre organisering og kontroll over oppsettet:
- `btn-group`: Denne klassen grupperer knapper horisontalt. Den egner seg for situasjoner der knapper bør vises side om side, for eksempel i verktøylinjer eller navigasjonsfelt;
- `btn-group-vertical`: Denne klassen stabler knapper vertikalt. Den er nyttig når knapper skal vises i en kolonne, for eksempel i nedtrekksmenyer eller stablede navigasjonsfelt.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+QnV0dG9ucyBQYXJ0IDIgRXhhbXBsZSAxPC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9InJvdyI+CiAgICAgIDxkaXYgY2xhc3M9ImNvbC02Ij4KICAgICAgICA8ZGl2IGNsYXNzPSJidG4tZ3JvdXAiIHJvbGU9Imdyb3VwIj4KICAgICAgICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuIGJ0bi13YXJuaW5nIj5MZWZ0PC9idXR0b24+CiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4td2FybmluZyI+TWlkZGxlPC9idXR0b24+CiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4td2FybmluZyI+UmlnaHQ8L2J1dHRvbj4KICAgICAgICA8L2Rpdj4KICAgICAgPC9kaXY+CgogICAgICA8ZGl2IGNsYXNzPSJjb2wtNiI+CiAgICAgICAgPGRpdiBjbGFzcz0iYnRuLWdyb3VwLXZlcnRpY2FsIiByb2xlPSJncm91cCI+CiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tc3VjY2VzcyI+VG9wPC9idXR0b24+CiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tc3VjY2VzcyI+TWlkZGxlPC9idXR0b24+CiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tc3VjY2VzcyI+Qm90dG9tPC9idXR0b24+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvanMvYm9vdHN0cmFwLm1pbi5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

## Knappevekslingsgrupper
Bootstrap tilbyr klassen `btn-group-toggle` for å lage knappevekslingsgrupper. Denne funksjonen gjør det mulig å opprette sett med knapper der kun én knapp kan være aktiv om gangen, på samme måte som radioknapper i en radiogruppe.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+QnV0dG9ucyBQYXJ0IDIgRXhhbXBsZSAyPC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYKICAgICAgY2xhc3M9ImJ0bi1ncm91cCBidG4tZ3JvdXAtdG9nZ2xlIgogICAgICBkYXRhLXRvZ2dsZT0iYnV0dG9ucyIKICAgICAgaWQ9ImJ1dHRvbkdyb3VwIgogICAgPgogICAgICA8bGFiZWwgY2xhc3M9ImJ0biBidG4tZGFyayBhY3RpdmUiPgogICAgICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgbmFtZT0ib3B0aW9ucyIgaWQ9Im9wdGlvbjEiIGNoZWNrZWQgLz4gT3B0aW9uIDEKICAgICAgPC9sYWJlbD4KICAgICAgPGxhYmVsIGNsYXNzPSJidG4gYnRuLWRhcmsiPgogICAgICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgbmFtZT0ib3B0aW9ucyIgaWQ9Im9wdGlvbjIiIC8+IE9wdGlvbiAyCiAgICAgIDwvbGFiZWw+CiAgICAgIDxsYWJlbCBjbGFzcz0iYnRuIGJ0bi1kYXJrIj4KICAgICAgICA8aW5wdXQgdHlwZT0icmFkaW8iIG5hbWU9Im9wdGlvbnMiIGlkPSJvcHRpb24zIiAvPiBPcHRpb24gMwogICAgICA8L2xhYmVsPgogICAgPC9kaXY+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9qcy9ib290c3RyYXAuYnVuZGxlLm1pbi5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

ZG9jdW1lbnQKICAucXVlcnlTZWxlY3RvckFsbCgnI2J1dHRvbkdyb3VwIGlucHV0W3R5cGU9InJhZGlvIl0nKQogIC5mb3JFYWNoKGZ1bmN0aW9uIChyYWRpbykgewogICAgcmFkaW8uYWRkRXZlbnRMaXN0ZW5lcigiY2hhbmdlIiwgaGFuZGxlUmFkaW8pOwogIH0pOwoKZnVuY3Rpb24gaGFuZGxlUmFkaW8oKSB7CiAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgiI2J1dHRvbkdyb3VwIGxhYmVsIikuZm9yRWFjaChmdW5jdGlvbiAobGFiZWwpIHsKICAgIGxhYmVsLmNsYXNzTGlzdC5yZW1vdmUoImFjdGl2ZSIpOwogIH0pOwogIHRoaXMuY2xvc2VzdCgibGFiZWwiKS5jbGFzc0xpc3QuYWRkKCJhY3RpdmUiKTsKfQ==

Utforsk kjerneprinsippene i Bootstrap CSS-rammeverket og oppdag hemmelighetene bak å lage responsive og visuelt imponerende nettsteder raskt og effektivt. Gjennom praktisk utforskning av sentrale verktøy og implementering av kraftige komponenter, får du uvurderlig praktisk erfaring som effektiviserer arbeidsflyten i webutvikling ved hjelp av Bootstraps allsidige verktøykasse.

Utforsk kjernen i Bootstrap og dets utvikling fra oppstart til i dag, vurder fordeler og ulemper, og forstå forutsetninger for effektiv implementering.

Naviger gjennom alternativer for installasjon av Bootstrap. Velg mellom rask integrasjon via Content Delivery Network (CDN) eller en mer tilpasset tilnærming med Node Package Manager (NPM).

Oppnå ferdigheter i sentrale Bootstrap-elementer, inkludert det allsidige rutenettsystemet, nyansert typografi, dynamisk bruk av knapper, presis håndtering av marger og polstringer, samt utforming av effektive skjemaer for sømløs brukerinteraksjon.

Hev dine Bootstrap-ferdigheter med avanserte emner som dekker dynamiske navigasjonsmenyer, responsiv bildehåndtering, allsidige kortoppsett, interaktive modaler og engasjerende karuseller for fengende brukeropplevelser.

Lag en porteføljenettside ved hjelp av Bootstrap-rammeverket med vår veiledning. Utnytt de kraftige funksjonene i Bootstrap. Denne praktiske delen hjelper deg med å vise frem dine ferdigheter, prosjekter og prestasjoner.

Avanserte Knappfunksjoner

Knappegrupper

Knappevekslingsgrupper

Awesome!

Avanserte Knappfunksjoner

Knappegrupper

Knappevekslingsgrupper