If I import the full bootstrap css import 'bootstrap/dist/css/bootstrap.min.css';
Then it ruins the css for the rest of my webite so I want to scope it around the variables I need it included around (navbar stuff)
I followed the recommended answer here but it didn't seem to work.
First attempt I tried this:
.bootstrap {
#import 'bootstrap/dist/css/bootstrap.min.css'
}
And the second attempt I followed one of the comments that built a local stylesheet and then I did this
.bootstrap {
#import 'scoped-twbs.css'
}
Wihch didn't work either. (By didn't work, I mean the desired css changes were not visible)
I'm working in NextJS. I have a component that looks like this.
const Navbar2 = () => {
return (
<div className={style.bootstrap}>
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
<NavDropdown title="Dropdown" id="collasible-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
)
}
I'm not sure what I'm misunderstanding
Firsly, in CSS, #import rules must precede all other types of rules, except #charset rules. Hence you cannot nest them inside a selector. Also, in CSS, you cannot actually "nest" selectors. Refer: CSS #import inside a class
However, you can do so in some CSS preprocessor like SCSS that supports them, and is also supported out of box by Next.js itself. Refer: Sass Support | Next.js
Then you just need to do something like this:
// styles/foo.module.scss
.bootstrap :global {
#import "node_modules/bootstrap/dist/css/bootstrap";
}
// pages/index.jsx
import styles from "../styles/foo.module.scss";
const IndexPage = () => (
<div className={styles.bootstrap}>
...
</div>
);
export default IndexPage;
Note the :global switches to global scope for the current selector respective identifier. In easy words it means that without this your bootstrap classes were being hashed out. So unless they were applied like styles.navbar, they were useless. Refer: Exceptions | CSS Modules
Here is a sandbox.
Related
Hello i want to build a toolbar that has an image in the background. I have build two different components. The first is the image component:
import React from 'react';
import thepic from '../mypic.jpg'; // with import
import '../App.css';
const Image = () => {
return (
<img src={thepic} className='the-pic' />
)
}
export default Image;
The second component is the toolbar, i am using react-bootstrap toolbar and i wrap the previous component in the toolbar:
<Image>
<Navbar>
<Container>
<Navbar.Brand href="#home">
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">
Home
</Nav.Link>
<Nav.Link href="#link">
Link
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</Image>
I have manage to display the image in the screen but the toolbar is not shown up. It's like the image override the toolbar.
Can anyone help with this ?
The approach is wrong, you shouldn't make a component for a background image and use it like a "slot" for other components. What you can do is siply give a background image to your navbar component as prop, so it will be dynamic.
Now i want to remove the previous and next and also I want to style the slider which is shown as if it is very old , it's not modern
Acutally i want it to look something like how the react-bootstrap claims their carousel looks like :
Like this:
My code snippet is as follows
<Carousel pause="hover">
{product.images &&
product.images.map((image) => (
<Carousel.Item key={image.public_id}>
<img
className="d-block w-100"
src={image.url}
alt={product.title}
/>
</Carousel.Item>
))}
</Carousel>
I think the problem comes from your css. Did you put the bootstrap one ?
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';
and I suggest "antd" instead of bootstrap (https://ant.design/components/carousel/)
I'm writing a personal Electron project with React-Bootstrap and Typescript but I can't put two radio controls next to each other. I followed the React-Bootstrap examples but it won't work. I'm not sure if it's just me or if I'm missing something. I also tried giving the inline props to the Form component, and writing it without the Container and Row components as well. I know it can be done playing around with the flex structure in Bootstrap but I'd rather stick to the React-Bootstrap components only.
import React from 'react';
import { Container, Row, Form } from 'react-bootstrap';
const ExperimentTypeForm = () => {
return (
<Container fluid>
<Row>
<Form>
<div key="inline-radio" className="mb-3">
<Form.Check inline label="1" type="radio" id="inline-radio-1" />
<Form.Check inline label="2" type="radio" id="inline-radio-2" />
</div>
</Form>
</Row>
</Container>
)
}
export default ExperimentTypeForm;
I was missing the .css import from Bootstrap:
import 'bootstrap/dist/css/bootstrap.min.css';
At first I ignored it because I couldn't get it to compile due to some missing configuration in my webpack config file. But after some digging I found this great answer on how to add the Bootstrap stylesheet to the App.tsx component.
I have an app component like this:
const App = () => {
return (
<Router>
<Route exact path='/' component={Landing} />
<Route path='/login' component={Login} />
</Router>
)
}
Each component has its own directories and stylesheet. my folder structure is like this:
src
|
|
Landing|
| |
| Landing.js
| Landing.module.css
|
|
Login|
| |
| Login.js
| Login.module.css
|
app.js
index.js
My problem is that the stylesheets of Login and Landing components conflict with each other and the Landing page doesn't look good. for example, the login's background color applies on the Landing page and I don't want this.
I imported only on CSS file in each component like this:
import styles from './Landing.module.css'
and this is an example of how I'm using styles variable:
return (
<div className={styles.navBar}>
<Link to="/">
<img className={styles.logo} src="https://image.flaticon.com/icons/png/512/2039/2039175.png" />
</Link>
{loggedIn &&
<div>
<button onClick={logout}>log out</button>
<Link className={styles.navItem} to="/users">get users</Link>
</div>
}
{!loggedIn &&
<div>
<Link className={styles.navItem} to="/login">log in</Link>
<Link className={styles.navItem, styles.btn} to="/signup">signup</Link>
</div>
}
</div>
)
please help me.
Even if it's old, I'm going to answer for who comes after: the reason why it happens is that your CSS selectors have most likely the same specificity, hence it's the order of appearance that decides which style gets applied.
Login in your folder structure comes after Landing, so your bundler will make Login's styles appear last in your bundled CSS, which then will override your Landing's ones.
There are a lot of solutions to this problem:
you can increase the specificity of the selector that you want to win (e.g. by repeating twice the class in your CSS file)
you can decrease the specificity of the selector you want to lose (e.g. with :where())
now you can use Cascade Layers if you are ok with which browsers are supported (e.g. #layer)
etc...
So I have a search box component that is to be used in the Navigation bar on all pages of the site. I also want to use this component/html in other pages of the site hence I put it inside a component shown below
LocationSearchBox.js
import React, {PropTypes} from 'react'
import {Button,FormGroup, FormControl} from 'react-bootstrap'
import styles from '../scss/components/LocationSearchBox.scss'
export default function LocationSearchBox(props) {
return (
<FormGroup>
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={styles.navbarSubmitButton}>Get Weather</Button>
</FormGroup>
)
}
I am using css modules with web pack to convert my scss into css and than generate random styles to use in classnames for the components.
LocationSearchBox.scss
.navbarSubmitButton {
margin-left: 20px;
}
This used inside the component just adds some space between the input and submit button.
This is the NavBar component again with the help of react-bootstrap.
MainNavBar.js
import React from 'react';
import {Navbar, NavbarHeader, NavbarBrand, NavbarCollapse} from 'react-bootstrap';
import {default as Search} from './LocationSearchBox'
import styles from '../scss/components/MainNavbar.scss'
export default function MainNavbar() {
return(
<Navbar fixedTop className={styles.navbarColour} >
<NavbarBrand pullLeft >
<a href='#' className={styles.Brand}>Weather-app</a>
</NavbarBrand>
<Navbar.Collapse>
<Navbar.Form pullRight>
<Search/>
</Navbar.Form>
</Navbar.Collapse>
</Navbar>
)
}
Now I have created a homepage component and I want to use the LocationSearchBox component inside it.
Home.js
import React from 'react'
import {default as Search} from '../components/LocationSearchBox'
import styles from '../scss/components/Home.scss'
export default function Home() {
return (
<div className={styles.center}>
<h2>Enter a city and state</h2>
<Search />
</div>
)
}
The search component inside Home.js, the button has the same margin-left property was the navigation bar so it is moved to the right a bit. I don't want that to happen. I want it only to be applied to the search box used inside the navigation bar but I am unsure of how to do that with CSS modules and React components without creating a separate search box for the navigation bar but I see that as pointless when it will have the exact same code.
I feel like I am not using CSS modules correctly at all, I am not using its philosophy and the point of CSS modules correctly.
It's hard to say what the best approach would be without understanding why it needs to be visually different in those locations but generally I would update <Search /> to accept a new prop to conditionally apply the extra margin.
It could be theme if those two styles are likely to be used many times:
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={props.theme === 'foo' ? styles.navbarSubmitButton : null}>Get Weather</Button>
Or if it's more of an override you could provides a buttonClassName prop to add exceptional styles at specific call sites:
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={`${styles.navbarSubmitButton} ${props.buttonClassName}`}>Get Weather</Button>