react-bootstrap Container JavaScript Examples

Source File: App.js From mern_library_nginx with MIT License

6 votes

App = () => {
   return (
      <Router>
         <Header />
         <main className="py-3">
            <Container>
               <Route exact path="/" component={HomePage} />
               <Route exact path="/books" component={BookListPage} />
               <Route exact path="/books/:id" component={BookPage} />
            </Container>
         </main>
         <Footer />
      </Router>
   );
}

Source File: App.js From real-time-web-samples with MIT License

6 votes

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/admin">
          <NoticeForm />
        </Route>
        <Route path="/">
          <Container fluid="true" className="mt-5 pt-2">
            <Row>
              <Col md="8" className="mb-3">
                  <VideoPart />
              </Col>
              <Col md="4">
                  <ChartPart />
              </Col>
            </Row>
          </Container>
        </Route>
      </Switch>
    </Router>
  );
}

Source File: Navigation.js From Cross-woc with MIT License

6 votes

function Navigation() {
    return (
      <>
          <Navbar className='nav-container' collpseOnSelect fixed='top' expand='sm' variant='dark'>
                <Container>
                    <Navbar.Brand className='logo' href="/">CrossWoc</Navbar.Brand>
                    <Navbar.Toggle aria-controls='responsive-navbar-nav' />
                    <Navbar.Collapse id='responsive-navbar-nav' className='justify-content-end'>
                        <Nav className='navbar'>
                            <Nav.Link href='/about'>ABOUT</Nav.Link>
                            <Nav.Link href='/schedule'>SCHEDULE</Nav.Link>
                            <Nav.Link href='/project'>PROJECTS</Nav.Link>
                            <Nav.Link href='/leaderboard'>LEADERBOARD</Nav.Link>                        
                            <Nav.Link href='#sponsors'>SPONSORS</Nav.Link>                        
                            <Nav.Link href='/faq'>FAQ</Nav.Link>                        
                            <Nav.Link href='/team'>TEAM</Nav.Link>                                                   <Nav.Link href='#contact'>CONTACT</Nav.Link>                       
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar> 
         <br></br> 
         <br></br>
      </>
    )
}

Source File: AppContainer.js From Otto with MIT License

6 votes

function App() {
  return (
    <Container className={"vh-100"} fluid>
      <StateProvider>
        <NNStateProvider>
          <ModelStateProvider>
            <Row className={"headerContainer"}>
              <HeaderContainer />
            </Row>
            <Row className={"contentContainer"}>
              <ContentContainer />
            </Row>
            <WidgetContainer />
          </ModelStateProvider>
        </NNStateProvider>
      </StateProvider>
    </Container>
  );
}

Source File: index.js From RC4Community with Apache License 2.0

6 votes

Greenroom = () => {
  const [openChat, setOpenChat] = useState(false);

  const handleOpenChat = () => {
    setOpenChat((prevState) => !prevState);
  };
  return (
    <>
      <Head>
        <title>Conference Green Room</title>
        <link rel="icon" href="../../rocket_gsoc_0" />
      </Head>
      <main className={styles.main}>
        <div className={styles.container}></div>
        <Container>
          <Row>
            <Col>
              <Jitsibroadcaster
                room={"GSOC Alumnus Meet"}
                disName={"Speaker"}
                handleChat={handleOpenChat}
              />
            </Col>
            {openChat && (
              <Col xs={4}>
                <InAppChat
                  host={host}
                  closeChat={handleOpenChat}
                  rid={greenroom_rid}
                />
              </Col>
            )}
          </Row>
        </Container>
      </main>
    </>
  );
}

Source File: LeftAuth.jsx From hiring-channel-frontend with MIT License

6 votes

