ericvicenti / intro-to-react

A Hands-On Walkthrough of your first React Web App
http://intro-to-react.netlify.com
766 stars 67 forks source link

Bootswatch styles error #2

Open lenin-anzen opened 7 years ago

lenin-anzen commented 7 years ago

I had a problem with the import of the Bootswatch CSS file.

I resolved it with the next path: import "bootswatch/dist/journal/bootstrap.css";

But it shows the NavItem component(pills) as follows: image

The layout of the pills in the Bootswatch site is:

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

The layout of the Nav, NavItem components are:

<ul class="nav nav-pills nav-stacked">
    <li role="presentation" class="active">
        <a role="button" href="#">Palo Alto</a>
    </li>
    <li role="presentation" class="">
        <a role="button" href="#">San Jose</a>
    </li>
    <li role="presentation" class="">
        <a role="button" href="#">Santa Cruz</a>
    </li>
    <li role="presentation" class="">
        <a role="button" href="#">Honolulu</a>
    </li>
</ul>
geraldwuhoo commented 6 years ago

Don't mean to necropost, but you can fix this by using bootstrap 3 instead of bootstrap 4. This is the bootstrap version that react-bootstrap is expecting. With yarn, the command would be yarn add bootstrap@3.3.7 -E. If you're using bootswatch, be sure to also run yarn add bootswatch@3.3.7 -E. Hope this helped!

ericvicenti commented 6 years ago

A pull request would be accepted!

geraldwuhoo commented 6 years ago

Just submitted the pull request. Only modified two lines in the README.md file where the versioning is relevant. I thought I would have to update package.json as well, but it turns out that the semantic versions for bootstrap and bootswatch are already correct (both of them are @^3.3.7).