intro-to-react
intro-to-react copied to clipboard
Bootswatch styles error
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:

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>
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!
A pull request would be accepted!
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).