I cannot see Bootstrap grid in output

Tell us what’s happening:

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.

          <Col> 1 of 1</Col>

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:

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.

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 ??

  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.Col> 1 of 1</ReactBootstrap.Col>
        <div id="quote-box">
          <h2 id="text">life is static not dynamic</h2>
          <p id="author">DVGY</p>
            <a id="tweet-quote" href="twitter.com/intent/tweet">
            <a id="tumblr-quote" href="https://www.tumblr.com/">
              {" "}
            <button id="new-quote">NEW QUOTE</button>

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

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