react-bootstrap#Container JavaScript Examples
The following examples show how to use
react-bootstrap#Container.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| 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>
);
}
Example #2
| 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>
);
}
Example #3
| 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>
</>
)
}
Example #4
| 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>
);
}
Example #5
| 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>
</>
);
}
Example #6
| 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>
</>
);
}
Example #7
| 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>
</>
);
}
Example #8
| 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>
</>
);
}
Example #9
| 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>
);
}
Example #10
| 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>
);
}
Example #11
| 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>
);
}
Example #12
| 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>
)
}
Example #13
| 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>
) }
</>
)
}
Example #14
| 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'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>
);
}
Example #15
| 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>
);
}
Example #16
| 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>
);
}
Example #17
| 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> </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>
)
}
Example #18
| 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>
);
}
Example #19
| 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>
)
Example #20
| 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>
)
}
Example #21
| 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>
)
}
Example #22
| 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>
)
}
Example #23
| 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>
);
}
Example #24
| 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>
);
}
Example #25
| 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>
)
}
Example #26
| 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>
)
}
Example #27
| 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>
)
}
Example #28
| 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>
</>
)
}
Example #29
| 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>
);
}
