CODEWITHSUNDEEP
cssreactjsreact-bootstrap
user1357015
user1357015

Reputation: 11696

React Bootstrap CSS alignment

I am using the following div to generate the attached picture. Is there a recommended way to get the the two icons to align?

enter image description here

<div className='my_node'>
        
        <div style = {{display:"flex"}}>
         
         <Button variant="light" style={{margin: '0px'}} onClick={handleShow}><BiEdit className="transparent-layer"  /></Button>
          <div  style={{ paddingTop: '2px',  boxSizing: 'content-box'}} > {data.label} </div>
          <CloseButton style ={{paddingTop: '6px', marginLeft:"auto"}} name ="deleteNode"/>
        </div>
        
      </div>

Here are my relevant imports:

import { Handle } from 'react-flow-renderer';
import 'reactjs-popup/dist/index.css';
import CloseButton from 'react-bootstrap/CloseButton';
import 'bootstrap/dist/css/bootstrap.min.css';
import "bootstrap-icons/font/bootstrap-icons.css";
import Modal from 'react-bootstrap/Modal'
//import Button from 'react-bootstrap/Button';
//import InputGroup from 'react-bootstrap/InputGroup';
import { Form, Button, FormControl, InputGroup } from "react-bootstrap";
import {BiEdit}  from 'react-icons/bi';

Edit Here's the image post Junaid's suggestion below. The gray square still visible/impacting the text.

enter image description here

Upvotes: 1

Views: 1157

Answers (1)

Junaid Shaikh
Junaid Shaikh

Reputation: 1143

using flex
add flex to the Button as well

     <div style = {{display:"flex", alignItems: "center", justifyContent:"between"}}>
     <Buttonstyle 
         style={{display:"flex", alignItems: "center", justifyContent:"center", margin: '0px'}} 
         variant="light" 
         onClick={handleShow}
     >
         <BiEdit className="transparent-layer"  />
     </Button>

Upvotes: 1

Related Questions