I can't get bootstrap classes to work with react-bootstrap
I tried using bootstrap classes specifically flex properties in react-bootstrap but it doesn't seem to work. But on the docs it shows an example of them using it "https://react-bootstrap.netlify.com/layout/grid/", also the docs seem pretty vague so I went to bootstrap's docs but no avail there either.
I noticed when I change how many Col's (like this col md={4}) I want a specific col element to take up the positioning of this button changes even though it supposed to be in the center why is that ? Here is a example of my code
import React from 'react';
import'./Welcome.css';
import { Button, Container, Col, Row } from 'react-bootstrap';
class Welcome extends React.Component {
render() {
return(
<div className="welcome">
<Container>
<Row className="justify-content-center">
<Col>
<Button variant="primary" size="lg">Large button</Button>
</Col>
</Row>
</Container>
</div>
);
}
}
export default Welcome;
I'm fairly new to react as well, more so to react-bootstrap but I am very familiar with bootstrap, this has me ready to just use CSS grid or flex and not use bootstrap's grid lol. So if anyone can help me out that would be great and much appreciated.
Try This.
<Container>
<Row>
<Col md={{ order: 'last' }}>First, but last</Col>
<Col md>Second, but unordered</Col>
<Col md={{ order: 'first' }}>Third, but first</Col>
</Row>
</Container>
Related
I have a simple one page app.
In the header, I have redirects to different parts of the website.
for some mysterious reason, the redirects for 'features' is not working all the way.
the redirect scrolls the user to somesort of half point. so a bit of the element is being cut off
here is the code::
https://codesandbox.io/s/bosky-active-ow4qs7
here is the features component:
https://codesandbox.io/s/bosky-active-ow4qs7?file=/src/Components/Features/index.js
here is the header component:
https://codesandbox.io/s/bosky-active-ow4qs7?file=/src/Components/NavigationBar.js
I found a few similar StackOverflow post such as this one but their solution i already implemented so I am not sure what the issue is.
i could add padding on top of the 'features' element, then wrap it with another element and make the header anchor tag point to the parent element. but i don't think i want to do that
In the feature component, put the margins in the col components instead of the row. It's related to the fixed navbar, the other elements must have a spacing top.
import { Row, Col, Image } from "react-bootstrap";
const Feature = () => {
return (
<Row id="features">
<Col sm={7} className="px-4 my-5">
<Image src="https://picsum.photos/900/400" fluid rounded className="" />
</Col>
<Col sm={5} className="px-4 my-5">
<h1 className="font-weight-light">Use widget from website</h1>
<p className="mt-4">
Create dyanmic reports such as pie graphs, histographs
</p>
</Col>
</Row>
);
};
export default Feature;
I am making my first ever website in React. I want to use Bootstrap's grid system, but I don't really know when I should use this or rather how extensively.
Is the grid system best in places like App.js and in each individual component? Just in each individual component? Just in App.js?
I use React-Bootstrap. I've found it very simple to get going with, and the intellisense you get in VS Code is great.
To get started, just:
npm install react-bootstrap
You can see a list of all of the components here.
Then you just add the components that you want to use to your import.
import {
Navbar,
Container,
Nav,
NavbarBrand,
Row,
Col,
{...}
} from "react-bootstrap";
Then in your rendered output, for example:
return (
<Container>
<Navbar>
<NavbarBrand>Brand</NavbarBrand>
<Navbar.Collapse>
<Nav>
<NavItem>Item 1</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
<Row>
<Col md={4}>
</Col>
<Col md={4}>
</Col>
<Col md={4}>
</Col>
</Row>
</Container>
);
We can use plain bootstrap to use grid system. We have to use it inside most of the component according to the requirement to make is responsive.
Easy Option:
There are other options to use bootstrap inside react like component libraries. You can use either Reactstrap or React-Bootstrap. These libraries provide components by which you can easily create website with react and power of bootstrap.
I recently started using Ant Design and I noticed people can solve the problem with React Components and css classes. In the docs I can't find anything regarding the css classes, But I personally prefer the css classes approach. How can I learn more about the available css classes so I can avoid importing all those Components?
import 'antd/dist/antd.css';
import { Row, Col } from 'antd';
<Row>
<Col xs={24} xl={8}>
One of three columns
</Col>
<Col xs={24} xl={8}>
One of three columns
</Col>
<Col xs={24} xl={8}>
One of three columns
</Col>
</Row>
or:
<div className="ant-row">
<div className="ant-col ant-col-xs-24 ant-col-xl-8">
One of three columns
</div>
<div className="ant-col ant-col-xs-24 ant-col-xl-8">
One of three columns
</div>
<div className="ant-col ant-col-xs-24 ant-col-xl-8">
One of three columns
</div>
</div>
I don't think Ant is meant to be used with classes. React components guarantee the API, the HTML structure and the javascript logic works well together. You could try to reproduce the UI using the same HTML structure with the classes but that won't be easy to maintain.
If you're looking for a CSS based framework, you should look at Tailwind CSS or similar libraries.
I am using gatsby-plugin-image's StaticImage component in my web app, and I am having trouble changing objectFit's property from 'cover' to 'contain.'
Here is a sample of my code:
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import { StaticImage } from 'gatsby-plugin-image'
export default function About() {
return (
<div id="about">
<Container fluid >
<Row className="justify-content-center align-items-center">
<Col md={12} >
<StaticImage src="../images/coolImage.JPG" objectFit="contain" alt="Profile Picture" />
</Col>
</Row>
</Container>
</div>
)
}
I have also tried using style={{ objectFit: 'contain' }} and imgStyle={{ objectFit: 'contain' }} to see if using those props would change the styling. I'm using Sass to style other parts of the website as well, and adding that styling option via Sass and class names isn't working either.
Any ideas as to why the default object-fit: 'cover' won't change?
There's a prop 'objectFit' (along with 'objectPosition') that can be passed to StaticImage directly. I'd try that. My guess is that your passed styles are being overwritten inside StaticImage, but passing the direct props would fix it. https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/
I had to add style={{height: "100%"}} as a prop to StaticImage in order to make an image cover a full view-height container. The image wrapper does not automatically take the whole space of the container element.
I am having an issue with Gatsby bootstrap or react-bootstrap (not sure yet, most likely it is bootstrap). Everything looks great when I build and serve gatsby website, it has all bootstrap classes and nice grid ( 2 columns, one is md="8" another is md="4"). But once I reload the page and when I inspect the code in the Chrome browser, bootstrap classes disappear.
Code in Gatsby page (added className just to make sure that it is not coming after reaload):
{window.innerWidth > 992 ? (
<Col md="8">
<NameAndHealine />
<ListingText />
</Col>
<Col md="4">
<PricingSidebBar />
</Col>
) : (
<Col xs="12">
<NameAndHealine />
</Col>
<Col xs="12">
<PricingSidebBar />
</Col>
<Col xs="12" className="mt-5">
<ListingText />
</Col>
)
Code example before page reload:
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
Code example after page reload:
<div class="col-12">...</div>
<div class="col-12">...</div>
Steps what I tried to solve the problem:
Import bootstrap.css and bootstrap.js inside gatsby-browser.js
Add extra className with bootstrap classes to make sure it is not coming after page reload.
EDIT:
I found the issue, it is with window.innerWidth as I was ordering components depending on it. I changed it to multiple rows and set display classes for different screens. After page reload Gatsby doesn't take classes when it is inside if (window.innerWidth > 992) (why?). If someone knows the answer please let me know, thanks.
EDIT 2
Added extra code above