Problem with a <br /> effect between <p> tags

JavaScript
1

Tell us what’s happening:
I’m starting the React Projects with the QuoteApp, I did a personal one before starting this one and I did it without any problems, but in this one I can’t apply the effect of an “<br />” between the <p> tags. I’m not using the tag <br /> itself because I got the desired result with <p> tags in another project. I’m using the WebStorm IDE for this project. The result I’m getting is like this:

brave_52d6ABQkyW

Your code so far
The App.js code


import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import QuotePage from "./quotePage";
function App() {
  return (
     \<div className="App">
        \<QuotePage />
    \</div>
  );
}
export default App;

quoteProc.jsx code:

>import React from 'react';
class QuotePage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            generated: false,
            rdnNumber: 0,
            quotes: [],
            authos: []
        }
    }
    render() {
        return (
            \<main id="quote-box" className="container flex-column">
                \<div className="row justify-content-center">
                   \<div id="text" className="row justify-content-center text-justify">
                       \<p>text\</p>
                    \</div>
                    \<div id="author" className="row justify-content-center text-justify">
                        \<p id="author">author\</p>
                    \</div>
                    \<div className="row justify-content-center">
                       \<button id="new-quote" className="btn btn-primary">New Quote!\</button>
                        \<button id="tweet-quote" className="btn btn-info">\<a href="#">Tweet this quote!\</a>\</button>
                    \</div>
                \</div>
            \</main>
        )
    }
}
export default QuotePage;

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.116 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

1 Like
3

The styling issue isn’t with your p tags but with the way that you’ve layed out your row containers. An overview of your output looks similar to:

row
  row
    input
  row
    input
  row
    button
    button

In my experience a row should not contain many rows. A col should contain many rows. So this is more of an understanding what’s happening with Bootstrap question.

When you’re attempting to place many rows, you will want them within a column. In the example that you have provided, you are putting rows into rows. Try and change the current container row into a col and see how that works for you. I think the output is what you’re looking for!

1 Like
4

Oh. Yep that was the problem. Thanks a lot!

I checked the other project that worked and I had put one there too, it was a bit hidden because I put a lot of divs.

Thanks again!

1 Like