Skip to content

how could I use bootstrap.css or other library css in our app #105

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom
Closed
ckken opened this issue Oct 27, 2016 · 17 comments
Closed

how could I use bootstrap.css or other library css in our app #105

ckken opened this issue Oct 27, 2016 · 17 comments

Comments

@ckken
Copy link

ckken commented Oct 27, 2016

No description provided.

@nkzawa
Copy link
Contributor

nkzawa commented Oct 27, 2016

You can use Head component, and implement it on all your pages.

https://github.com/zeit/next.js#head-side-effects

@ckken
Copy link
Author

ckken commented Oct 27, 2016

fixed it

@ckken ckken closed this as completed Oct 27, 2016
@bestwestern
Copy link

@nkzawa link is no longer working. @ckken how did you fix this?

@sergiodxa
Copy link
Contributor

@bestwestern the new link -> https://github.com/zeit/next.js#populating-head

@tharakabimal
Copy link
Contributor

@ckken Could you kindly tell me how you fixed it?

@gustavlrsn
Copy link

@tharakabimal here's how I implemented Bootstrap v4 into my project's layout file: https://gist.github.com/gustavlrsn/509694de7f4ee5a5d720d218b21f288e

This is through the reactstrap package (which is bootstrap v4, and CSS file not included), and adding the link to the CSS file from the bootstrap CDN in the <Head> component.

@tharakabimal
Copy link
Contributor

@ckken Thanks. One quick question. Will this have any effect on code splitting?

@gustavlrsn
Copy link

@tharakabimal not very well read on how code splitting works in Next.js. However, it will ship the entire CSS file wherever you include that Head component, which might not be ideal as per @rauchg's comment here: #119 (comment)

@yemel
Copy link

yemel commented May 21, 2017

Thanks @gustavlrsn for your answer. I'm testing your setup and getting the following error:

Cannot find module 'react-transition-group/TransitionGroup'

Error: Cannot find module 'react-transition-group/TransitionGroup'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> ([...]/node_modules/reactstrap/lib/Modal.js:27:24)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

My package.json's dependencies are:

  "dependencies": {
    "next": "^2.4.0",
    "react": "^15.5.4",
    "react-addons-css-transition-group": "^15.5.2",
    "react-addons-transition-group": "^15.5.2",
    "react-dom": "^15.5.4",
    "reactstrap": "^4.6.2"
  }

What version of reactstrap are you using?

@yemel
Copy link

yemel commented May 21, 2017

Fiexed, just needed to install react-transition-group@^1.1.2

@hugotox
Copy link

hugotox commented Aug 29, 2017

This approach of using the link element to a css file from the Head component gives a FOUC, any ideas how to prevent it?

@tharakabimal
Copy link
Contributor

@ckken How did you manage to implement the nav bar? I'm having trouble adding Link inside NavLink 

 return (
            <div>
                <Navbar color="faded" light expand="md">
                    <NavbarBrand href="/">My Blog</NavbarBrand>
                    <NavbarToggler onClick={this.toggle} />
                    <Collapse isOpen={this.state.isOpen} navbar>
                        <Nav className="ml-auto" navbar>
                        <NavItem>
                            <Link href='/about'>
                                <NavLink>About</NavLink>
                            </Link>
                        </NavItem>
                        </Nav>
                    </Collapse>
                </Navbar>
            </div>
        )

@dacharjaya
Copy link

Did you got any solution to Navbar implementation?

@tharakabimal
Copy link
Contributor

@dacharjaya I decided to write my own CSS (styld jsx) . Not using Bootstrap anymore.

@dacharjaya
Copy link

I got a solution. You should try this.

import Link from "next/link";
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import NavbarBrand from 'react-bootstrap/lib/NavbarBrand';

@tharakabimal
Copy link
Contributor

@dacharjaya what difference does this make?

@lock
Copy link

lock bot commented May 10, 2018

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

@lock lock bot locked as resolved and limited conversation to collaborators May 10, 2018
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@yemel @nkzawa @sergiodxa @gustavlrsn @hugotox @tharakabimal @bestwestern @ckken @dacharjaya