I cannot see Bootstrap grid in output

JavaScript
1

Tell us what’s happening:

https://codepen.io/DVGY/pen/wvaQpzV
Check this codepen.

I am trying to output a simple container explained in this tuts: https://react-bootstrap.github.io/layout/grid/

But it does not work why ???

I have used

import Container from 'react-bootstrap/Container';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';

I want to output following code.

<Container>
        <Row>
          <Col> 1 of 1</Col>
        </Row>  
 </Container>

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

2

I would suggest using codesandbox for this. You can add dependencies and do component imports.

Just an FYI, you are using the “react-bootstrap.min.js” bundle with all components exported on the window.ReactBootstrap object.

Browser globals

We provide react-bootstrap.js and react-bootstrap.min.js bundles with all components exported on the window.ReactBootstrap object.

3

Mr. lasjorg can you explain me why it was not working ? .
Did i do the wrong import in codepen setting?
Is codepen not compatible ??

all components exported on the window.ReactBootstrap object. So compenent can be accessed by ReactBootstap.Component ?
I tried it but id does not work inside codepen why ??

4

  1. Remove the imports.

  2. Remove the Container class component and render the QuoteBox instead.

  3. Put all the JSX inside the React Bootstrap Container component.

class QuoteBox extends React.Component {
  render() {
    return (
      <ReactBootstrap.Container>
        <ReactBootstrap.Row>
          <ReactBootstrap.Col> 1 of 1</ReactBootstrap.Col>
        </ReactBootstrap.Row>
        <div id="quote-box">
          <h2 id="text">life is static not dynamic</h2>
          <p id="author">DVGY</p>
          <div>
            <a id="tweet-quote" href="twitter.com/intent/tweet">
              twitter
            </a>
            <a id="tumblr-quote" href="https://www.tumblr.com/">
              {" "}
              tumblr
            </a>
            <button id="new-quote">NEW QUOTE</button>
          </div>
        </div>
      </ReactBootstrap.Container>
    );
  }
}

ReactDOM.render(<QuoteBox />, document.getElementById("root"));

Again, personally I would use codesandbox for React and not Codepen.