Source: dist/css/cardiosmart_boot.css, line 6588
4.1 Toggle
Toggle elements of a collapse with user feed back of the icon rotating.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none p_2" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]" aria-expanded="true">
<i class="a:rotation fa-fw fa-times fas self_center text_center"></i>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6624
4.1.1 Collapse Toggle Advanced
Toggle elements of a collapse with user feed back of the icon morphing.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6645
4.1.2 Collapse Toggle Advanced with Square
Toggle elements of a collapse with user feed back of the icon morphing.
Example s
#targetName
the name of the target of the collapse
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]">
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-minus fa-stack-1x c_white"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x c_white"></i>
</span>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6606
4.1.3 Toggle Chevron
Toggle elements of a collapse with user feed back of the icon rotating.
Example s
#targetName
the name of the target of the collapse
<div class="a:bg_black-3 h:bg_black-4 flex_none p_2" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]" aria-expanded="true">
<i class="a:rotation fa-fw fa-chevron-up fas self_center text_center"></i>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6553
4.1.4 Bootstrap Toggle Rotation
The toggles for bootstrap collapses use a + icon that twists to an x when the elements doesn't have collapsed or show as a class. to reduce confusion the class has a set rotation and speed attached to it. a:rotation is applied to the tow specific icons fa-times and fa-chevron-up only.
These classes are effected by the parent having
collapsed state.Example s
expanded
when the associated content is expanded the toggle will look like this
collapsed
when the associated content is collapsed the class is added to the toggle and it will look like this.
<div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<i class="a:rotation c_primary fa-fw fa-times fas self_center text_center"></i>
</div>
<div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<i class="a:rotation c_primary fa-fw fa-chevron-up fas self_center text_center"></i>
</div>
<div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<span class="fa-stack fa-2x">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
<div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x c_black"></i>
<i class="fas fa-minus fa-stack-1x c_white"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x c_white"></i>
</span>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6353
4.2 Sidebar Nav
Description: Side bar for any 3 layer nav on the site. the parent node is from the main nav.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<nav class="nav-sub bg_primary c_white font_2 font_ui ">
<ul class="ul_none flex_column flex">
<li class="nav-item font-size_up" data-nav="parent">
<div class="bg_black-4 ">
<a class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">Parent Link: Tree starts from this node</a>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="collapsed br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse" >
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="grandchild">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 collapse show childNavCollapse">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" active text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</li> </ul>
</nav>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6380
4.2.1 Parent NavItem
Description: The parent is singular in this nav it is always active and its direct children are always expanded so there is not need for a toggle.
Example
Default styling
<li class="nav-item font-size_up" data-nav="parent">
<div class="bg_black-4 ">
<a class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">Parent Link: Tree starts from this node</a>
</div>
</li>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6428
4.2.2 Toggle Child
Description: Toggle elements are set to active if the attached node or its children are active. If the toggle is active the collapsed children navigation are open by default.
Example s
default
the toggle when it doesn't have an active class still shades on hover
active
shade the toggle
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<div class="[modifier class] br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6398
4.2.3 Child NavItem
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Example s
default
No added class
active
Nav Item changes its decoration if this the page the user is on.
<li class="nav-item [modifier class]" data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 [modifier class] c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6450
4.2.4 Child NavItem With Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="collapsed br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse" >
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6483
4.2.5 Child NavItem With Grand Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Example
Default styling
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="grandchild">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 collapse show childNavCollapse">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" active text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</li>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6530
4.2.6 Great Grandchild NavItem
Description: Great Grand Children loose the spacer for toggles because they don't have any child navs and don't need the use of a toggle.
Example s
default
No added class
active
Nav Item changes its decoration if this the page the user is on.
<li class="nav-item [modifier class] " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" [modifier class] text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li>