Checked the docs and my code still won't center horizontally.
import React from 'react';
import '../css/Header.css';
import Container from 'react-bootstrap/Container';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
const Header = () => {
return (
<header className='d-flex justify-content-center header' style={{ backgroundImage: `url("/images/header.png")` }}>
<Container fluid>
<Row>
<Col>
<div className={'website-title'}>
My Website
<div className={'bracket bracket-1'}></div>
<div className={'bracket bracket-2'}></div>
<div className={'bracket bracket-3'}></div>
<div className={'bracket bracket-4'}></div>
</div>
</Col>
</Row>
</Container>
</header>
)
}
export default Header;
I'm using the "d-flex justify-content-center" class like the docs suggest. Any ideas what i'm doing wrong here?
You can try to place the <header> inside the <Container>
Put it in a div and the side margins of the header should center in it
Related
I used default create-react-app to create a react app. However, when i try to add cards that contain pictures my image does not render. I get a white screen....
My image is located in a folder in src called Images. The rest works until I add in the Card prop and then the screen goes fully white. So I suppose that means it is not working or rendering properly.
import React from 'react';
export default function Card(props) {
return (
<div className="card">
<img src={require("./Images/monstera.jpeg")} alt="monstera"></img>
<div className="card-stats">
<p>{props.name}</p>
<p>{props.price}</p>
</div>
</div>
)
}
import logo from './logo.svg';
import './App.css';
import React from 'react';
import Header from './Components/Header';
import Inventory from './Components/Inventory';
import Cart from './Components/Cart';
import data from './data';
import Card from './Components/Card';
function App() {
return (
<div className="App">
<Header></Header>
<div className="row">
<Inventory>
<div className="cards-list">
<Card>
</Card>
</div>
</Inventory>
<Cart></Cart>
</div>
</div>
);
}
export default App;
Is there something I am doing wrong? Is there a special way to render a react app with an image?
look for any error through console and try cleaning your code a little
turn this
function App() {
return (
<div className="App">
<Header></Header>
<div className="row">
<Inventory>
<div className="cards-list">
<Card>
</Card>
</div>
</Inventory>
<Cart></Cart>
</div>
</div>
);
}
export default App;
into this
function App() {
return (
<div className="App">
<Header />
<div className="row">
<Inventory />
<div className="cards-list">
<Card />
</div>
<Cart />
</div>
</div>
);
}
export default App;
if not required don't use so many div
I'm having trouble with React. I've read the documentation but I'm still confused as to what steps need to be taken.
I have created PrimaryLayout and using props children items is called. In the index file(Page) the PrimaryLayout is called and embedded card component.
However, in the output I am seeing duplicate components.
Appreciate your help.
Please find below code
PrimaryLayout.js
import React from 'react'
import Header from "../components/Header"
import FooterMessage from "../components/FooterMessage"
const PrimaryLayout = (props) => (
<div>
<Header/>
<div className="container">
<div className="row justify-content-md-center">
<div className="col-xs-6">
{props.children}
</div>
</div>
</div>
<FooterMessage/>
</div>
);
export default PrimaryLayout;
Card Component
import React from 'react'
import {Card, Button} from 'react-bootstrap'
const CardBox = (props) => (
<div className ="p-3">
<Card>
<Card.Img variant="top" src="https://loremflickr.com/640/360" />
<Card.Body>
<Card.Title>{props.titleFirst}</Card.Title>
<Card.Text>{props.description}</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card>
<Card.Img variant="top" src="https://loremflickr.com/640/360" />
<Card.Body>
<Card.Title>{props.titleSecond}</Card.Title>
<Card.Text>{props.description}</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</div>
);
export default CardBox;
Index.js
import React from "react"
import CardBox from "../components/CardBox"
import PrimaryLayout from "../layouts/PrimaryLayout"
export default () => (
<PrimaryLayout>
<CardBox
titleFirst="This is my first post"
description = "We are writing something to be displayed in description"
/>
<CardBox
titleSecond="This is my first post"
description = "We are writing something to be displayed in description"
/>
</PrimaryLayout>
)
If I understand it correctly, this has to do with the CardBox component. Right now you create 2 Card components within the CardBox component. This means that for every CardBox component you'll get 2 Card components. The first Card with titleFirst and the description, the second Card with titleSecond and the description.
If you change the BoxCard component to display the Card only ones like so:
const CardBox = (props) => (
<div className ="p-3">
<Card>
<Card.Img variant="top" src="https://loremflickr.com/640/360" />
<Card.Body>
<Card.Title>{props.title}</Card.Title>
<Card.Text>{props.description}</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</div>
);
and let the index.js use it like so:
export default () => (
<PrimaryLayout>
<CardBox
title="This is my first post"
description = "We are writing something to be displayed in description"
/>
<CardBox
title="This is my first post - second CardBox"
description = "We are writing something to be displayed in description"
/>
</PrimaryLayout>
);
Hope this is what you are looking for!
I am new to react,
I am learning react, In this process I tried to create a for componentdidmount forreact. Were I am stuck in the following code
Below is my code
import React from "react";
import {Card, Button, Container, Row, Col} from 'react-bootstrap';
import addquantity from '../Functions/quantityadd.js';
const numberOfCards = 100;
const Home = (props) => {
componentdidMount(){
console.log('First this called');
}
return (
<div>
<h2>Home</h2>
<Container>
<Row xs={3} md={4} lg={6}>
{[...Array(numberOfCards)].map((e, i) => {
return (
<Col className='mt-5' key={i+1}>
<Card >
{/* <Card.Img top width="100%" src="/images/companylogo.png" alt="Card image cap"/> */}
<Card.Body>
<Card.Title tag="h5">Test</Card.Title>
<Card.Subtitle tag="h6" className="mb-2 text-muted">Card subtitle</Card.Subtitle>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the
card's
content.</Card.Text>
<Button onClick={() =>addquantity(i+1)}>Button</Button>
</Card.Body>
</Card>
</Col>
)
})}
</Row>
</Container>
</div>
);
}
export default Home;
I need to load the data of the product list. so I am using componentdidmount
Can you help me to understand what I am doing wrong here.
Thanks in advance
first of all this is "componentDidMount"
And in functional components we use "useEffect" for life cycle hooks and
"componentDidMount" is for class components
I'm trying to make a responsive grid system in react.js
I want to show 3 cards in a row. Each card consists of 4 columns.
But I want to make only 1 component which will render my cards and show them on screen. But i'm unable to make the logic of dynamically showing these cards in a row as a row contains only 3 cards. After that next row will start
Here is my card Component code
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button, Container, Row, Col
} from 'reactstrap';
const INNERCARD = (props) => {
return (
<Container>
<Row>
<Col md={3}>
<Card>
<CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap"/>
<CardBody>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the
card's
content.</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
};
export default INNERCARD;```
I got this working with a little bit of tinkering. Never used reactstrap before, so it was fun to play around with it a bit. First you need to also install bootstrap into your project, not sure if you knew that or not. Then you need to include the bootstrap css file in your index.js file.
So I am using a freshly installed CRA app. The top of my index.js looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
So once you have Bootstrap installed and imported it, then you can play around with reactstrap, assuming that is also installed. I learned from the docs that you want <Row xs={3}> if you want 3 cards per row.
So here is my full App.js file that works with any number of cards and shows 3 per row:
import './App.css';
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button, Container, Row, Col
} from 'reactstrap';
function App() {
// obviously I am just hard-coding in a random number here. This is where
// you would have a call to an API or something where you would get all
// your card data from, ideally that API call would return an array of data
// and then you could just map over that array to output the card data
// down below in the render section
const numberOfCards = 11;
return (
<div className="App">
<Container>
<Row xs={3}>
{[...Array(numberOfCards)].map((e, i) => {
return (
<Col>
<Card>
<CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap"/>
<CardBody>
<CardTitle tag="h5">Card title #{i+1}</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the
card's
content.</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Col>
)
})}
</Row>
</Container>
</div>
);
}
export default App;
Forgot to include what it looks like! Here it is!
//Mapping over the Bootstrap Card and then displaying them in the Grid formate
import React from 'react'
import { Col, Container, Row } from 'react-bootstrap';
// Array of Data
const StudentData = [
{
Name: "Waji",
Degree: "Bachlorrs"
},
{
Name: "Zain",
Degree: "Matric"
},
{
Name: "Rahat",
Degree: "B.Com"
},
{
Name: "Wajahat",
Degree: "Bachlorrs"
},
{
Name: "Sabi",
Degree: "Bachlorrs"
}
]
let NewCard = () => {
return (
<Row>
{StudentData.map((props) => {
return (
<Col sm={6} md={4} className='mt-3'>
<div className="card" style={{ width: '18rem' }}>
<div className="card-body">
<h5 className="h5">{props.Name}</h5>
<p className="card-text">{props.Degree}</p>
Click
</div>
</div>
</Col>
)
})}
</Row>
)
}
export default function MyCard() {
return (
<Container>
<NewCard
title=''
calss=''
/>
</Container>
)
}
ReactDOM.render(
<MyCard />,
document.getElementById('root')
)
Creates the following:
I am trying to create a deck of cards using reactstrap. I want the cards to be aligned horizontally but the cards are aligned vertically. Can someone please tell me how achieve this? Thanks
These are the two Components
import React, { Component } from "react";
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardSubtitle,
Button,
Col
} from "reactstrap";`
class MovieItem extends Component {
render() {
return (
<Card>
<CardTitle>Title</CardTitle>
</Card>
);
}
}
export default MovieItem;`
MovieList.js
import { Row, Col, CardDeck, CardGroup, Container } from "reactstrap";
import React, { Component } from "react";`
import MovieItem from "./MovieItem";`
class MoviesList extends Component {
render() {
let movies;
if (this.props.movies) {
movies = this.props.movies.map(movie => {
return <MovieItem key={movie.id} movie={movie} />;
});
}
return (
<Container fluid>
<CardDeck> {movies}</CardDeck>
</Container>
);
}
}
export default MoviesList;
As Bootstrap and Reactstrap Card said, you can integrate them like this :
<Row>
<Col>
<Card>
<Row className="no-gutters">
<Col md="4">
<CardImg
top
width="100%"
src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180"
alt="Card image cap"
/>
</Col>
<Col md="8">
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>
Some quick example text to build on the card title and
make up the bulk of the card's content.
</CardText>
<Button>Button</Button>
</CardBody>
</Col>
</Row>
</Card>
</Col>
</Row>
I have encountered the same problem. The basic solution is to put your group of cards inside a Row Component. This is a snippet from my code.
<Container fluid>
<Row>
<ClassroomCard/>
<ClassroomCard/>
<ClassroomCard/>
</Row>
<Row>
<ClassroomCard/>
<ClassroomCard/>
<ClassroomCard/>
</Row>
</Container>
Later, it's up to you to change the style of your elements accordingly. I hope this will help those who will encounter this problem in the future.