I have an old react website that I'm starting to work on again. I made no changes to the code except updating packages to their current versions. npm start starts up with no issues. The problem is, nothing is centered the way it is supposed to be.
My assumption is that bootstrap updated and containers are handled differently. Below is my home.js
import React from 'react'
import Header from '../Header/Header';
import Footer from "../Footer";
import MachineLearningCard from './Card/Card';
import HowWeUse from './HowWeUse/HowWeUse';
import './home.css';
import { useNavigate } from 'react-router-dom';
import { Container, Row, Col, Image, Button } from 'react-bootstrap';
import { Hidden } from '#material-ui/core';
const Home = () => {
const history = useNavigate()
return (
<div>
<header className="home__HeaderContainer">
<Header />
<Container fluid>
<Row>
<Col md={7} sm={12}>
<div className="home__leftSideContainer">
<h1 className="home__headerHeroTextTitle">
RandomText <span className="home__headerHeroTextSpan">RandomText</span> Some more RandomText
</h1>
<p className="home__headerHeroTextDescription">
Even more RandomText.
</p>
<Button
bsPrefix="home__getStarted"
onClick={() => history("/register")}
>Get Started</Button>
</div>
</Col>
<Hidden xsDown>
<Col md={5}>
<Image
src={HeaderHeroImage}
alt="home-hero-image"
fluid
style={{ width: 600, marginTop: 50 }}
/>
</Col>
</Hidden>
</Row>
</Container>
<Hidden smUp>
<img
src={HomeChevron}
alt="Chevron Down"
className="header__chavron_down"
/>
</Hidden>
</header>
className="home__headerHeroTextTitle and className="home__headerHeroTextDescription" are centered. However, the home-hero-image should be the the right of the RandomText, but it is below and to the left of it. Below is the css
.home__HeaderContainer {
background-image: url("../../assets/images/home-bg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 800px;
}
.home__HeaderContainer {
background-image: url("../../assets/images/Hero bg-mobile.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0px 0px 0px 100px;
min-height: 500px;
}
I tried researching what changed in bootstrap but I could not find anything. The only logical explanation I can come up with is containers are handled different because everything is not centered.
I had to do the following and it fixed my issue
npm i bootstrap
and
add import 'bootstrap/dist/css/bootstrap.min.css' to index.js
Related
I am following a tutorial where a person is teaching me how to write Bootstrap code. They created a top bar that goes across the entire browser width with the following code
CSS
.top-bar {
background: #7aaec4;
height: 2.8rem;
padding: .5rem 0;
}
.topbar a {
color: #fff;
text-decoration: none;
font-size: 1.1rem;
}
HTML Code
<div class="top-bar">
<div class="container">
<div class="col-12 text-right">
<p>
Call us at +1 (888) 555-5555
</p>
</div>
</div>
</div>
The code above created the top bar which runs across the browser width and has a specific height as well.
Now I am trying to get the same behavior but with react-bootstrap and styled-components. So I wrote this code
import React from 'react';
import {Container, Row, Col} from 'react-bootstrap';
import styled from 'styled-components';
const Styles = styled.div`
background: #7aaec4;
height: 2.8rem;
padding: .5rem 0;
text-align: right;
a {
color: #fff;
text-decoration: none;
font-size: 1.1rem;
};
`;
export const TopBar = () => {return (
<Container>
<Styles>
<Row>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
Call us at +1 (888) 555-5555
</Col>
</Row>
</Styles>
</Container>
)}
And then finally use my component as
<React.Fragment>
<GlobalStyles />
<TopBar />
<div>Hello World</div>
</React.Fragment>
I see that the topbar is not running across the browser screen. it looks like this
If someone can let me know if I'm using an improper format in order to load an image on react that would be amazing! I'm not an expert and any advice is greatly appreciated -- thank you in advance. The image that populates when I run the code just shows a broken img icon and when I try to run through the terminal it says that the image is called but not loaded.
import React, { Component } from "react";
import PropTypes from "prop-types";
import Logo from "/Users/mauromartineziii/aqua-financial/src/logo.png";
import "./App.css";
import Photo from "/Users/mauromartineziii/aqua-financial/src/pexels-photo-3560168.jpeg";
class App extends Component {
render() {
return (
<div>
<section>
<header>
<img
src="/Users/mauromartineziii/aqua-financial/src/logo.png"
width="333"
alt="Aqua Financial"
/>
<div>
<ul>
<li>Financial Services</li>
<li>Liquid Capital Asset</li>
<li>Retirement</li>
</ul>
</div>
</header>
</section>
<section id="main">
<img src="Photo"></img>
<div className="main-text">
<span>Learn What An LCA™ Can </span> <br /> Do For You <br />
</div>
<div className="right-text">
<span>Innovation Driven Banking</span>
</div>
<div>
{" "}
<button>Learn More</button>
</div>
</section>
</div>
);
}
}
export default App;
body {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
section {
margin: 0 120px;
}
header {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 50px;
}
header div {
margin-left: auto;
font-size: 20px;
}
header ul li {
display: inline-block;
margin: 0 20px;
}
#main {
margin: 0 120px;
margin-top: 200px;
display: grid;
grid-template-columns: 1fr 1fr;
}
#main .main-text {
font-size: 45px;
font-weight: 700;
line-height: 1.5;
}
`
It's a good idea to place the images you use in your project in the project directory and import them with a relative path, e.g:
import Logo from "./logo.png";
You also want to use the the resulting variables for your img tags.
<img
src={Logo}
width="333"
alt="Aqua Financial"
/>
// ...
<img src={Photo} />
I'm building a new project using reactJS, nodeJS, and react-bootstrap. When setting up my landing page. There is a gap in the margin on the right side of the page that won't go away, no matter what I try.
.I've tried including the meyer's reset css file in the index.html.
.I've tried setting margins, borders, and padding on the Body element to zero.
.I've tried setting my Container to width: 100%.
.I've tried resizing the background image.
.I've tried including the bootstrap 4 cdn in my index.html.
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import LandingPage from './components/landingpage';
import Header from './components/header';
import Footer from './components/footer';
import './App.css';
class App extends Component {
render() {
return (
<Router>
<Header/>
<Switch>
<Route exact path='/' component={LandingPage}/>
</Switch>
<Footer/>
</Router>
);
}
}
export default App;
App.css
/* {
box-sizing: border-box;
}*/
body {
background-image: url('./images/background.jpg');
background-repeat: no-repeat;
background-position: center center;
/*background-size: cover;*/
font-family: 'Courgette', cursive;
color: beige;
font-size: 28px;
text-align: center;
max-width: 100%;
margin: 0;
border: 0;
padding: 0;
}
.container {
margin: 0;
padding: 0;
width: 100%;
}
.courgette {
font-family: 'Courgette', cursive;
}
.lobster {
font-family: 'Lobster', cursive;
}
header.js
import React from "react";
import './header.css';
import { Container, Row, Col } from 'react-bootstrap';
import { Link } from "react-router-dom";
const Header = () => {
return(
<Container className='header'>
<Row>
<Col>
<Link href="#">
<img className='hamburgermenu' src={require('./../../images/navbaricon.png')} alt='Hamburger Menu Icon'/>
</Link>
</Col>
<Col>
<h1>MDNight</h1>
</Col>
<Col>
<p>Hello!</p>
</Col>
</Row>
</Container>
)
}
export default Header;
header.css
.header{
background-color: maroon;
margin: 0;
}
.hamburgermenu {
height: 80px;
width: auto;
}
The header is supposed to extend to the edge of the page, but it does not.
There is any margin gap in the application.
I am using react-bootstrap 1.0.0-beta.3, which is build for supporting bootstrap 4 update.
Before this I was using react-bootstrap 0.32.1 and created Accordion using Panels and Panel group.
But after bootstrap upgrade it was suggested to Card component. I tried to achieve the same behavior like this:
<CardGroup>
<Card eventKey={this.state.eventKey} className="border-0">
<Card.Header>
<div className="row">
<div className="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<Card.Title>
This is test
</Card.Title>
</div>
<div className="col-xs-3 col-sm-3 col-md-3 col-lg-3">
Test Text 123
</div>
</div>
</Card.Header>
<Card.Body>
Test Text 456
</Card.Body>
</Card>
</CardGroup>
I am facing couple of issues here:
How to make one card to take the full width.
How to make this structure behave like accordion.
Something like this:
You'll need to create custom components and css classNames.
Working example: https://codesandbox.io/s/8zkrw9jw50
components/Accordian.js
import React from "react";
import Card from "../../components/Card";
const panels = [
"Add Edit Menus",
"Resource Management",
"Asset Management",
"User Management",
"Account Management"
];
export default () => (
<div className="app-container">
<div className="accordion-container">
{panels.map(title => (
<Card key={title} title={title} />
))}
</div>
</div>
);
components/Card.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Row, Col, Card } from "react-bootstrap";
import Collapse from "../Collapse";
import Button from "../Button";
const { Body, Header, Title } = Card;
class CardComponent extends Component {
state = { isActive: false };
toggleVisibility = () =>
this.setState(prevState => ({ isActive: !this.state.isActive }));
render = () => (
<div className={`${this.state.isActive ? "active" : "inactive"}`}>
<Card>
<Header style={{ padding: 0 }}>
<Row>
<Col xs={9}>
<Button onClick={this.toggleVisibility}>
{!this.state.isActive ? "+" : "-"}
</Button>
<Title style={{ display: "inline-block" }}>
{this.props.title}
</Title>
</Col>
<Col style={{ paddingTop: 7 }} xs={3}>
Test Text 123
</Col>
</Row>
</Header>
<Collapse>
<Body style={{ padding: 10 }}>Test Text 456</Body>
</Collapse>
</Card>
</div>
);
}
export default CardComponent;
CardComponent.propTypes = {
title: PropTypes.string.isRequired
};
components/Button.js
import styled from "styled-components";
const StyledButton = styled.button`
color: #909090;
background-color: transparent;
font-weight: bold;
outline: none;
border: 0;
cursor: pointer;
font-size: 22px;
transition: all 0.3s ease-in-out;
margin: 0 15px;
width: 25px;
&:hover {
color: #333333;
}
&:focus {
outline: none;
}
`;
export default StyledButton;
components/Collapse.js
import React from "react";
import PropTypes from "prop-types";
const Collapse = ({ children }) => (
<span className="folding-pannel">{children}</span>
);
export default Collapse;
Collapse.propTypes = {
children: PropTypes.node.isRequired
};
styles.css
.accordion-container {
width: 100%;
}
.app-container {
margin: 20px;
}
.active,
.inactive {
margin-bottom: 5px;
}
.active .folding-pannel {
transition: all 0.3s ease-in-out;
height: 42px;
}
.inactive .folding-pannel {
transform: perspective(0px) rotateX(90deg);
transition: all 0.3s ease-in-out;
height: 0;
}
I have the following code:
// #flow
import React from 'react';
import { Route } from 'react-router-dom';
import Split from '../../components/grouping/Split';
import CenterBox from '../../components/grouping/CenterBox';
import styled from 'styled-components';
type Props = {
routes: Array<Object>,
background: String
};
export default ({ routes, background }: Props) =>
(<div>
<Split push="right" alignItems="center" height={50} pad={{ horizontal: 20 }}>
<div />
<div>This feature will be available soon!</div>
</Split>
<DashboardContent background={background}>
<CenterBox>
<div style={{ transform: 'translateY(50%)' }}>
<CenterBox height={300} width={500} backgroundColor="#FFFFFF">
This feature is not included as part of the design beta and will be available soon
</CenterBox>
</div>
</CenterBox>
</DashboardContent>
</div>);
const DashboardContent = styled.div`
background: url(${props => props.background}) no-repeat top
center;
background-size: 100%;
min-height: 100vh;
`;
I would like to pass background as a prop to my styled component so that when it is passed a link to an image file it sets it as a background, the code compiles but the background does not show up. What am I doing wrong?
Changing your background property to be a function that returns a string will fix your issue.
background: ${props => `url(${props.background}) no-repeat top center`};
Is this going to work out fine?
const DashboardContent = styled.div`
background: url(${props => props.background}) no-repeat top center;
`
<DashboardContent background={`https://xxxx/xxxx${background}`}/>
This worked for me!
import styled from 'styled-components';
import img from './img/background.gif';
const Content = styled.div`
background-image: url(${img});
`;