LeftAuth = () => {
  return (
    <>
      <div className="component-logo">
        <Container>
          <Row className="no-gutters">
            <Col md={12} className="logo-arka">
              <img src={logoArka} alt="logo-arka" />
            </Col>
            <Col md={12} className="logo-human-report">
              <img src={humanReport} alt="logo-human-report" />
            </Col>
            <Col md={12} className="title-hire">
              <Row className="no-gutters">
                <Col md={2}></Col>
                <Col md={8}>
                  <p className="hire">
                    Hire Expert freelancers for any job, online
                  </p>
                  <p className="hire-small">
                    Millions of small businesses use Freelancer to turn their
                    ideas into reality.
                  </p>
                </Col>
                <Col md={2}></Col>
              </Row>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
}

Source File: layout.js From LearningJAMStack_Gatsby with MIT License

6 votes

Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <main>
        <Container className="justify-content-md-center">{children}</Container>
      </main>
      <footer className="footer mt-auto py-3 bg-light text-black text-center">
        © {new Date().getFullYear()},
        {` `}
        Atom Yah (このサイトは書籍「JAMStackを学ぼう Gatsby+ReactBootstrap+Netlifyでつくる企業サイト」用のサンプルです)
      </footer>
    </>
  );
}

Source File: layout.js From LearningJAMStack_microCMS_template with MIT License

6 votes

Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <main>
        <Container className="p-3">{children}</Container>
      </main>
      <footer className="footer mt-auto py-3 bg-light text-black text-center">
        © {new Date().getFullYear()}, Built with
        {` `}
        Atom Yah (このサイトは書籍「JAMStackを学ぼう Gatsby+microCMSでつくる企業サイト」用のサンプルです)
      </footer>
    </>
  );
}

Source File: PageNotFound.js From clayma-store with MIT License

6 votes

export default function PageNotFound() {
  return (
    <div>
    <TopBanner/>
    <HeroImage/>

      <NavBar />
      <Container>
        <div className="container-page-not_found">
        
          <img src={PageNotFoundImage} alt="NotFound" />
        </div>
      </Container>
      <Footer/>
    </div>
  );
}

Source File: maintenancePage.js From community-forum-frontend with GNU General Public License v3.0

6 votes

function MaintenancePage() {
  return (
    <Container className="common-page-maintenance-container">
      <Row className="center-row">
        <Col>
          <h2 className="main-heading">
            <PowerIcon />
            Under Maintenance
          </h2>
          <Image
            src={maintenanceImage}
            className="common-page-maintenance-image"
          />
          <h6 className="common-page-maintenance-message">
            We are currently under maintenance. Apologies for the
            inconvenience caused. Please check back sometime later.
          </h6>
        </Col>
      </Row>
    </Container>
  );
}

Source File: notFound.jsx From CovidIndiaStats with MIT License

6 votes

NotFound = () => {
  return (
    <Container>
      <h1>Oops..</h1>
      <h6>
        The page you are looking for isn't available, please head back to{" "}
        <Link to="/" style={{ color: "#3e4da3" }}>
          Home
        </Link>
        .
      </h6>
    </Container>
  );
}

Source File: Faq.js From masakhane-web with MIT License

6 votes

export default function FAQPage() {
    return(
        <div>
            <Container className="my-4">
                <Card style={{ width: '100%' }}>
                    <Card.Body>
                        <Card.Title>FAQ</Card.Title>
                        {/* <Card.Subtitle className="mb-2 text-muted">Enter  subtitle here</Card.Subtitle> */}
                        <div>
                            <Card.Text style={{ fontSize: 16, color: 'black' }}>
                            1. I was not happy with the translation I got from the service.
                            </Card.Text>
                        </div>
                        <br />
                        <div>
                            <Card.Text style={{ fontSize: 14, color: 'grey' }}>
                            Thank you for trying this service. The Masakhane NLP Translation project built the models used to do the translation. 
                            This website provides a way for us to be able to test how well these models work. This service is still a work in progress and we expect the models to be improved every few months as we get more feedback from users such as yourself. 
                            Please do provide feedback by writing where there is a mistake in the translation so we can provide this information to the researchers. 
                            As such, this service is not a production system (should not be used for official translations).
                            </Card.Text>
                        </div>
                        <br />
                    </Card.Body>
                </Card>
            </Container>
        </div>
    )
}

Source File: index.js From Devhipster with MIT License

6 votes

