leave two columns in flex-end

user_18942674 0
Viewed 58

my code is this

<Container style={{ position: 'absolute', bottom: '0px', width: '100%', left: 0, right: 0}}  fluid>
    <Row >

          <Col className={sizeWidth < 650 ? "d-flex justify-content-center" : "d-flex justify-content-end"}>
               <ButtonAnterior tabIndex={-1} onClick={() => setCurrentTab('Produto')} text={"anterior"} />
          </Col>

         <Col className={sizeWidth < 650 ? "d-flex justify-content-center" : "d-flex justify-content-end"}>
           <ButtonProximo onClick={() => setCurrentTab('Pontos')} text={"proximo"} />

         </Col>

    </Row>
</Container>

the result looks like this

enter image description here

I need to put both with flex-end, the styles that were added in the container are necessary because the buttons are centered for smartphone

react-bootstrap
1 Answers

Everyone is overusing Grid. It's not needed. What happening here is, that by using Row/Col the width is divided by half and every button is positioned at the end of it.

Instead just use the Stack component (=flexbox):

https://react-bootstrap.github.io/layout/stack/

<Stack direction="horizontal" gap={2} className="justify-content-end">...
user_59804130
Related