Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

327
Views
Centering elements in row (vertically) with react-bootstrap

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>

  );
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

enter image description here

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!