render() {
        const { vagas, loading } = this.state;
        return (
            <>
            { loading ? <Loader /> : (
                <Container>
                    <div className='p-5'></div>
                    <h3 className="text-white">Vagas Front end</h3>
                    <Row>
                        {vagas.map(vaga => (
                            <Col md={4} key={vaga.id}>
                                <div className='p-3'></div>
                                <Card className="dark shadow-lg" style={{ minHeight: '186px', maxHeight: '224px' }}>
                                    <Card.Text className="text-success">{vaga.state ? 'ABERTA' : 'FECHADA'}</Card.Text>
                                    <Card.Link href="#">
                                        <Card.Title className="text-white">{vaga.title}</Card.Title>
                                    </Card.Link>
                                    <div className="y">{vaga.labels.map(label => (
                                        <Card.Title key={label.name} style={{float:'left'}}>
                                            <div> #{label.name} </div>
                                        </Card.Title>
                                    ))}</div>
                                </Card>
                            </Col>
                        ))}
                    </Row>
                </Container>
            ) }
            </>
        )
    }

Source File: 404.js From flotiq-blog with MIT License

6 votes

NotFoundPage = () => {
    const data = useStaticQuery(query);
    return (
        <main className="light-blue-background">
            <Helmet>
                <title>
                    Page not found -
                    {' '}
                    {data.allFlotiqMainSettings.nodes[0].title}
                </title>
            </Helmet>
            <Navbar />
            <Container className="text-center pt-5 pb-5">
                <img src={HeaderImage} alt="404" className="pt-5 pb-5" />
                <h1 className="pb-5">Whooops!</h1>
                <p className="text-gray pb-2">404 Not Found</p>
                <h4 className="pb-3">Sorry, the page you are looking for doesn&apos;t exist</h4>
                <Button
                    click={() => { window.location.href = '/'; }}
                    additionalClasses={['btn-with-chevron mt-5 mb-5 ml-auto mr-auto']}
                >
                    Go back Home
                </Button>
            </Container>
            <Footer />
            <CookieInfo cookieText={data.allFlotiqMainSettings.nodes[0].cookie_policy_popup_text} />
        </main>
    );
}

Source File: Login.js From radio-logger with GNU General Public License v3.0

6 votes

render() {
    // NOTE: I use data-attributes for easier E2E testing
    // but you don't need to target those (any css-selector will work)

    return (
      <Container>
        <div className='Login'>
          <form onSubmit={this.handleSubmit}>
            {this.state.error && (
              <h3 data-test='error' onClick={this.dismissError}>
                <button onClick={this.dismissError}>✖</button>
                {this.state.error}
              </h3>
            )}
            <label>User Name</label>
            <input
              type='text'
              data-test='username'
              value={this.state.username}
              onChange={this.handleUserChange}
            />

            <label>Password</label>
            <input
              type='password'
              data-test='password'
              value={this.state.password}
              onChange={this.handlePassChange}
            />

            <input type='submit' value='Log In' data-test='submit' />
          </form>
        </div>
      </Container>
    );
  }

Source File: App.js From document-layout-analysis-app with MIT License

6 votes

function App() {
  return (
    <div className="App">

      <Header />
      <Container className='mt-4 pt-5' >
        <UploadForm />
      </Container>
      

    </div>
  );
}

Source File: ChartSelector.js From indeplot with GNU General Public License v3.0

6 votes

render() {
        const { selected, color, colorPickerOn } = this.state;
        const { data, labels } = this.props;
        return (
            <Container>
                <Form inline className="justify-content-center mb-3">
                    <Form.Label className="mr-2">
                        Select Chart Type
                    </Form.Label>
                    <DropdownButton className="chart-type-selector" title={selected} variant="outline-dark" onSelect={this.handleSelect}>
                        {chartTypes.map((item, i) =>
                            <Dropdown.Item key={i} eventKey={item} >{chartTypeIcons[item]}{item}</Dropdown.Item>
                        )}
                    </DropdownButton>
                    <span>&nbsp;</span>
                    <Button as="input" type="button" value="Color Picker" variant="outline-dark" onClick={this.handleColorPicker} />
                    <Button type="button" variant="outline-dark" onClick={this.refreshData} className="ml-1">Refresh</Button>
                    <Modal show={colorPickerOn} onHide={this.handleModalClose}>
                        <Modal.Header closeButton>
                            Color Picker
                        </Modal.Header>
                        <Modal.Body>
                            <SketchPicker
                                width="95%"
                                color={this.state.color}
                                onChangeComplete={this.handleColor}
                            />
                        </Modal.Body>
                    </Modal>
                </Form>
                <Row>
                    <Col>
                        <Charts chartType={selected} chartColor={color} labels={labels} title="Sample" data={data} options={{}} />
                    </Col>
                </Row>
            </Container>
        )
    }

