如何使用反应引导程序在中心显示我的网页内容

Question

I am designing a webpage for a desktop using react-bootstrap. I have in my webpage logo, Main heading and form, and some links after the display of the form, I want to display all my content in the center of the webpage. How can I accomplish it using bootstrap flexbox

Answer 1

You can give the most parent div or element in your app a className and apply flexbox properties to it.

const App = () => {
  return (
    <div className='d-flex align-items-center justify-content-center'>...</div> // <--------Most parent div-------->
  )
}

If you only want to center the content horizontally then only apply justify-content otherwise apply both.