Migrating themes to Bootstrap 5

[jeffreybarry]

to do:

• [ ] map tags used by v4 to v5 in theme
• [ ] which files in theme are impacted?
• [ ] how is bootstrap setup initially in WP?

[jeffreybarry]

Bootstrap 5 is enabled in the functions.php:

function shenAleph_scripts() {
    wp_enqueue_style( 'bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');

[jeffreybarry]

Links are showing as underlined.  Is Bootstrap 5 using a different reboot? Yes, see https://getbootstrap.com/docs/5.0/migration/

Links are now underlined by default. Need to add a {text-decoration: none;}

DONE.

[jeffreybarry]

Problem

Menu for about, issues, submit, the peak are smushed together without spacing. 

Likely cause

The spacing in these items are controlled by 

<div class="shen-nav d-flex flex-column flex-sm-row justify-content-end">
                    <a class="nav-item nav-link" href="https://shenandoahliterary.org/about/">About</a>
                    <a class="nav-item nav-link" href="https://shenandoahliterary.org/issues/">Issues</a>
                    <a class="nav-item nav-link" href="https://shenandoahliterary.org/submissions/">Submit</a>
                    <a class="nav-item nav-link" href="https://shenandoahliterary.org/thepeak">The Peak</a>
                </div>

[jeffreybarry]

These classes might have changed with Bootstrap 5:

shen-nav d-flex flex-column flex-sm-row justify-content-end in header.php

shen-nav

.shen-nav {
    display: inline-block;
}

Try changing shen-nav to d-inline-flex. That moved entire box over to the left but did not impact spacing.

Try justify-content-end to justify-content-evenly. No change. 

Try simplifying by removing d-inline-flex, flex-column and adding back in one at a time.

The following works as expected, though without justifying the end:

<div class="d-flex justify-content-evenly" >