Source File: Rules.js From Paradox-2021 with MIT License

6 votes

function Rules() {
  return (
      <Container className="Rules__body ">
        <ul>
          {
            rules.map((rule) => {
              return (
                <li className="Rules__ListCont">
                  {" "}
                  {rule}
                </li>
              )
            })
          }
        </ul>
      </Container>
  );
}

Source File: community.component.jsx From MyHome-Web with Apache License 2.0

6 votes

CommunityPage = ({ match, currentUser }) => (
  <div>
    {currentUser ? (
      <Container>
        <PageRow>
          <Column cols={6}>
            <DetailColumn communityId={match.params.uuid} />
          </Column>
          <Column cols={3}>
            <HousesColumn communityId={match.params.uuid} />
          </Column>
          <Column cols={3}>
            <AdminColumn communityId={match.params.uuid} />
          </Column>
        </PageRow>
      </Container>
    ) : ''}
  </div>
)

Source File: Navbar.js From tclone with MIT License

6 votes

render() {
        return (
            <Navbar bg="white" sticky="top" className="py-1 border" style={{ zIndex: 10000 }}>
                <Container>
                    <Navbar.Brand as={Link} className="btn btn-naked-primary rounded-circle text-primary" to="/">
                        <img className="rounded-circle" height="45" width="45" src="/android-chrome-192x192.png" alt="logo" />
                        {/* <FontAwesomeIcon size="lg" icon={faTwitter} /> */}
                    </Navbar.Brand>
                    <Search className="form-inline w-100" />
                    <Row className="ml-auto d-none d-lg-flex justify-content-end w-50">
                        <Link to="/login" className="btn btn-outline-primary rounded-pill px-3 py-2 font-weight-bold">Log in</Link>
                        <Link to="/signup" className="btn btn-primary rounded-pill px-3 py-2 font-weight-bold ml-2">Sign up</Link>
                    </Row>
                </Container>
            </Navbar>
        )
    }

Source File: ExploreTokens.js From katanapools with GNU General Public License v2.0

6 votes

render() {
        let statusIndicator = <span/>;
        const {swap: {swapTokenStatus}} = this.props;
        if (swapTokenStatus.type === 'error') {
            statusIndicator = (
                <Alert  variant={"danger"}>
                {swapTokenStatus.message}
              </Alert>
                )
        }
        return (
            <div>
            <ExploreTokensToolbar renderExploreView={this.renderExploreView}/>
            {statusIndicator}
            <Container className="explore-tokens-container">
            <Switch>
              <Route path="/explore/advanced">
                <ExploreTokensAdvanced {...this.props}/>
              </Route>
              <Route path="/explore/basic">
                <ExploreTokensBasic {...this.props}/>
              </Route>
              <Route exact path="/explore">
              <ExploreTokensAdvanced {...this.props}/>
              </Route>
              <Route exact path="/">
              <ExploreTokensAdvanced {...this.props}/>
              </Route>
            </Switch>
            </Container>
            </div>
            )
    }

Source File: Home.js From portfolio-react with MIT License

6 votes

// const Left = loadable(() => import("./Left"));

export default function Home() {
	const HomeCards = homecards.data

	return (
		<div>
			<Navigation />
			<Container className='innerContainer' fluid>
				<Row className='mainRow'>
					<Left />
					<Col lg className='cols'>
						<Row className='RightSec'>
							<Row className='RightUpperSec'>
								<Col className='RightUpperSecContent'>
									<h2>About Me</h2>
									<HomeAbout />
								</Col>
							</Row>
							<Row className='RightLowerSec'>
								{HomeCards.map((HomeCards, index) => {
									return <HomeCard HomeCards={HomeCards} key={index} />
								})}
							</Row>
						</Row>
					</Col>
				</Row>
			</Container>
		</div>
	)
}

