Random Quote Generator- Div- columns not working

[danielvigliano]

Hi!

I’m getting my Random Quote Generator started, but I’m having trouble making the quote-box. I used a row and col-xs-6, but the quote-box takes up the entire row. I tried using another container div and making another button. I tried using className and the new col-6 instead, but that also didn’t change anything. Below is the code. Why isn’t it a small box?

import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import bootstrap from "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js";

<style>
.box {
  background-color: purple;
}
</style>

const APT =  'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json';

<div id="app" class="container"></div>

class App extends React.Component {
    state = {
        quote: [],
        index: 0
    }
    componentDidMount() {}

    render(){
        const { quote, index } = this.state;

        

        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

[nibble]

Hi @danielvigliano

Welcome to FCC.

I would recommend you transfer the project to codepen and then share the link to the codepen project. That will make it easy to help you.