If you have used Bootstrap elements in your content, such as “wells”, buttons or accordions, you will need to adapt these to Govintra HTML and CSS. See the table below to cross-reference.
| Bootstrap 3 | Class/Markup | Govintra Equivalent | Class/Markup | Notes |
|---|---|---|---|---|
| Buttons | ||||
| Default button | .btn .btn-default |
Secondary button | .govintra-btn .govintra-btn--secondary |
Outline style |
| Primary button | .btn .btn-primary |
Primary button | .govintra-btn .govintra-btn--primary |
Uses --color-btn-bg |
| Success button | .btn .btn-success |
Primary button | .govintra-btn .govintra-btn--primary |
No separate success variant |
| Warning button | .btn .btn-warning |
Warning button | .govintra-btn .govintra-btn--warning |
Uses --color-error |
| Small button | .btn .btn-sm |
Small button | .govintra-btn .govintra-btn--sm |
|
| Large button | .btn .btn-lg |
(no large variant) | .govintra-btn |
Standard size only |
| Panels / Cards | ||||
| Panel | .panel .panel-default |
Card | .govintra-card |
|
| Panel heading | .panel-heading |
Card header | .govintra-card__header |
|
| Panel body | .panel-body |
Card body | .govintra-card__body |
|
| Panel footer | .panel-footer |
Card footer | .govintra-card__footer |
|
| Panel primary | .panel .panel-primary |
(use card + custom border) | .govintra-card + CSS |
No coloured panel variants |
| Wells | ||||
| Well | .well |
Inset panel | .govintra-inset |
Light background box |
| Well small | .well .well-sm |
Inset panel | .govintra-inset |
No size variants |
| Alerts | ||||
| Success alert | .alert .alert-success |
Success alert | .govintra-alert .govintra-alert--success |
Green |
| Info alert | .alert .alert-info |
Info alert | .govintra-alert .govintra-alert--info |
Blue |
| Warning alert | .alert .alert-warning |
Warning alert | .govintra-alert .govintra-alert--warning |
Yellow |
| Danger alert | .alert .alert-danger |
Error alert | .govintra-alert .govintra-alert--error |
Red |
| Labels / Badges | ||||
| Label | .label .label-default |
Badge | .govintra-badge |
|
| Label primary | .label .label-primary |
Badge accent | .govintra-badge .govintra-badge--accent |
Uses badge colours |
| Badge (count) | .badge |
Badge | .govintra-badge .govintra-badge--muted |
Grey pill |
| Grid | ||||
| Row | .row |
Grid | .govintra-grid |
CSS Grid, not flexbox |
| Col 6 | .col-md-6 |
(use CSS Grid) | grid-template-columns |
No column classes |
| Col 4 | .col-md-4 |
(use CSS Grid) | Template-level grids | |
| Tables | ||||
| Striped table | .table .table-striped |
(automatic) | .govintra-table |
Striping built in |
| Bordered table | .table .table-bordered |
(automatic) | .govintra-table |
Borders built in |
| Responsive table | .table-responsive |
(automatic) | Handled by overflow-x |
|
| Accordions | ||||
| Accordion | .panel-group |
Details/Summary | <details> + <summary> |
Native HTML, no JS needed |
| Accordion panel | .panel + collapse JS |
Details item | <details class="govintra-details"> |
|
| Accordion heading | data-toggle="collapse" |
Summary | <summary> |
|
| Tabs | ||||
| Nav tabs | .nav .nav-tabs |
(not provided) | Use ACF tab fields instead | |
| Tab content | .tab-content .tab-pane |
Or <details> for disclosure |
||
| Icons | ||||
| Glyphicon | .glyphicon .glyphicon-* |
Font Awesome | .fa-solid .fa-* |
FA 6 via helper function |
| Utility | ||||
| Pull right | .pull-right |
Float right | .u-float-right |
Or use Grid |
| Pull left | .pull-left |
Float left | .u-float-left |
Or use Grid |
| Text center | .text-center |
Text center | .u-text-center |
|
| Hidden | .hidden |
Screen reader only | .u-sr-only |
|
| Visible-xs | .visible-xs |
(use media queries) | No visibility classes | |
| Images | ||||
| Responsive image | .img-responsive |
(automatic) | all images responsive by default |
Built into base styles |
| Rounded image | .img-rounded |
(use border-radius) | border-radius: var(--radius-sm) |
|
| Circle image | .img-circle |
(use border-radius) | border-radius: 50% |
|
| Thumbnail | .thumbnail |
Card | .govintra-card |
Examples:
Bootstrap HTML code:
<div class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
How do I reset my password?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Visit the IT self-service portal and click "Forgotten password".
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordion" href="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
How do I book a meeting room?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Use the room booking system in Outlook or visit the facilities page.
</div>
</div>
</div>
</div>
Govintra HTML code:
<details class="govintra-details" open>
<summary>How do I reset my password?</summary>
<p>Visit the IT self-service portal and click "Forgotten password".</p>
</details>
<details class="govintra-details">
<summary>How do I book a meeting room?</summary>
<p>Use the room booking system in Outlook or visit the facilities page.</p>
</details>