Source File: intro_screen.js From twmwallet with MIT License

6 votes

render() {
        return (
            <div className="width100 height100 d-flex flex-column text-center intro-background-image">
                <Container fluid className="height100 flex-column d-flex justify-content-center">
                    <Image onClick={() => app.quit()} className="entry-off-button pointer" src={require("./../../img/off_black.svg")}/>

                    <Row className="row justify-content-md justify-content-center p-3 intro-safex-logo">
                        <Image className="w-50 intro-safex-logo " src={require("./../../img/safex-home-multi.png")}/>
                    </Row>

                    <button onClick={this.open_select} className="w-50 custom-button-entry my-5 intro-safex-logo">
                        Get Started
                    </button>
                </Container>  
            </div>
        );
    }

Source File: App.js From fifa with GNU General Public License v3.0

6 votes

render() {
    return (
      <UWPThemeProvider
        theme={getTheme({
          themeName: 'dark', // set custom theme
          accent: '#0078D7', // set accent color
          useFluentDesign: true, // sure you want use new fluent design.
          desktopBackgroundImage: background // set global desktop background image
        })}
      >
        <div className="App">
          <Router>
            <Nav />
            <Container fluid="sm" className="p-0">
              <RenderRoutes routes={ROUTES} />
            </Container>
          </Router>
        </div>
      </UWPThemeProvider>
    );
  }

Source File: index.js From Webiu with MIT License

6 votes

About = ({header, mainText, subText, buttonText, buttonLink, image, backgroundColor}) => {
  return (
    <div className="about-component">
    {header ? <div className="header-component">
        <h2><FontAwesomeIcon className="icon" icon={faInfoCircle} /> {header}</h2>
    </div> : null}
    <div className="about-us" style={{backgroundColor: backgroundColor}}>
      <Container>
          <Row>
            <Col md={6} className="left-col">
              <div className="about-content-section">
                {mainText ? <h1>
                  <span className='colored-text'>{mainText.split(' ')[0]}</span>
                  <span>{mainText.split(' ').map((t, i) => i !== 0 ? ' ' + t : null)}</span>
                </h1> : null}
                <p>{subText}</p>
                {buttonText ? <a href={buttonLink} className="button">
                    {buttonText}
                </a> : null}
              </div>
            </Col>
            <Col md={6} className="right-col">
              <img className= "about-image" alt="About" src={image} />
            </Col>
          </Row>
      </Container>
    </div>
    </div>
  )
}

Source File: header.js From stacker.news with MIT License

6 votes

export function HeaderStatic () {
  return (
    <Container className='px-sm-0'>
      <Navbar className='pb-0 pb-md-1'>
        <Nav
          className={styles.navbarNav}
        >
          <div className='d-flex'>
            <Link href='/' passHref>
              <Navbar.Brand className={`${styles.brand} d-none d-md-block`}>
                STACKER NEWS
              </Navbar.Brand>
            </Link>
            <Link href='/' passHref>
              <Navbar.Brand className={`${styles.brand} d-block d-md-none`}>
                SN
              </Navbar.Brand>
            </Link>
          </div>
          <NavItemsStatic className='d-none d-md-flex' />
          <Nav.Item className='text-monospace nav-link px-0'>
            <Price />
          </Nav.Item>
        </Nav>
      </Navbar>
      <Navbar className='pt-0 pb-1 d-md-none'>
        <Nav
          className={`${styles.navbarNav} justify-content-around`}
        >
          <NavItemsStatic />
        </Nav>
      </Navbar>
    </Container>
  )
}

Source File: WorkHistory.js From gatsby-personal-site-template with MIT License

6 votes

