Centering elements in row (vertically) with react-bootstrap

Question

I tried using this to center the h3 vertically:

const HomeDom = ()=>{
  return(
     <Row className="align-items-center">
        <Col>

    <h3 className={'display-3'}>Welcome to the Bulls Marketplace</h3>


        </Col>
      </Row>
  );
}

I also tried my-auto as mentioned in the bootstrap docs.

Anything else I could try to center the h3 element vertically?

Update: (My post got closed because moderators thought I didnt read other questions regarding the same topic):

I have already tried the following class attributes (from answers from this post and other posts regarding the topic) and none of it worked:

"my-auto", "mx-auto", "align-items-center", "justify-content-center" with "d-flex" and "flex-grow", "justify-content-center" with "d-flex" and "flex-grow" along with "stack" as @enix79 proposed (this only centered the H3 element horizontally, but not vertically). The weird thing is that it worked in his sandbox, but not on my end. I have also tried: "center-block" and "pagination-centered" from How can I center elements horizontally or vertically with Twitter Bootstrap? which also did not work.

The other two posts that were being associated as similar with my posts by moderators did not propose anything else than I have already tried.

That being said, my question should be reopened.

Maybe, it has something to do with my routing? I don't know, that is the only explanation I could have: (this is from app.js):

  return(
  <stack className="vw-100 vh-100">
    <NavDom/>
      <Routes>
          <Route path='register' element={<RegisterFormDom contract={contract} account={account}/>}/>
          <Route path='wallet' element={<WalletDom contract={contract} account={account} web3Obj={web3Obj}/>}/>
          <Route path='myservices' element={<MyServicesDom contract={contract} account={account} web3Obj={web3Obj}/>}/>
          <Route path='coaches' element={<CoachesBackendDom contract={contract} account={account} web3Obj={web3Obj}/>}/>
          <Route path='home' element={<HomeDom/>}/>

      </Routes>
      <Footer/>
      </stack>


);

This is my HomeDom right now as proposed by @enix79, but it didnt work and only centered the h3 element horizontally:

return(
      <stack className="flex-grow-1 d-flex justify-content-center p-3" >


                  <h3 className={'display-3'}>Welcome to the Bulls Marketplace</h3>



      </stack>

  );

See https://getbootstrap.com/docs/5.1/utilities/flex/#align-items. You may need to remove margin as well: https://getbootstrap.com/docs/5.1/utilities/spacing/#margin-and-padding — isherwood, Mar 24 '22 at 12:48
When working with React-Bootstrap I've found it beneficial to refer also to the standard Bootstrap docs. The React-Bootstrap docs aren't always as detailed, and the principles should still apply. — isherwood, Mar 24 '22 at 12:52

Igor Gonak · Accepted Answer · 2022-03-25T08:44:39.923

2

There are many ways to center things in css: https://www.w3.org/Style/Examples/007/center.en.html

I would recommend you to use flexbox as much as possible, as it is powerful but simple tool. Many people just overuse grid. In your case you just stack vertically, so you have only one dimension.

When you work with bootstrap, you can use its utility classes: https://getbootstrap.com/docs/5.1/utilities/flex/

Also, when you use react-bootstrap, there is one abstraction more, called Stacks: https://react-bootstrap.netlify.app/layout/stack/#stacks

I have created a Sandbox. Please look into it and tell me, if it's something you are looking for, because I'm still unsure what you try to achieve: https://codesandbox.io/s/musing-satoshi-nhuood?file=/src/App.js

With "align-items" and "justify-content" you can center your content according to the axes. As isherwood mentioned in his comment h3 gets extra bottom margin. So when you want to have it centered to 100%, you have to remove it too.

edited Mar 25 '22 at 08:44

answered Mar 24 '22 at 06:56

Igor Gonak

2,050
2
10
17

Should only the header be centered horizontally or other elements as well? Every element in HomeDom. What is the context of HomeDom (upper components)? There is a navigation component on the same level and then an App component on the highest level. There is also a footer component on the same level as the navigation and homedom component: Hierarchy is: App->[Nav, HomeDom, Footer] where nav, gomedom and footer are on the same level. Why are you using row and column? Because I wanted to set up a grid. I guess I dont have to use it anymore. – a6i09per5f Mar 25 '22 at 01:25
As isherwood mentioned. text-center only centers it horizontally. – a6i09per5f Mar 25 '22 at 01:30
Btw @isherwood, you need 50 reputation to comment a post. – Igor Gonak Mar 25 '22 at 10:34
I'm well aware of this. It doesn't excuse bypassing site rules. – isherwood Mar 25 '22 at 12:48
justify-content-center along with stack unfortunately only centered my h3 element horizontally but not vertically as described in my update in the initial post. – a6i09per5f Mar 25 '22 at 17:14
Your problem is, you write stack small, but stack is a component so you have to write it with capital letter: Stack. Also: Stack already applies d-flex with direction: column so you can remove this class. PS: Don't forget to adjust both Stack components - in your app.js and HomeDome.jsx – Igor Gonak Mar 25 '22 at 17:40

Centering elements in row (vertically) with react-bootstrap

1 Answers1

Linked