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

## Painikeryhmät
Bootstrap tarjoaa `btn-group`- ja `btn-group-vertical`-luokat painikkeiden ryhmittelyyn, mikä helpottaa parempaa organisointia ja asettelun hallintaa:
- `btn-group`: Tämä luokka ryhmittelee painikkeet vaakasuoraan. Sopii tilanteisiin, joissa painikkeet on tarkoituksenmukaista esittää vierekkäin, kuten työkalupalkissa tai navigointipalkissa;
- `btn-group-vertical`: Tämä luokka asettaa painikkeet pystysuoraan päällekkäin. Hyödyllinen, kun painikkeet halutaan esittää sarakkeessa, esimerkiksi pudotusvalikoissa tai pinotuissa navigaatioissa.

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

## Painikkeiden vaihtoryhmät
Bootstrap tarjoaa `btn-group-toggle`-luokan painikkeiden vaihtoryhmien luomiseen. Tämän ominaisuuden avulla voidaan luoda painikesarjoja, joissa vain yksi painike voi olla aktiivinen kerrallaan, vastaavasti kuin radiopainikkeissa radioryhmässä.

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

ZG9jdW1lbnQKICAucXVlcnlTZWxlY3RvckFsbCgnI2J1dHRvbkdyb3VwIGlucHV0W3R5cGU9InJhZGlvIl0nKQogIC5mb3JFYWNoKGZ1bmN0aW9uIChyYWRpbykgewogICAgcmFkaW8uYWRkRXZlbnRMaXN0ZW5lcigiY2hhbmdlIiwgaGFuZGxlUmFkaW8pOwogIH0pOwoKZnVuY3Rpb24gaGFuZGxlUmFkaW8oKSB7CiAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgiI2J1dHRvbkdyb3VwIGxhYmVsIikuZm9yRWFjaChmdW5jdGlvbiAobGFiZWwpIHsKICAgIGxhYmVsLmNsYXNzTGlzdC5yZW1vdmUoImFjdGl2ZSIpOwogIH0pOwogIHRoaXMuY2xvc2VzdCgibGFiZWwiKS5jbGFzc0xpc3QuYWRkKCJhY3RpdmUiKTsKfQ==

Tutustu Bootstrap CSS -kehyksen keskeisiin periaatteisiin ja opi luomaan responsiivisia ja visuaalisesti vaikuttavia verkkosivustoja nopeasti ja tehokkaasti. Käytännönläheisen tutustumisen avulla keskeisiin apuluokkiin ja tehokkaiden komponenttien hyödyntämiseen saat arvokasta käytännön kokemusta, joka tehostaa verkkokehitystyötäsi Bootstrapin monipuolisella työkalupaketilla.

Perehdy Bootstrapin ytimeen ja sen kehitykseen alkuvaiheista nykypäivään, arvioi sen hyödyt ja haitat sekä ymmärrä tehokkaan käyttöönoton edellytykset.

Tutustu Bootstrapin asennusvaihtoehtoihin. Valitse nopea integrointi Content Delivery Networkin (CDN) kautta tai räätälöidympi Node Package Managerin (NPM) lähestymistapa.

Hallitse keskeiset Bootstrap-elementit, kuten monipuolinen ruudukkosysteemi, hienovarainen typografia, dynaaminen painikkeiden käyttö, marginaalien ja täytteiden tarkka hallinta sekä tehokkaiden lomakkeiden luominen sujuvaa käyttäjävuorovaikutusta varten.

Syvennä Bootstrap-osaamistasi edistyneillä aiheilla, kuten dynaamiset navigointivalikot, responsiivinen kuvien käsittely, monipuoliset korttipohjat, interaktiiviset modaalit ja vaikuttavat karusellit, jotka tarjoavat mukaansatempaavia käyttäjäkokemuksia.

Luo portfoliosivusto Bootstrap-kehyksen avulla ohjeidemme mukaisesti. Hyödynnä Bootstrapin tehokkaita ominaisuuksia. Tämä käytännön osio auttaa esittelemään taitojasi, projektejasi ja saavutuksiasi.

Painikkeiden Kehittyneet Ominaisuudet

Painikeryhmät

Painikkeiden vaihtoryhmät

Awesome!

Painikkeiden Kehittyneet Ominaisuudet

Painikeryhmät

Painikkeiden vaihtoryhmät