CompanyCard = ({ frontmatter, image }) => {
  const { company, position, startDate, endDate, location } = frontmatter
  return (
    <Container fluid className="m-auto work-history">
      <Img
        fluid={image}
        style={{
          maxHeight: "15vmax",
          maxWidth: "15vmax",
        }}
        className="m-auto"
      />
      <div className="md-font">
        <h2 className="m-auto pt-2">{company}</h2>
        <h5 className="text-muted">{location}</h5>
        <h4 className="mt-2">{position}</h4>
        <h5 className="text-muted mt-2">
          {startDate}-{endDate}
        </h5>
      </div>
    </Container>
  )
}

Source File: Achievements.js From Website2020 with MIT License

5 votes

function Posts() {
    return (
        <>
            <div className="section landing-section ">
                <Container>
                    <Row className="d-flex justify-content-center">
                        <Col lg="4" md="12" className="text-center mb-3">
                            <Card className="achievement-card">
                                <Card.Img src={atwork} className="card-img" />
                                <Card.Body>
                                    <Card.Title>Undergraduate Roboticists</Card.Title>
                                    <p className="card-info">
                                        Selected after a comprehensive recruitment, sharing our love for
                                        robotics, we build low-cost robust AUV systems.
                                    </p>
                                </Card.Body>
                            </Card>
                        </Col>
                        <Col lg="4" md="12" className="text-center mb-3">
                            <Card className="achievement-card">
                                <Card.Img variant="top" src={desbot} className="card-img" />
                                <Card.Body>
                                    <Card.Title>Ingenious Design & Creativity</Card.Title>
                                    <p className="card-info">
                                        The designing process behind our latest vehicle, Anahita, has
                                        been appreciated at the international level.
                                    </p>
                                </Card.Body>
                            </Card>
                        </Col>
                        <Col lg="4" md="12" className="text-center mb-3">
                            <Card className="achievement-card">
                                <Card.Img variant="top" src={niotwin} className="card-img" />
                                <Card.Body>
                                    <Card.Title>National Competition Winner</Card.Title>
                                    <p className="card-info">
                                        Twice Runners’ Up (2017 & 2019) at the NIOT SAVe, organised by
                                        the National Insitute Of Ocean Technology, Chennai.
                                    </p>
                                </Card.Body>
                            </Card>
                        </Col>

                    </Row>

                </Container>
            </div>

        </>
    )
}

Source File: Application.jsx From ashteki with GNU Affero General Public License v3.0

5 votes

render() {
        let gameBoardVisible =
            this.props.currentGame && this.props.currentGame.started && this.props.path === '/play';

        let component = this.router.resolvePath({
            pathname: this.props.path,
            user: this.props.user,
            currentGame: this.props.currentGame
        });

        if (this.state.incompatibleBrowser) {
            component = (
                <AlertPanel
                    type='error'
                    message='Your browser does not provide the required functionality for this site to work.  Please upgrade your browser.  The site works best with a recet version of Chrome, Safari or Firefox'
                />
            );
        } else if (this.state.cannotLoad) {
            component = (
                <AlertPanel
                    type='error'
                    message='This site requires the ability to store cookies and local site data to function.  Please enable these features to use the site.'
                />
            );
        }

        let background = 'ashesreborn';

        if (gameBoardVisible && this.props.user) {
            background = `${this.props.user?.settings?.background}`;

            if (
                this.bgRef.current &&
                background === 'custom' &&
                this.props.user.settings.customBackground
            ) {
                this.bgRef.current.style.backgroundImage = `url('/img/bgs/${this.props.user.settings.customBackground}.png')`;
            } else if (this.bgRef.current) {
                this.bgRef.current.style.backgroundImage = `url('${this.backgrounds[background]}')`;
            }
        } else if (this.bgRef.current) {
            this.bgRef.current.style.backgroundImage = `url('${Background}')`;
        }

        return (
            <div className='bg' ref={this.bgRef}>
                <Navigation appName='Ashes Online' user={this.props.user} />
                <div className='wrapper'>
                    <Container className='content'>
                        <ErrorBoundary
                            navigate={this.props.navigate}
                            errorPath={this.props.path}
                            message={"We're sorry - something's gone wrong."}
                        >
                            {component}
                        </ErrorBoundary>
                    </Container>
                </div>
            </div>
        );
    }

react-bootstrap#Container JavaScript Examples