Tabs
https://getbootstrap.com/docs/4.3/components/navs/
https://getbootstrap.com/docs/4.3/components/card/#navigation
Attributes (tabs)
| Attribute | Values | Data type | Default | Description |
|---|---|---|---|---|
| style | primary, secondary, success, danger, warning, info, light, dark | string | Element styling | |
| id | myTab | string | ID to control | |
| class | custom | string | Add custom class | |
| position | top, right, bottom, left | string | Align nav items left or right | |
| space | fill, justified | string | how to handle with the space | |
| alignment | justify-content-center, justify-content-end | string | nav items horizontal alignment | |
| type | tabs, pills, card-tabs, card-pills | string | Tabs type | |
Attributes (tab)
| Attribute | Values | Data type | Default | Description |
|---|---|---|---|---|
| style | primary, secondary, success, danger, warning, info, light, dark | string | Element styling | |
| id | myTab_1 | string | ID to control | |
| headline | custom | string | Headline text | |
| link | https://google.com | string | link to url | |
| target | _blank, _self | string | link target | |
| fade | true, false | bool | tab animation | |
| class | custom | string | Add custom class |
Basic
[pastacode lang=“php“ manual=“%5Btabs%20id%3D%22myTabsA%22%5D%0A%09%5Btab%20id%3D%22myTabsA_1%22%20headline%3D%22Lorem%20Ipsum%22%20expanded%3D%22true%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsA_2%22%20headline%3D%22Dolor%20sit%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsA_3%22%20headline%3D%22Amet%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%5B%2Ftabs%5D“ message=““ highlight=““ provider=“manual“/]
Basic (fade)
[pastacode lang=“php“ manual=“%5Btabs%20id%3D%22myTabsN%22%5D%0A%09%5Btab%20id%3D%22myTabsN_1%22%20headline%3D%22Lorem%20Ipsum%22%20expanded%3D%22true%22%20fade%3D%22true%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsN_2%22%20headline%3D%22Dolor%20sit%22%20fade%3D%22true%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsN_3%22%20headline%3D%22Amet%22%20fade%3D%22true%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%5B%2Ftabs%5D“ message=““ highlight=““ provider=“manual“/]
Order (right, bottom, left)
[pastacode lang=“php“ manual=“%5Btabs%20id%3D%22myTabsB%22%20order%3D%22left%22%5D%0A%09%5Btab%20id%3D%22myTabsB_1%22%20headline%3D%22Lorem%20Ipsum%22%20expanded%3D%22true%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsB_2%22%20headline%3D%22Dolor%20sit%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsB_3%22%20headline%3D%22Amet%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%5B%2Ftabs%5D“ message=““ highlight=““ provider=“manual“/]
Space (fill & justified)
[pastacode lang=“php“ manual=“%5Btabs%20id%3D%22myTabsE%22%20space%3D%22nav-fill%22%5D%0A%09%5Btab%20id%3D%22myTabsE_1%22%20headline%3D%22Lorem%20Ipsum%22%20expanded%3D%22true%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsE_2%22%20headline%3D%22Dolor%20sit%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsE_3%22%20headline%3D%22Amet%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%5B%2Ftabs%5D“ message=““ highlight=““ provider=“manual“/]
Alignment (center & end)
[pastacode lang=“php“ manual=“%5Btabs%20id%3D%22myTabsG%22%20alignment%3D%22justify-content-center%22%5D%0A%09%5Btab%20id%3D%22myTabsG_1%22%20headline%3D%22Lorem%20Ipsum%22%20expanded%3D%22true%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsG_2%22%20headline%3D%22Dolor%20sit%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsG_3%22%20headline%3D%22Amet%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%5B%2Ftabs%5D“ message=““ highlight=““ provider=“manual“/]
Types (tabs, pills, card-tabs, card-pills)
[pastacode lang=“php“ manual=“%5Btabs%20id%3D%22myTabsI%22%20type%3D%22tabs%22%5D%0A%09%5Btab%20id%3D%22myTabsI_1%22%20headline%3D%22Lorem%20Ipsum%22%20expanded%3D%22true%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsI_2%22%20headline%3D%22Dolor%20sit%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsI_3%22%20headline%3D%22Amet%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%5B%2Ftabs%5D“ message=““ highlight=““ provider=“manual“/]
External Link
[pastacode lang=“php“ manual=“%5Btabs%20id%3D%22myTabsM%22%5D%0A%09%5Btab%20id%3D%22myTabsM_1%22%20headline%3D%22Lorem%20Ipsum%22%20expanded%3D%22true%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsM_2%22%20headline%3D%22Dolor%20sit%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20id%3D%22myTabsM_3%22%20headline%3D%22Amet%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Ftab%5D%0A%09%5Btab%20link%3D%22https%3A%2F%2Fendcore.com%22%20target%3D%22_blank%22%20id%3D%22myTabsM_4%22%20headline%3D%22External%22%5D%5B%2Ftab%5D%0A%5B%2Ftabs%5D“ message=““ highlight=““ provider=“manual“/]
Lorem Ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
[pastacode lang=“php“ manual=“Lorem%20ipsum%20dolor%20sit%20amet%2C%20consetetur%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyam%20erat%2C%20sed%20diam%20voluptua.“ message=““ highlight=““ provider=“manual“/]