intro-to-react icon indicating copy to clipboard operation
intro-to-react copied to clipboard

Bootswatch styles error

Open lenin-anzen opened this issue 8 years ago • 3 comments

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>

lenin-anzen avatar Nov 04 '17 18:11 lenin-anzen

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 [email protected] -E. If you're using bootswatch, be sure to also run yarn add [email protected] -E. Hope this helped!

geraldwuhoo avatar Jun 15 '18 15:06 geraldwuhoo

A pull request would be accepted!

ericvicenti avatar Jun 15 '18 16:06 ericvicenti

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).

geraldwuhoo avatar Jun 19 '18 16:06 geraldwuhoo